How to Make SVG Responsive
Remove hardcoded pixel dimensions and let SVG scale fluidly to any screen size — mobile, tablet, or desktop.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
The Core Fix: viewBox + Remove width/height
The most common mistake: SVG files have a fixed width and height attribute. These lock the SVG to a pixel size. The fix: keep the viewBox attribute, remove (or override) the width and height.
- Before: <svg width='400' height='300' viewBox='0 0 400 300'>
- After: <svg viewBox='0 0 400 300'> — now inherits container size
- In CSS: svg { width: 100%; height: auto; } — scales proportionally
- max-width: 100% prevents SVG from overflowing its container
Understanding viewBox
viewBox='minX minY width height' defines the coordinate system inside the SVG. It's the content's coordinate space, not the display size. An SVG with viewBox='0 0 100 100' will draw its content across whatever size CSS sets.
preserveAspectRatio
Controls how SVG scales when the aspect ratio of viewBox and container don't match. The default (xMidYMid meet) centers and fits the SVG. For full-bleed backgrounds use: preserveAspectRatio='xMidYMid slice'.
- xMidYMid meet — letterbox/pillarbox, fully visible
- xMidYMid slice — fill the container, may crop edges
- none — stretch to fill, distorts the SVG
- xMinYMin meet — align to top-left corner
Responsive SVG in CSS Grid and Flexbox
SVG inside flex/grid containers may need explicit sizing. Always set width: 100% on the SVG and let the container control max-width. For aspect-ratio-controlled containers:
- aspect-ratio: 16/9; on the wrapper div
- SVG fills the wrapper with width: 100%; height: 100%;
- Or use the padding-bottom trick for older browser support
Frequently Asked Questions
My SVG is responsive in Chrome but not Safari — why?
Safari historically had issues with SVG height inference inside flex containers. Add height: auto to the SVG and ensure the parent has a defined size or use intrinsic sizing with aspect-ratio.
How do I make text inside SVG responsive?
SVG text scales with the SVG. If the SVG itself is responsive (viewBox + no fixed dimensions), the text scales proportionally. You can also use font-size in em units within the SVG for additional flexibility.
Can I use SVG with srcset for responsive images?
SVG doesn't need srcset because it's resolution-independent. One SVG file serves all screen densities. Only use srcset when providing SVG alongside raster fallbacks for older browsers.
My responsive SVG has whitespace above and below — how do I fix it?
Add display: block to the SVG. SVGs are inline by default, which adds line-height spacing. Alternatively, set vertical-align: bottom.
How do I set a minimum size for a responsive SVG?
Use min-width on the SVG or its container: svg { width: 100%; min-width: 200px; max-width: 600px; }
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG