Stretch an SVG: How Non-Uniform Scaling Works and When to Avoid It

The short answer

An SVG that has a viewBox keeps its proportions by default. When you give it a width and height that don't match its shape, it scales evenly until it fits and leaves empty space on the leftover sides. To make it stretch and fill a box of a different shape, set preserveAspectRatio="none" on the root svg element. You can also bake the distortion into the paths themselves with a non-uniform scale in a vector editor.

For favicons, stretching is rarely the right fix. Browser tabs, bookmarks and home-screen icons show favicons in square slots. Forcing a wide or tall logo into a square distorts letterforms and shapes. The usual solution is to keep the artwork's proportions and change the canvas instead, as described below.

Why an SVG doesn't stretch on its own

Two attributes on the root element control how an SVG scales. The viewBox defines the artwork's internal coordinate system: its origin, width and height. The width and height attributes, or the CSS size, define the space the SVG occupies on the page. When the two shapes differ, preserveAspectRatio decides how the artwork is fitted. Its default value, xMidYMid meet, scales uniformly and centers the content.

If the file has no viewBox, preserveAspectRatio has no effect. In that case, changing width and height usually resizes the canvas without scaling the artwork, so the drawing gets clipped or surrounded by blank space. Adding a viewBox that matches the artwork's original dimensions is the first step before any scaling behaves predictably.

Stretching with preserveAspectRatio

The snippet below shows the opening tag of an inline SVG. The namespace declaration a standalone file needs is omitted here. The artwork is drawn in a 100 by 50 coordinate space but displayed in a 300 by 300 box. With preserveAspectRatio set to none, it fills the box: horizontal distances are multiplied by 3 and vertical distances by 6.

<svg viewBox="0 0 100 50"
     width="300" height="300"
     preserveAspectRatio="none">
  <!-- artwork -->
</svg>

The attribute must sit in the SVG itself to take effect. This matters when the file is loaded as an image rather than placed inline in the page. In that case the file's own setting governs how the artwork fits the image box, and page CSS cannot reach inside the file to override it.

What distorts when an SVG is stretched

• Text and letterforms become visibly condensed or extended, which is usually the most noticeable damage to a logo.
• Circles turn into ellipses, and right angles can look skewed once other proportions change around them.
• Stroke widths scale with the axis they run along, so horizontal and vertical strokes end up different thicknesses. Adding vector-effect="non-scaling-stroke" to stroked elements keeps line weight constant on screen, though it also stops strokes from scaling with the icon size.
• Raster images embedded inside the SVG stretch as pixels and can blur or pixelate. The vector paths around them stay sharp.

Check that the file is really vector artwork

A .svg extension does not guarantee editable vector paths. Some SVG files are wrappers around an embedded PNG or JPEG, and some downloaded logos are flattened previews saved in SVG format. Open the file in a code editor or vector application and look for path, circle, rect or polygon elements. An image element carrying encoded data is a sign that the content is raster. Stretching such a file degrades it the same way stretching a bitmap would.

Favicons: pad the canvas instead of stretching the art

To fit a non-square logo into a square favicon without distortion, enlarge the viewBox on its shorter side and center the artwork. Take a mark drawn in a 200 by 80 space as an example. A square viewBox of 200 by 200 needs 120 extra units of height, split as 60 above and 60 below.

<!-- original -->
<svg viewBox="0 0 200 80"> ... </svg>

<!-- squared for a favicon, artwork unchanged -->
<svg viewBox="0 -60 200 200"> ... </svg>

Padding alone often isn't enough for wide wordmarks. At the small sizes favicons are shown, a long logo shrinks until it can't be read. Many brands use a simplified symbol, monogram or single letter for the favicon instead. Whether a suitable alternate mark exists depends on the brand. The supplied material includes no brand-specific guidance.

Choosing an approach

Approach | What happens to the artwork | Fit for favicon use

preserveAspectRatio="none" | Fills the target box and distorts proportions | Generally poor for logos; acceptable for abstract shapes or backgrounds

Non-uniform scale in a vector editor | Distortion is written permanently into the path data | Poor for logos; also changes the master artwork if saved over it

Default meet behavior | Scales evenly and leaves empty space | Works, but the default centering may not suit the design

Square viewBox with padding | Proportions preserved; you control spacing | Usually the best option for an existing mark

Simplified alternate mark | A different, compact design | Often best for wide wordmarks, if the brand allows it

Permission to modify is a separate question

Being able to download a logo does not mean you may alter it. Many brand guidelines explicitly forbid stretching, condensing or re-proportioning a mark. The artwork, any fonts in it and the trademark itself can each carry their own terms. If the logo isn't yours, check its usage guidelines or ask the owner before distorting it, even for something as small as a favicon.

Gaps in this overview

This explanation rests on general SVG behavior. It does not draw on testing of particular browsers, editors or favicon generators. Exact rendering of favicons at specific pixel sizes, and differences between applications, were not covered by the available evidence and should be checked against the tools you actually use.