SVG viewBox – Scale, Crop, and Fit SVG Graphics

SVG viewBox

The viewBox attribute tells SVG which coordinate rectangle should be fitted into the visible viewport. By changing its four values, you can scale artwork, crop it, shift the visible area, or make the same SVG respond cleanly to different display sizes.

This article is the practical viewBox guide. It assumes you already know what the SVG canvas, viewport, and coordinate system are. If those terms are still unclear, start with SVG Coordinate Systems and Units.

In this article, you will learn to:

• Read the viewBox="min-x min-y width height" syntax.
• Scale SVG artwork by changing the viewBox width and height.
• Crop or reposition SVG artwork by changing min-x and min-y.
• Combine viewBox with preserveAspectRatio for responsive SVG output.

How viewBox Works

The SVG specification defines viewBox as an attribute that establishes a user coordinate system for the SVG viewport. It has four whitespace-separated values:

viewBox="min-x min-y width height"

Value	Meaning
min-x	X-coordinate where the visible rectangle starts
min-y	Y-coordinate where the visible rectangle starts
width	Width of the visible coordinate rectangle
height	Height of the visible coordinate rectangle

The viewport is the output area defined by width, height, CSS, or the surrounding layout. The viewBox is the coordinate rectangle that SVG maps into that output area. If the viewBox is smaller than the viewport, the selected coordinate area is enlarged. If it is larger than the viewport, the artwork appears smaller because more coordinate space is fitted into the same visible area.

<svg width="250" height="250" viewBox="0 0 250 250" xmlns="http://www.w3.org/2000/svg">
    ...
</svg>

• Changing min-x or min-y moves the visible coordinate rectangle.
• Changing width or height changes the scale.
• Changing all four values combines repositioning and scaling.

Note: In the illustrations below, the viewport is shown in green and the viewBox region is shown in blue.

Example SVG Used in the Article

The examples below use the same simple flower-like SVG drawing. Only the viewBox value changes, so you can see how the coordinate rectangle affects the rendered result.

<svg width="250" height="250" viewBox="0 0 250 250" xmlns="http://www.w3.org/2000/svg">
  <g fill="RoyalBlue">
    <rect x="25" y="100" rx="25" ry="25" width="200" height="56" />
    <rect x="25" y="100" rx="25" ry="25" width="200" height="56" transform="rotate(90 125 128)" />
    <rect x="25" y="100" rx="25" ry="25" width="200" height="56" transform="rotate(-45 125 128)" />
    <rect x="25" y="100" rx="25" ry="25" width="200" height="56" transform="rotate(45 125 128)" />
  </g>
  <circle cx="125" cy="128" r="28" stroke="pink" stroke-width="50" stroke-dasharray="3 13" fill="Orange" />
  <circle cx="125" cy="128" r="5" />
</svg>

Scale SVG with viewBox

Scaling with viewBox is controlled by the last two values: width and height. They define how much coordinate space should be fitted into the viewport.

Zoom Out with a Larger `viewBox`

When the viewBox width and height are larger than the viewport dimensions, SVG fits a larger coordinate area into the same output size. The result looks smaller because more of the canvas is visible at once.

<svg width="250" height="250" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">

Zoom In with a Smaller `viewBox`

When the viewBox width and height are smaller than the viewport dimensions, SVG enlarges that smaller coordinate area to fill the viewport. The result looks zoomed in, and content outside the selected rectangle can be clipped.

<svg width="250" height="250" viewBox="0 0 125 125" xmlns="http://www.w3.org/2000/svg">

Crop or Reposition SVG with viewBox

Cropping and repositioning are controlled by the first two viewBox values: min-x and min-y. These values move the start of the visible coordinate rectangle.

Crop the Right Side

A negative min-x moves the selected coordinate rectangle to the left. In this example, the visible rectangle covers x-coordinates from -100 to 150, so content to the right is clipped.

<svg width="250" height="250" viewBox="-100 0 250 250" xmlns="http://www.w3.org/2000/svg">

Crop the Left Side

A positive min-x moves the selected coordinate rectangle to the right. In this example, the visible rectangle starts at x-coordinate 100, so the left part of the artwork is no longer visible.

<svg width="250" height="250" viewBox="100 0 250 250" xmlns="http://www.w3.org/2000/svg">

Responsive SVG and preserveAspectRatio

For responsive SVG, keep viewBox and let CSS or the container control the display size:

<svg viewBox="0 0 250 250" width="100%" height="auto" xmlns="http://www.w3.org/2000/svg">

By default, SVG preserves the aspect ratio of the viewBox. If the viewport and viewBox have different proportions, the preserveAspectRatio attribute controls alignment and fitting behavior.

<svg width="400" height="250" viewBox="0 0 250 250" preserveAspectRatio="xMidYMid meet">

Use meet when the whole image must remain visible. Use slice when the viewport must be fully covered and cropping is acceptable.

How to Use SVG viewBox

1. Set the visible viewport with width, height, CSS, or layout.
2. Choose the coordinate rectangle with viewBox="min-x min-y width height".
3. Change the viewBox width and height to zoom in or zoom out.
4. Change min-x and min-y to crop or reposition the visible area.
5. Add preserveAspectRatio when the viewport and viewBox proportions differ.

Common Mistakes and Fixes

Problem	Cause	Solution
SVG appears stretched or squashed	The viewport and viewBox have different aspect ratios, and fitting behavior is not controlled	Add preserveAspectRatio="xMidYMid meet" or choose another appropriate value
Artwork is unexpectedly clipped	The viewBox rectangle does not cover the intended coordinate area	Check min-x, min-y, width, and height against the artwork coordinates
SVG does not scale responsively	The SVG has fixed display dimensions but no viewBox	Keep viewBox and control display size with CSS or container layout
Changing CSS size does not change the crop	CSS changes the viewport size, not the selected coordinate rectangle	Change the viewBox values when you need a different crop or zoom area
viewBox is ignored	The attribute has missing quotes, commas used incorrectly, or the wrong number of values	Use exactly four whitespace-separated values: viewBox="min-x min-y width height"

Quick Recipes

Task	SVG Example
Keep the whole SVG scalable	<svg viewBox="0 0 250 250" width="100%" height="auto">
Zoom in 2x	<svg width="250" height="250" viewBox="0 0 125 125">
Zoom out 2x	<svg width="250" height="250" viewBox="0 0 500 500">
Shift the visible area right	<svg width="250" height="250" viewBox="100 0 250 250">
Preserve full image visibility	<svg width="400" height="250" viewBox="0 0 250 250" preserveAspectRatio="xMidYMid meet">
Fill the viewport even if cropped	<svg width="400" height="250" viewBox="0 0 250 250" preserveAspectRatio="xMidYMid slice">

FAQ – Frequently Asked Questions about viewBox

What does the viewBox attribute do?

The viewBox attribute defines which coordinate rectangle of the SVG canvas is mapped to the viewport. It controls scaling, cropping, and visible positioning without changing the actual shapes.

How is viewBox different from width and height?

width and height define the output viewport size. viewBox defines the coordinate area that is fitted into that viewport. Changing width and height changes display size; changing viewBox changes what coordinate space is shown and how it is scaled.

Do I need viewBox for responsive SVG?

Usually, yes. A viewBox gives the SVG a stable internal coordinate system, while CSS or container sizing can change the displayed size. This is the most reliable pattern for responsive SVG graphics.

Can viewBox crop an SVG?

Yes. Change min-x, min-y, width, and height so the viewBox covers only the part of the canvas you want to show. Anything outside that selected coordinate rectangle is clipped by the viewport.

Does viewBox change the path data or shape coordinates?

No. viewBox changes how existing coordinates are mapped to the viewport. It does not rewrite d, x, y, cx, cy, or other geometry attributes.

Specification and Related Resources

• The SVG specification section on the viewBox attribute defines how a user coordinate rectangle is mapped to the viewport.
• The preserveAspectRatio attribute section explains how SVG aligns and scales viewBox content when aspect ratios differ.
• Start with SVG Coordinate Systems and Units if you need the coordinate model behind viewBox.
• Use SVG Transformations when you need to move, rotate, scale, skew, or flip existing SVG elements with the transform attribute.
• Open SVG Shapes to see how coordinates define rectangles, circles, ellipses, lines, polylines, and polygons before viewBox changes their display scale.
• Go to What is an SVG File? for a broader overview of SVG structure, benefits, and file format basics.