How to Resize an SVG File
SVG scales to any size perfectly — but resizing requires knowing which attributes to change. Here's every method, from HTML attributes to Inkscape.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Method 1: HTML/CSS (Easiest for Web)
For SVG embedded as <img> or inline in HTML, set the size with CSS or HTML width/height attributes.
- <img src='logo.svg' width='200' height='100'> — fixed pixel size
- CSS: img { width: 100%; height: auto; } — responsive scaling
- Inline SVG: <svg width='200' height='100' viewBox='0 0 200 100'>
- Always set both width AND height on <img> to prevent CLS (layout shift)
- Use % or vw units for fluid responsive SVG scaling
Method 2: Inkscape (For Files)
To resize the SVG file itself (not just its display size), use Inkscape.
- File > Document Properties > Page > set W and H in px or mm
- Object > Transform > Scale to resize selected paths proportionally
- Select All (Ctrl+A), then use W/H fields in the toolbar with lock enabled
- File > Save As to save the resized SVG as a new file
- Inkscape Export PNG: export at any resolution from the resized SVG
Method 3: Edit SVG viewBox Directly
The viewBox attribute controls the SVG coordinate system and is the correct way to control how SVG content fills its display area.
- viewBox='0 0 width height' — defines the content coordinate system
- To zoom in: reduce the viewBox values (smaller viewBox = more zoomed in)
- To zoom out: increase viewBox values
- width and height attributes on <svg> control display size
- Remove fixed width/height from the <svg> element; set with CSS instead
Frequently Asked Questions
Does resizing an SVG lose quality?
No. SVG is mathematically defined — it renders at perfect quality at any size. This is the core advantage of SVG over raster formats.
Why does my SVG get cropped when I resize it?
If the SVG has fixed width/height without a viewBox, content may appear cropped. Add a viewBox matching the SVG content dimensions to enable proper scaling.
How do I make an SVG fill its container?
Set width='100%' height='100%' on the <svg> element, or via CSS: svg { width: 100%; height: 100%; }. Ensure the SVG has a viewBox set.
Can I resize an SVG to exact millimeter dimensions for print?
In Inkscape: File > Document Properties > set units to mm, then set exact W and H. Export as PDF for print-ready output at the specified dimensions.
Does changing SVG width and height affect file size?
No. The width/height attributes only affect display size. SVG file size is determined by the number and complexity of paths, not display dimensions.
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