SVG Properties

The SVG Properties dialog edits document-level SVG properties that are useful when preparing icons for output or reuse.

Open it with Ctrl+Alt+Enter, or choose the first command in the Icon menu:

Icon ‣ SVG Properties…

The dialog is organized into sections for the editor canvas, output size, rendering, and metadata.

SVG Properties in dark theme, with Responsive Icon checked and explicit size fields disabled

Responsive output can be set together with the icon’s other properties.

Editor Canvas

IconVectors uses the SVG viewBox as the editor canvas. For example, an SVG with viewBox="0 0 24 24" opens as a 24 x 24 editing canvas even if its output width and height are larger.

This keeps editing coordinates, handles, and path geometry consistent with the icon grid.

Output Size

The SVG root width and height are treated as output properties. They describe the intended rendered size of the SVG, not the editing canvas.

Use these fields when you want a 24 x 24 icon to be saved with another output size, such as 48 x 48 or 128 x 128. Uncheck Responsive Icon (for use with CSS) to enable the width and height fields. While responsive output is checked, these fields are disabled and their values are retained for switching back.

When you open an SVG, IconVectors preserves its explicit output dimensions, including units such as px or mm, even when their values match the viewBox. A file with width="256" height="256" viewBox="0 0 256 256" therefore keeps both output dimensions when saved. The viewBox defines editing coordinates and proportions; it does not replace an explicit output size.

Width and height can be set independently; a file may specify just one of them. Dimensions that were absent remain absent. Accepting SVG Properties without changing a size field preserves that dimension’s original value or absence, including units and percentages. Editing metadata alone keeps the current responsive setting.

Responsive Icon

Use Responsive Icon (for use with CSS) in the dialog’s Output Size section, or choose Icon ‣ Responsive Icon (for use with CSS) directly below SVG Properties in the Icon menu, to change the current document’s output sizing:

  • Checked: omit the SVG root width and height attributes. The viewBox stays intact so CSS can size the icon while retaining its proportions.

  • Unchecked: include explicit output dimensions. Switching back restores the last explicit values, including their units and any independently absent side. If the icon never had dimensions, IconVectors uses its canvas size.

When an icon opens, the checkmark is detected from its saved dimensions: both attributes absent means checked; either present means unchecked. Explicit percentage dimensions are preserved too. This describes whether those SVG attributes are omitted; CSS can also override dimensions on an unchecked icon. The New Icon dialog offers the same choice for the new document, initially using the responsive default from Preferences.

The menu command applies immediately. In the dialog, click OK to apply the responsive setting and any other changed properties together as one Undoable edit; Cancel leaves the icon unchanged. The menu checkmark and F3 Source Code update when the change is applied. Accepting unchanged properties does not add an Undo step or mark the icon modified.

Save the SVG to keep the change; normal and minified output retain the selected state. Toggling leaves the artwork, viewBox and selection unchanged. Previous explicit values are remembered while the document stays open; they are not hidden inside a saved responsive SVG.

The Responsive by Default preference affects newly created icons only. Changing it does not alter an already open icon or its menu checkmark.

Rendering

The preserveAspectRatio option controls how the SVG scales when the output rectangle and viewBox have different proportions. Use it to preserve the SVG’s aspect ratio or to choose another SVG-supported scaling behavior.

Metadata

The dialog can edit root SVG metadata such as:

  • root id

  • title

  • description

These values are saved in the SVG source and can help identify or describe the icon in downstream workflows.

Circles and Ellipses

Imported SVG circles use the ellipse editing controls, so you can resize their horizontal and vertical axes independently. When an imported circle still has equal radii, IconVectors saves it as <circle>. Stretching one axis makes its saved form an <ellipse>; restoring equal radii allows it to be saved as a circle again.

An imported <ellipse> is not automatically changed into a circle merely because its radii match. Commands that convert shapes to paths can still produce <path> output. This preserves useful SVG shape types without promising that every source construct remains unchanged after editing.

Notes

Changing SVG Properties is one Undoable document edit and should be saved with the file. Size changes and Responsive Icon toggles undo and redo in the order you made them. View-only changes such as zoom remain editor state and are not stored as SVG document content.