How to Make SVG Responsive for Web
Make your SVG scale with the browser window. Remove hardcoded width/height, keep the viewBox, and use CSS to control SVG size — the responsive SVG pattern.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
The Responsive SVG Pattern
For a responsive SVG, remove the width and height attributes from the <svg> tag, keep the viewBox, and size the SVG with CSS.
- Remove: width='500' height='300' from the <svg> tag
- Keep: viewBox='0 0 500 300' — this defines proportions
- Add CSS: svg { width: 100%; height: auto; }
- The SVG now scales to fill its container while maintaining aspect ratio
- For max size: svg { width: 100%; max-width: 500px; height: auto; }
Responsive SVG in Different Contexts
Responsive SVG behavior varies depending on how the SVG is embedded in the page.
- Inline SVG: CSS width: 100% on the <svg> element works directly
- <img src='file.svg'>: set width: 100% on the <img> element; SVG scales inside
- <object data='file.svg'>: set width: 100% on the <object> element
- CSS background-image: use background-size: contain or cover for scaling
- React/Vue component: control via wrapper div width + CSS
Frequently Asked Questions
Why isn't my SVG scaling responsively?
The SVG has hardcoded width and height attributes overriding CSS. Open the SVG file, remove the width='...' and height='...' attributes from the <svg> tag, and add CSS sizing instead.
Can I have a responsive SVG with a fixed aspect ratio?
Yes — that's exactly what viewBox does. Set viewBox='0 0 400 300' for a 4:3 SVG. Remove width/height. The SVG will always render at 4:3 ratio regardless of its CSS size.
How do I make an SVG logo responsive in a website header?
Remove width/height from the SVG, keep viewBox, embed inline or as <img>. In CSS: .logo svg { width: 120px; height: auto; } for desktop and .logo svg { width: 80px; } for mobile media query.
What is preserveAspectRatio in SVG?
It controls how SVG content scales when the aspect ratio of the SVG viewport doesn't match the viewBox. Default (xMidYMid meet) centers the content and letterboxes. Use 'none' to stretch SVG to fill without keeping ratio.
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