As a beginner in SVG design, I find it challenging to scale, zoom in/out with the container and ensure responsiveness across different devices.
I wonder if it's possible to create an SVG that adapts to all device sizes and effectively handles browsing zoom functionality.
So far, I've experimented with viewport and viewbox settings for each breakpoint.
For example, on Desktop, I have an SVG that fits within a container and should scale and zoom in/out accordingly (svgClass).
.svgClass {
background-image: url('assets/svg/desktop-svg.svg');
width: "100%";
height: 800px;
position: absolute;
}
<div class="svgClass"></div>
Sample SVG
---desktop-svg.svg---
<svg width="1400" height="800" viewbox="0 0 1121 641">
-----
</svg>
The SVG displays well at 100% browser zoom, but becomes displaced when zoomed in or out.
To address zoom in, I increased the viewport height to 1400 and width to 800 compared to the viewbox (0 0 1121 641), which worked for zooming in but not out.
I've attempted removing width and height from the viewport and experimenting with auto and 100% settings, but haven't achieved success.
How can I design an SVG that scales with the container and remains responsive? Also, do I need to set up viewport and viewbox configurations for each device?