Fixing SVG Logos That Do Not Scale

The short answer

When an SVG logo won't resize, the cause is usually in the file's root svg element or in the CSS around it, not in the artwork. The most common problem is a missing viewBox attribute. The viewBox sets the logo's internal coordinate system, and without it the browser can't map the drawing onto a larger or smaller box. Changing the width or height then crops the canvas or adds empty space instead of resizing the artwork. The second most common problem is fixed width and height values that lock the logo to one size. Adding a correct viewBox and letting CSS control the size fixes most cases.

This article covers SVG logo files placed on web pages, through an img tag, inline markup or a CSS background. It doesn't cover scaling inside design applications, where the behavior depends on the tool.

First, confirm the logo is actually vector artwork

An .svg extension doesn't guarantee that the file contains vector paths. An SVG can wrap an embedded raster image, typically a PNG or JPEG stored inside an image element, often as a long base64 data string. A file like that will resize, but the logo inside it blurs or pixelates when enlarged because the SVG wrapper is only holding a bitmap. Some files mix the two, with vector text over a raster emblem.

To check, open the file in a text editor and look at what the root element contains. Path, circle, rect, polygon and text elements are vector content. An image element pointing to raster data is not. A sharp thumbnail or preview tells you nothing, because previews are often rendered rasters themselves. If the logo is raster inside, no attribute change will make it scale cleanly. It needs to be redrawn or replaced with a true vector master from the brand owner.

Common causes and what fixes each

Symptom | Likely cause | Fix

Logo stays the same size regardless of the CSS | Fixed width and height on the root svg, with CSS not overriding them | Set the size in CSS, or remove the fixed attributes and keep the viewBox

Resizing crops the logo or adds blank space | No viewBox attribute | Add a viewBox that matches the artwork's coordinate bounds

Logo appears at an unexpected default size in an img tag | No intrinsic dimensions and no viewBox, so the browser uses a default | Add a viewBox and give the img an explicit CSS width or height

Logo stretches or squashes | preserveAspectRatio set to none, or both width and height forced to a mismatched ratio | Remove preserveAspectRatio="none" and size one dimension with the other on auto

Lines stay thin or thick while the shapes resize | vector-effect: non-scaling-stroke on strokes | Remove that property, or outline the strokes into filled shapes

Logo looks blurry when enlarged | Embedded raster image inside the SVG | Obtain or create true vector artwork

Inline logo collapses or disappears in a flex or grid layout | Inline svg with no explicit size inside a shrinking container | Give the svg or its wrapper a width, and set flex-shrink to 0 where needed

Adding or correcting the viewBox

The viewBox takes four numbers: the minimum x, the minimum y, the width and the height of the area the artwork occupies. If a file has fixed width and height attributes but no viewBox, and the drawing starts at the origin, you can often reuse those dimensions directly.

<!-- Does not scale: fixed size, no coordinate system -->
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="80">
  ...
</svg>

<!-- Scales: viewBox defines the coordinate system, CSS sets the size -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 80">
  ...
</svg>

The values in this example only illustrate the pattern. Your file's numbers depend on its own artwork. If the artwork is offset from the origin or extends past the declared canvas, copying the width and height values will clip it or pad it unevenly. In that case, get the real bounding box from a vector editor, or re-export the logo with the artboard fitted to the artwork, before writing the viewBox.

Letting CSS control the size

Once the viewBox is in place, choose one dimension to control and let the other follow the logo's proportions. Width and height values on the root svg element act as defaults, and CSS rules override them. Some teams keep the attributes so the logo has a sensible fallback size and the page doesn't shift while loading, then override them in CSS. Others remove them entirely. Either approach works as long as the viewBox is present.

.site-logo {
  width: 100%;
  max-width: 12rem;
  height: auto;
}

For a logo placed as a CSS background, the background-size property controls scaling, and values such as contain keep the full mark visible at its original proportions. For inline SVG inside flexible layouts, give the element or its wrapper an explicit width, because an inline svg with no size can shrink to nothing when the container compresses.

Keeping the proportions intact

Proportional scaling depends on two settings. The preserveAspectRatio attribute defaults to keeping the artwork centered and fully visible without distortion. Setting it to none lets the logo stretch to fill whatever box it's given, which distorts the mark. Separately, a stroke marked with vector-effect: non-scaling-stroke keeps the same line weight at every size. That is useful for icons and diagrams but usually wrong for a logo, because the relationship between line weight and shape changes as the logo grows or shrinks. Converting strokes to filled outlines in the master file removes this risk and makes the logo render the same way across tools.

Before editing a logo you didn't create

Being able to download a logo file isn't the same as having permission to modify it. Adding a viewBox or changing sizing attributes is a technical change to the markup. Redrawing a raster logo as vectors, outlining its type or changing its proportions alters the artwork. That artwork may be protected as a trademark, and its fonts may carry their own license terms. When the file belongs to a client, partner or third-party brand, check their usage guidelines or ask for an official vector version before changing the artwork itself.

What this guide can't determine for you

The right fix depends on what's inside your specific file and how your page places it, and that can only be confirmed by inspecting the markup. This guide offers no measurements, test results or tool-specific export settings. If your file has a correct viewBox, no fixed sizing, no non-scaling strokes and no embedded raster image, but still won't resize, look at the surrounding CSS. Parent containers, conflicting width rules or inherited height constraints are the next places to check.