SVG Properties: Size and viewBox

SVG properties decide how an icon scales and renders, and the thing people get wrong is treating width/height and the viewBox as the same setting. This guide walks the IconVectors SVG Properties dialog and explains each property, with the size vs viewBox difference front and center.

The core distinction: viewBox vs width and height

The viewBox takes four numbers, min-x min-y width height, and it does two jobs at once: it sets the coordinate system the art is drawn in, and it sets the aspect ratio. In the Editor Canvas section, that same viewBox is the canvas you draw on. A viewBox="0 0 24 24" opens a 24-by-24 editing canvas even when the output width and height are larger, which is what keeps every point, handle, and path on the icon grid instead of drifting to arbitrary coordinates.

The viewBox is also what makes an SVG resolution-independent. The renderer maps the viewBox onto whatever box the SVG is displayed in, so a single 24-unit drawing stays sharp at 16px in a toolbar and at 256px on a settings page, with no second asset and no blur.

The root width and height are a different thing entirely: they are the Output Size, the default rendered size of the file, not its coordinate system. Set them when you want to save a 24-by-24 icon at another size, such as 48-by-48 or 128-by-128, without redrawing anything. When the output width and height equal the canvas size, IconVectors can leave them out, because the viewBox already defines the size. For web icons, omitting them and sizing the icon from CSS is common modern practice, since it lets one file render at whatever size the layout asks for.

Here's why the difference matters in practice. A viewBox lets an icon scale cleanly from CSS, because there's an internal coordinate system to map onto the display box. Width and height without a viewBox describe a fixed-size image with no coordinate mapping, so it doesn't scale the same way, and you lose the clean grid that keeps geometry crisp. When the output rectangle's proportions differ from the viewBox, a third property, preserveAspectRatio, decides how the art is fitted into that rectangle (covered in the next section).

<svg viewBox="0 0 24 24">
  <!-- icon paths -->
</svg>

With only a viewBox, the SVG has a coordinate system and an aspect ratio but no fixed pixel size, so it takes whatever size the surrounding CSS or layout gives it.

<svg width="24" height="24" viewBox="0 0 24 24">
  <!-- icon paths -->
</svg>

Adding width and height sets a default rendered size of 24 by 24, but the viewBox is still present, so the icon stays fully scalable the moment you override the size in CSS.

<svg width="48" height="48" viewBox="0 0 24 24">
  <!-- icon paths -->
</svg>

The art is still drawn on the 24-unit grid, but it renders at 48 by 48 by default: the same icon saved at a larger output size with no change to its geometry.

<svg width="24" height="24">
  <!-- icon paths -->
</svg>

Without a viewBox there's no internal coordinate mapping, so this is a fixed 24-by-24 box: scale it up in CSS and the contents don't scale with it the way a viewBox icon would. Avoid this shape for icons.

The SVG Properties dialog

Open it from Icon -> SVG Properties.... It edits the document-level SVG properties that IconVectors writes into the file, the settings that decide how the icon behaves when it's saved, exported, and reused elsewhere. The dialog groups those settings into four sections: Editor Canvas, Output Size, Rendering, and Metadata.

Each section maps to a real attribute in the saved file: Editor Canvas to the viewBox, Output Size to the root width and height, Rendering to preserveAspectRatio, and Metadata to the root id, title, and description. These are document data, so a change here only sticks once you save the file. View-only state like the current zoom level lives in the editor and is never written into the SVG.

Rendering: preserveAspectRatio

The viewBox and the output rectangle usually share the same proportions, so the art fills the box exactly. When they don't (a square viewBox in a wide box, for example), preserveAspectRatio decides how the art is fitted. It has two parts: an alignment token and a meet-or-slice token.

• xMidYMid meet is the default. The art scales to fit entirely inside the box and is centered, leaving empty bands on the longer axis (a letterbox).
• slice scales the art to fill the box completely, then clips whatever overflows. Nothing is left empty, but edges of the art can be cropped.
• none stretches the art to fill the box on both axes independently, which distorts it when the proportions don't match.
• The alignment token (xMin, xMid, or xMax paired with yMin, yMid, or yMax) sets where the art sits inside the box, for instance pinned to the top-left or centered.

Metadata: id, title, description

The Metadata section writes three values into the SVG source so the file carries its own identity downstream:

• id on the root element is a reference handle. It's what a sprite <use href="#..."> points at, and what scripts and styles target when they need to reach a specific icon.
• title is a short, human-readable name. Assistive technology can announce it, and it helps you and your tools identify the icon without opening it.
• description is a longer note for anything that needs more context than the title gives, again exposed to assistive technology.

Because these are stored in the file, they travel with the icon into a sprite, a component library, or a teammate's editor. For the markup patterns that turn title and description into accessible names, see Accessible SVG Icons (ARIA roles and labels).

Setting them in IconVectors

1. Open Icon -> SVG Properties....
2. Set or confirm the viewBox in Editor Canvas, which is the grid you draw on.
3. Set the Output Size width and height if you want a different default rendered size; leave them matching the canvas to let the viewBox define the size.
4. Choose preserveAspectRatio in Rendering if the output box won't share the viewBox proportions.
5. Fill in id, title, and description in Metadata.
6. Save the file. These are document data; zoom and other view-only state are not stored in the SVG.

Summary

The viewBox is the coordinate system and the aspect ratio; the root width and height are just the default output size. Set both deliberately and your icons scale predictably in CSS, in sprites, and at any resolution. When the box and the viewBox disagree on proportions, preserveAspectRatio is the property that decides the result. Download IconVectors and open Icon -> SVG Properties... on any file to set these the way your project needs.