logoredraws.com

Change SVG Size: How Resizing a Vector Logo Actually Works

How to change SVG size using width, height, viewBox and CSS or a design tool, plus why embedded images, strokes and fonts can affect resized logo artwork.

Published

Contents
  1. What Controls the Size of an SVG
  2. Which Setting to Change for Common Goals
  3. Resizing in a Vector Editor
  4. When a Resized SVG Doesn't Stay Sharp
  5. Strokes, Text and Fine Detail at New Sizes
  6. Exporting Fixed-Size Raster Copies
  7. Resizing Someone Else's Logo: Permission Still Matters
  8. Limits of This Guide

To change an SVG's size, edit the width and height on the root svg element, control it with CSS, or rescale the artwork and artboard in a vector editor. The viewBox sets the drawing's internal coordinate system. Width, height and CSS set how large it appears. A true vector logo stays sharp at any size because its shapes are stored as mathematical paths, not pixels. That only holds if the file actually contains vector paths, which the .svg extension alone does not guarantee.

What Controls the Size of an SVG

An SVG logo file is a text document that describes shapes. Several parts of that document decide how big the logo appears:

  • width and height: attributes on the root svg element that set the default rendered size, such as 200 by 80.
  • viewBox: four numbers (min-x, min-y, width, height) that define the coordinate area the artwork is drawn in. The browser or app scales this area to fit the width and height.
  • preserveAspectRatio: sets how the viewBox fits when the width and height proportions don't match it. By default the artwork scales uniformly and is centered, so it is not stretched.
  • CSS or HTML sizing: on a web page, CSS width and height, or the width and height on an img tag, override the file's own dimensions.

Here is a typical logo file header. The artwork is drawn in a 400 by 160 coordinate space and displays at 200 by 80:

<svg xmlns="http://www.w3.org/2000/svg"
     width="200" height="80"
     viewBox="0 0 400 160">
  <!-- logo paths -->
</svg>

To make it display twice as large, change only width and height and keep the viewBox:

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

To make the logo fill whatever container it is placed in, remove width and height and keep the viewBox. Its size then comes from CSS or the surrounding layout, and the proportions stay locked to the viewBox.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 160">

/* in CSS */
.logo { width: 240px; height: auto; }

Changing the viewBox numbers alone does not resize the logo the way you might expect. It changes which part of the coordinate space is visible. That can crop the logo, shift it, or add empty space around it. Edit the viewBox only if you want to change the framing, such as trimming excess padding.

Which Setting to Change for Common Goals

Goal | What to change
Show the logo larger or smaller on a web page | CSS width or height, or the img tag's dimensions
Change the file's default display size | width and height on the root svg element
Make the logo scale with its container | Remove width and height, keep the viewBox
Remove extra space around the artwork | Adjust the viewBox, or fit the artboard to the artwork in an editor
Deliver a PNG at specific pixel dimensions | Export a raster copy from the SVG at that size

Resizing in a Vector Editor

In Adobe Illustrator, Inkscape, Figma or similar tools, resizing usually involves two separate things: the artwork and the canvas. The canvas is called the artboard, page or frame depending on the tool. Scaling the artwork without resizing the canvas leaves extra space or clips the logo. Resizing the canvas without scaling the artwork changes only the margins.

Most editors can fit the canvas to the artwork bounds. Inkscape offers this as resizing the page to the drawing or selection. Illustrator can fit an artboard to the artwork bounds. Lock proportions while scaling so the mark is not distorted. Menu names and locations vary between versions, so check the documentation for the version you use.

When a Resized SVG Doesn't Stay Sharp

Some files saved as SVG are not fully vector. An SVG can wrap a bitmap inside an image element, often as an embedded PNG or JPEG data string. Some files are mostly or entirely a raster preview. Enlarging these produces the same blurring or pixelation as enlarging a photo. Shrinking them can make edges look soft or muddy.

To check, open the file in a text editor. An image element or a long string beginning with data:image points to embedded raster content. Path, rect, circle, polygon and similar elements indicate vector shapes. In a vector editor, the outline or wireframe view shows editable paths as lines, while an embedded bitmap appears as a single rectangle. Many logo files mix vector shapes with an embedded image, so check the whole file.

Strokes, Text and Fine Detail at New Sizes

  • Strokes: by default, line thickness scales with the artwork, so a hairline in a large logo may disappear at favicon size. The vector-effect="non-scaling-stroke" attribute keeps the stroke width constant on screen. Editors also have settings for whether strokes and effects scale with objects. Check these settings before you resize.
  • Live text: if the wordmark is stored as text rather than outlined paths, its look depends on the font being installed or embedded. Otherwise a fallback font may appear. Converting text to outlines makes the shape stable but no longer editable as type.
  • Small sizes: fine details, thin gaps and small taglines may become illegible when reduced. Many brands supply simplified versions for small use. Resizing the main logo does not replace a dedicated small-size variant.

Exporting Fixed-Size Raster Copies

Some platforms, such as certain social media profiles, email signatures and older document tools, need PNG or JPEG files at exact pixel dimensions. Export these from the vector master at the required size rather than resizing an existing raster copy. Keep the SVG as the source file, since each raster export is fixed at the pixel size it was made at.

Resizing Someone Else's Logo: Permission Still Matters

Being able to download a logo file does not mean you may modify the artwork, use its fonts or use the trademark. Proportional resizing for an approved use is often covered by brand guidelines. Stretching, cropping, recoloring or redrawing the logo may not be, and the fonts in a wordmark may carry their own license terms. For a third-party logo, check the owner's brand guidelines or usage terms before editing or publishing a resized version.

Limits of This Guide

This guide covers general SVG behavior. It was not written for any particular logo, file or software version, and it includes no testing or measurements of specific tools. Exact menu paths, export settings and how a given app handles stroke scaling or embedded fonts should be checked in that tool's current documentation. Whether a particular logo file contains real vector paths can only be confirmed by inspecting the file itself.