ImageToSVG

SVG viewBox: The Complete Guide

The viewBox attribute is the key to perfect SVG scaling. Once you understand how it works, responsive SVG becomes simple.

Preset:
Colors:
VTracer vectorization + SVGO optimizationPrivacy protected

What Is the SVG viewBox?

The viewBox attribute defines the coordinate system inside the SVG — separate from its display size.

  • Syntax: viewBox='minX minY width height'
  • Example: viewBox='0 0 100 100' — coordinate space from (0,0) to (100,100)
  • The display size is set separately: width='200' height='200' or via CSS
  • viewBox maps the internal coordinate space to the display dimensions
  • Without viewBox: SVG uses its width/height as the coordinate space — fixed, not scalable

How viewBox Enables Responsive SVG

The combination of viewBox + CSS sizing makes SVG truly responsive.

  • <svg viewBox='0 0 100 100' style='width: 100%; height: auto;'> — scales to fill any container
  • The SVG coordinate system stays at 0 0 100 100 regardless of display size
  • Paths inside use the 0–100 coordinate space — always scale proportionally
  • Remove fixed width/height from the <svg> element; control via CSS instead
  • This is why SVGs from imagetosvg.com include a viewBox for correct web use

viewBox for Cropping and Zooming

viewBox is also the correct tool for cropping SVG content or zooming in.

  • Zoom in: reduce the viewBox dimensions (viewBox='25 25 50 50' zooms to the center)
  • Zoom out: increase viewBox dimensions (viewBox='-25 -25 150 150' adds space around content)
  • Crop: set viewBox to the region of content you want to show
  • Pan: change minX and minY to shift the visible region
  • Animation: animate the viewBox attribute for smooth SVG pan-and-zoom effects

Frequently Asked Questions

What's the difference between width/height and viewBox on SVG?

width/height sets the display size on screen. viewBox defines the internal coordinate system. Use viewBox for responsive SVG, and set display size via CSS.

My SVG is the right size but content is in the wrong position — why?

The viewBox minX and minY values shift where the coordinate system starts. If minX or minY are non-zero, content may appear offset. Set viewBox='0 0 width height' to start from the origin.

How do I find the correct viewBox for my SVG?

In Inkscape: File > Document Properties shows the canvas dimensions — use those as the viewBox. In a browser: call svg.getBBox() to get the bounding box of all content, then use x, y, width, height as viewBox.

What is preserveAspectRatio and when do I need it?

preserveAspectRatio controls what happens when the display aspect ratio doesn't match the viewBox ratio. Default (xMidYMid meet) centers the SVG and letterboxes. Set to 'none' for stretching, or 'xMidYMid slice' to cover.

Can I animate the viewBox?

Yes — with CSS or JavaScript. Animated viewBox changes create smooth pan and zoom effects. Use CSS transitions on the viewBox for simple animations, or requestAnimationFrame for complex ones.

Related guides

Free converterConvert any image to SVG instantlyPNG to SVG guideStep-by-step conversion walkthroughSVG vs PNGWhich format should you use?SVG for CricutCricut-ready SVG workflow

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