How to Keep SVG Proportions When Scaling a Logo

The short answer

An SVG logo keeps its proportions at any size when two conditions are met. First, the root svg element has a viewBox. Second, its preserveAspectRatio attribute is either left at the default or set to any value except none. The SVG specification defines the default as xMidYMid meet. That setting scales the artwork evenly until it fits inside the display area and centers it there. With that setting a logo can be made larger or smaller but never stretched.

The attribute only works with a viewBox. On the root svg element, preserveAspectRatio has no effect when the viewBox is missing, because the renderer then has no source rectangle to fit. A distorted or oddly cropped SVG logo is usually caused by a missing or incorrect viewBox, by preserveAspectRatio set to none, or by CSS that forces a size the artwork was not built for.

Terms you need

• viewBox: four numbers (min-x, min-y, width, height) that define the artwork's internal coordinate rectangle. In practice this is the logo's own canvas.
• Viewport: the box the SVG is actually displayed in on a page, in a layout or inside another document. Its size comes from width and height attributes, CSS or the surrounding container.
• Aspect ratio: width divided by height. A distortion-free logo keeps the same ratio as its viewBox.
• Alignment: the part of preserveAspectRatio that says where the artwork sits when the viewport has a different ratio, for example left, centered or right.
• meet: scale the artwork until all of it fits inside the viewport. Empty space may remain on one axis.
• slice: scale the artwork until it fills the whole viewport. The overflow on one axis is cropped.

How the preserveAspectRatio values behave

The attribute takes an alignment keyword, optionally followed by meet or slice. The alignment keyword combines a horizontal position (xMin, xMid or xMax) with a vertical position (YMin, YMid or YMax), which gives nine possible positions. The single value none switches proportional scaling off.

Value | What happens when the viewport ratio differs from the viewBox | Suitability for logo artwork

xMidYMid meet (default) | The whole logo fits, centered, with empty space on the longer axis | Safe default for most uses

xMinYMid meet | The whole logo fits and is aligned to the left edge | Useful when a logo should sit flush left, for example in a site header

xMaxYMid meet | The whole logo fits and is aligned to the right edge | Useful for right-aligned placements

xMidYMid slice | The logo fills the viewport and the overflow is cropped | Generally unsuitable, because it can cut off part of the mark or wordmark

none | Width and height scale independently to fill the viewport | Avoid for logos, because it distorts letterforms, circles and other geometry

The behaviors above are defined by the SVG specification. The suitability column contains design recommendations, not requirements. Brand guidelines nearly always forbid stretching a logo, and only meet values guarantee that the full artwork stays visible and undistorted.

Example markup

<!-- Illustrative values only; use your artwork's real bounds -->
<svg viewBox="0 0 240 80" preserveAspectRatio="xMidYMid meet" role="img" aria-label="Company logo">
  <!-- logo paths -->
</svg>

In this example the viewBox describes artwork with a 3:1 ratio. If the logo is placed in a square container, it scales to the container's width and is centered vertically, and the space above and below stays empty. Because xMidYMid meet is the default, writing it out is optional. Stating it explicitly still documents the intended behavior for anyone who edits the file later.

Step-by-step: preparing a logo SVG that scales correctly

• 1. Open the SVG in a text or code editor and confirm that the root svg element has a viewBox attribute.
• 2. Check that the viewBox matches the area you intend to deliver. Usually that is the artwork's bounds, plus the clear space if your brand guidelines include it in the file. Unplanned empty area inside the viewBox makes the logo look misaligned or smaller than expected.
• 3. Search the file for preserveAspectRatio="none". Remove it or replace it with a meet value. Also check nested svg and image elements, which can carry their own setting.
• 4. Decide how width and height should be handled. Fixed width and height attributes give the file a default display size. For responsive web use, many developers remove them, or set the size in CSS and let the viewBox supply the ratio. If you keep them, make sure their ratio matches the viewBox.
• 5. When sizing the logo with CSS, set one dimension and leave the other as auto so the ratio is calculated for you. If both dimensions must be fixed, rely on a meet value to fit the artwork inside the box instead of stretching it.
• 6. If you export from a design application, look for settings that control whether width and height are written and whether the artboard or the artwork bounds define the viewBox. Option names and defaults vary by application and version, so check them against your software's documentation.

Verifying the result

• Resize the container to an extreme wide shape and an extreme tall shape. Circles should stay round and letterforms should keep their proportions.
• Use browser developer tools to compare the svg element's box with the drawn artwork. Expect empty space on one axis, not stretching.
• Test every way the file will be used, such as an inline svg element, an img element and a CSS background. Each context sizes the viewport differently.
• If distortion remains after these checks, look for a CSS rule or transform that scales only one axis.
• Open the file in a vector editor to confirm that the logo is made of paths and live shapes. An embedded raster image will still blur when enlarged, whatever the scaling settings are.

Common mistakes with logo files

• Setting preserveAspectRatio to none so a logo fills a banner. This stretches the mark. Resize the container or use a layout designed for that space instead.
• Using slice for a logo. It can crop parts of the symbol or text without any warning.
• Keeping width and height attributes whose ratio differs from the viewBox. The result is unexpected letterboxing or, combined with none, distortion.
• Assuming the .svg extension guarantees clean vector artwork. An SVG can contain embedded bitmaps, and the extension says nothing about whether the file is editable or whether you have permission to reuse the logo.

Evidence note

This guide relies only on the documented behavior of viewBox and preserveAspectRatio and on general design practice. No tool-specific settings, version details or test measurements were provided for it. Confirm export options in your own software, and confirm logo usage rules in the brand guidelines that apply to the artwork.