Set the SVG viewBox for a scalable logo
How the SVG viewBox attribute makes a vector logo scale cleanly, how it differs from width and height, and how to set it so the artwork is neither clipped nor padded.
Contents
The short answer
The viewBox attribute on an SVG's root element defines the internal coordinate system the logo's artwork is drawn in. It takes four numbers: the x and y position of the top-left corner, followed by the width and height of the visible area in those internal units. Once a viewBox is present, the browser or design tool can map that coordinate space onto any display size, so the logo scales up or down without losing sharpness. For most logos, the right viewBox starts at 0 0 and matches the bounds of the artwork, plus any clear space you intentionally want built into the file.
<svg viewBox="0 0 240 80">
<!-- logo paths drawn in a 240 x 80 coordinate space -->
</svg>The numbers above are only an illustration, not a recommended size. They mean the artwork occupies a space 240 units wide and 80 units tall, which gives a 3:1 proportion. Standalone .svg files also need the standard SVG namespace declaration on the root element; it is left out of this snippet for brevity. The attribute name is case-sensitive: it must be written as viewBox, with a capital B.
How viewBox differs from width and height
Width and height and viewBox are often confused because they all describe size, but they control different things. Width and height set how large the SVG is rendered on a page or in a layout. The viewBox sets which region of the drawing is shown and in what proportion. A logo can display at any rendered size, but it only scales predictably when the viewBox tells the renderer how the drawing's own units relate to that size.
| Attribute | What it controls | Effect on a logo |
| viewBox | The internal coordinate area that is visible | Sets the logo's proportions and crop; enables scaling |
| width and height | The rendered size of the SVG element | Fixes a display size; can be overridden by CSS or removed |
| preserveAspectRatio | How the viewBox fits when the display box has different proportions | Controls alignment and whether the logo is letterboxed, cropped or distorted |
If an SVG has width and height but no viewBox, it typically renders at that fixed size, and changing the display dimensions with CSS can crop the artwork rather than scale it. Adding a viewBox fixes this. Removing the fixed width and height, or overriding them with CSS, then lets the logo fill whatever container it is placed in while keeping its proportions. Some implementers prefer to keep width and height alongside the viewBox so the file has a sensible default size when opened on its own; both approaches are valid as long as the viewBox is present.
Setting the viewBox correctly for logo artwork
- Match the artboard to the artwork. Design tools usually derive the exported viewBox from the artboard, frame or canvas size, so fitting the artboard to the logo before export is the most reliable way to get a clean viewBox.
- Decide on clear space deliberately. A tight viewBox crops right to the edges of the artwork, which makes alignment in layouts predictable. Padding inside the viewBox builds clear space into the file, which some brand guidelines prefer. Either is reasonable, but the choice should be intentional and consistent across all logo variants.
- Account for strokes and effects. Strokes extend half their width beyond a path's geometric outline, and some effects reach further. If the viewBox is fitted to the path geometry alone, those edges can be clipped. Converting strokes to outlines before export, or checking the bounds visually, avoids this.
- Watch for offsets. If the first two viewBox values are not zero, the artwork was drawn away from the origin. This is valid, but it often signals leftover artboard positioning; normalizing to 0 0 makes the file easier to edit and reuse.
- Keep proportions consistent. The ratio of the viewBox width to height is the logo's aspect ratio. If the display box has a different ratio, preserveAspectRatio decides the fit; the default centers the logo and scales it to fit without distortion, while the value none stretches it to fill.
When the viewBox will not make a logo scalable
A viewBox only guarantees crisp scaling for vector content: paths, shapes and text drawn in SVG. An SVG file can also contain an embedded raster image, such as a bitmap placed inside an image element. That embedded image scales with the viewBox, but it pixelates or blurs when enlarged, just as it would outside SVG. Some files are essentially raster previews wrapped in an SVG container. The .svg extension alone does not confirm that a logo contains editable vector paths; opening the file in a vector editor or inspecting its markup is the way to check.
Live text in an SVG logo is another limitation. If it relies on a font that is not installed or embedded where the logo is displayed, the renderer substitutes another font and the logo changes appearance regardless of the viewBox. Converting logo type to outlines avoids that dependency, though it also means the text can no longer be edited as text.
Permission to edit is a separate question
Adjusting the viewBox is a technical edit to the file, but having a logo file available to download does not by itself grant permission to modify the artwork, use its fonts or use the mark. If the logo belongs to another organization, its brand guidelines or trademark terms govern whether cropping, padding or other changes are allowed.
What this overview does not cover
No evidence about a specific logo, design tool version or export setting was supplied, so this article describes general SVG behavior rather than step-by-step instructions for a particular application. Menu names, artboard options and default export settings differ between tools and versions; check your tool's own documentation for how it writes the viewBox, width and height attributes on export.