ImageToSVG

SVG viewBox Explained: Coordinate System and Scaling

The viewBox attribute is the most important concept in SVG — it's what makes SVG scalable and responsive.

Preset:
Colors:
VTracer vectorization + SVGO optimizationPrivacy protected

What viewBox Does

viewBox defines the SVG's internal coordinate system independently from its display size.

  • viewBox='minX minY width height': four numbers defining the coordinate space
  • viewBox='0 0 100 100': internal space is 100 units wide and 100 units tall
  • Browser scales the coordinate space to fit the SVG's display size (CSS width/height)
  • A circle at cx='50' cy='50' r='30' is always centered, regardless of display size
  • The ratio between viewBox width:height is the SVG's intrinsic aspect ratio

viewBox vs width/height Attributes

Understanding the relationship between these three attributes.

  • viewBox: internal coordinate system (design space)
  • width/height on svg: display size (screen pixels)
  • Both set: the coordinate space is scaled to fit the display size
  • Only viewBox: SVG is fluid — scales to CSS container
  • Only width/height: SVG has no internal coordinate system — elements use pixel coordinates

preserveAspectRatio with viewBox

Controls how SVG content fits when the viewBox and display size have different aspect ratios.

  • preserveAspectRatio='xMidYMid meet': default — fit and center (like background-size: contain)
  • preserveAspectRatio='none': stretch to fill (like background-size: 100% 100% — distorts)
  • preserveAspectRatio='xMidYMid slice': fill and crop (like background-size: cover)
  • xMinYMin, xMaxYMax: alignment when meet/slice is used — controls which corner anchors

Frequently Asked Questions

Do I always need a viewBox?

For responsive SVG that scales to any size: yes, always include viewBox. Without it, SVG sizes are in absolute pixels and don't scale. viewBox is what makes SVG truly resolution-independent.

What should I set the viewBox to?

Set it to match your design coordinates. If you designed on a 24×24 grid: viewBox='0 0 24 24'. If your paths use 0–1000 coordinates: viewBox='0 0 1000 1000'. The exact values don't matter — the ratio does.

Why does my SVG look cut off?

The content extends outside the viewBox bounds. Increase the viewBox size (4th and 3rd parameters) or move content within the bounds. Also check overflow='visible' vs overflow='hidden' on the svg element.

How do I make SVG fill its container?

Remove width and height attributes from the svg element. Add viewBox. In CSS: svg { width: 100%; height: 100%; }. The SVG fills the container while maintaining the viewBox's aspect ratio.

Can I change the viewBox to zoom in on part of an SVG?

Yes — set viewBox to a sub-region: viewBox='25 25 50 50' on a 100×100 SVG zooms in to the center quarter. This is a clean way to create zoomed views without duplicating SVG content.

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