SVG viewBox and Responsive Scaling — Complete Guide
The viewBox attribute makes SVG scale responsively to any container size. Learn how viewBox, width/height, and preserveAspectRatio work together for responsive SVG.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
viewBox Explained
viewBox defines the internal coordinate system of the SVG — width/height set the rendered size.
- viewBox='0 0 200 100' means: origin at (0,0), 200 units wide, 100 units tall
- The SVG scales this coordinate system to fit the rendered size
- <svg viewBox='0 0 200 100' width='400' height='200'>: renders at 2x scale
- Remove fixed width/height and add CSS width: 100%: SVG becomes fully responsive
- The viewBox proportions (200:100 = 2:1 ratio) are preserved when scaling
Making Any SVG Responsive
Step-by-step to make any existing SVG responsive for the web.
- Open SVG in a text editor
- Find the <svg> opening tag
- Check if it has viewBox already — if not, add viewBox='0 0 [width] [height]' using the current width/height values
- Remove the width and height attributes (or set them to 100%)
- In CSS: svg { width: 100%; height: auto; }
- Test: resize the browser window — the SVG should scale proportionally
Frequently Asked Questions
Why is my SVG not scaling on mobile?
Most likely the SVG has fixed width and height attributes with pixel values. Remove those attributes and set width: 100%; height: auto; in CSS. Also ensure the SVG has a viewBox attribute so the browser knows the aspect ratio.
What is preserveAspectRatio in SVG?
preserveAspectRatio controls how an SVG scales when its aspect ratio doesn't match the container. xMidYMid meet (default) centers and fits the SVG. none stretches it to fill. xMinYMin meet aligns to top-left. For most responsive SVGs, the default (xMidYMid meet) is what you want.
How do I make an SVG fill its container without stretching?
Set preserveAspectRatio='xMidYMid slice' to fill and crop (like CSS object-fit: cover). Or use xMidYMid meet to fit inside and preserve the full SVG (like object-fit: contain). Combine with viewBox for proportional scaling.
Should I set width and height on SVG used in Next.js?
For Next.js: set width and height as intrinsic values that you override with CSS. Or use the next/image component for external SVGs. For inline SVG, remove fixed dimensions and use CSS for sizing. The SVG viewBox ensures proportional scaling.
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