How to make an SVG responsive
So it adapts to any screen
A responsive SVG fits its container's width without deforming. The key is the viewBox and avoiding fixed sizes.
1. Use viewBox, not fixed width/height
Define the internal system with viewBox and let CSS control the on-screen size:
<svg viewBox="0 0 100 100"> ... </svg>
2. Control the size with CSS
svg { width: 100%; height: auto; display: block; }
That way the SVG takes the container's width and the height adjusts on its own, keeping proportion.
3. preserveAspectRatio
By default (xMidYMid meet) the drawing fits whole and centered. If you want it to fill the area by cropping, use slice. Avoid none unless you want to deform on purpose.
Common mistake
Leaving width="300" height="200" on the tag forces a size and breaks the adaptation. Remove those attributes if you'll control it with CSS.
Inline vs img
Both inline and with <img> the SVG can be responsive. Inline also lets you style it with CSS.
Web-ready
In svgdesk, SVGs are created with a viewBox and without fixed sizes on export, so they're ready to be responsive.