How to Scale SVG Without Losing Quality

Why SVG Scales Infinitely

SVG stores graphics as mathematical descriptions — 'draw a circle of radius 50 at point X,Y'. When you scale the display size, the browser recalculates the geometry at the new size. No pixels = no pixelation. This is SVG's core advantage over raster formats.

Setting Up SVG for Scaling

For an SVG to scale correctly, it needs a viewBox and no fixed pixel dimensions.

• Required: viewBox='0 0 100 100' (or whatever the coordinate bounds are)
• Remove: width='200px' height='200px' attributes from the <svg> tag
• Control size in CSS: svg { width: 100%; height: auto; }
• Or set width/height in HTML: <svg width='500' viewBox='0 0 100 100'>
• The viewBox defines the internal coordinate system; CSS/HTML attributes control display size

Scaling SVG in CSS

Once the SVG has only a viewBox (no fixed dimensions), it's fully responsive:

• svg { width: 100%; height: auto; } — fills container width proportionally
• max-width: 400px; — prevents it from growing too large
• transform: scale(2) — doubles the rendered size (GPU-accelerated)
• Embed as <img> or inline — both scale correctly with the above setup

Scaling Inline SVG with JavaScript

For programmatic resizing: either change the width/height attributes, or change the CSS width property. The viewBox stays unchanged.

• svgElement.setAttribute('width', '800');
• svgElement.style.width = '50%';
• Never change the viewBox values when scaling — it changes the coordinate system, not the display size
• To zoom in on a portion: change the viewBox values (minX, minY, width, height)

Frequently Asked Questions

Related guides