About Compare All Tools

SVG Normalize

Normalize SVG dimensions, transforms and document structure for consistent output.

SVG structure normalisation

Normalise SVG structure, viewBox and document metadata.

Paste SVG code, upload a file or try the built-in sample. The tool generates missing viewBox attributes, cleans unused editor namespaces, removes empty groups and strips XML metadata while preserving accessibility elements. Path coordinates and visual geometry are never rewritten. Everything runs locally — your file is not uploaded.

Local only Non-destructive Structure aware SVG output
Drop an SVG file here or paste SVG markup into the input editor below.
ViewBox—
Width/Height—
Metadata—
Groups removed—
Output size—
Status—
Preview

Original vs normalised SVG preview

Original SVG No SVG

Paste SVG markup or try the sample to preview the source.

Normalised SVG Waiting

Click Normalize SVG to preview the result.

Processed locally viewBox: — Width/height: — Metadata: — Editor NS: — Scripts: — Events: — External: —
Input

SVG markup

Paste a complete SVG document or inline SVG element. Click Normalize SVG to apply the selected structural normalisations.

Output

Normalised SVG

The normalised SVG markup appears here after clicking Normalize SVG. Copy or download using the buttons in the Settings panel.

How It Works

SVG Normalize cleans and standardises SVG document structure locally in your browser without uploading your file. Paste SVG markup, upload a file or try the built-in sample, then click Normalize SVG. The tool parses your SVG with the browser's DOMParser and runs a configurable pipeline of safe, non-destructive transformations: generating a missing viewBox from width and height, adjusting width and height to match the chosen mode, stripping editor-specific namespaces that are not used in the document, removing empty attribute-less groups, cleaning XML declarations, DOCTYPE declarations, generator comments and metadata elements while preserving title and desc for accessibility, and normalising root SVG attribute order for consistent output. An optional numeric precision pass rounds path coordinates and transform values to the configured decimal places using the same DOM-safe approach as SVG Precision Cleaner. Unlike SVG Optimizer, this tool focuses on structural consistency rather than aggressive file-size reduction. Path coordinates, gradient definitions, clip paths, masks and visual geometry are never rewritten unless the optional precision option is enabled. Everything runs locally — your SVG file is never sent to any server.

Use Cases

  • Normalising SVG icons exported from Figma or Illustrator that are missing a viewBox attribute, making them impossible to style reliably with CSS width and height, before adding them to a design system or icon library
  • Removing unused Inkscape, Sodipodi or Sketch namespace declarations from SVGs before committing them to a version-controlled asset library, where clean diffs matter and unnecessary namespace attributes add visual noise
  • Preparing SVG files for use as CSS mask-image or background-image sources where a consistent viewBox is required for the browser to scale and position the artwork correctly regardless of the element's dimensions
  • Cleaning up SVGs received from a design team that consistently include Adobe Illustrator generator comments, XML declarations, DOCTYPE declarations and metadata elements that inflate file size without contributing to the rendered output
  • Generating responsive SVGs by removing the fixed width and height attributes while preserving the viewBox, so the SVG scales to fill any container it is placed in without breaking aspect ratio

FAQ

How is SVG Normalize different from SVG Optimizer?

SVG Optimizer focuses on reducing file size, which involves removing whitespace, collapsing paths, merging shapes and applying aggressive transformations that can change the document structure significantly. SVG Normalize focuses on consistency and correctness: it generates missing viewBox attributes, cleans unused namespaces, removes XML metadata and normalises attribute order without rewriting geometry or transforming the document beyond structural cleanup. The output of SVG Normalize remains readable and is designed to be safe to edit by hand.

Will SVG Normalize change how my SVG looks?

No visual changes should occur from the default options. Generating a viewBox from existing width and height attributes does not change the canvas. Removing unused namespace declarations has no visual effect. Removing empty groups has no visual effect. Cleaning XML declarations, DOCTYPE, generator comments and metadata elements has no visual effect. If Normalize Numeric Precision is enabled, minor rounding of coordinates occurs, but at the default 2 decimal places this is visually imperceptible for most artwork.

What counts as an editor namespace?

Editor namespaces are XML namespace declarations added by vector editing tools to store tool-specific metadata. Common ones include xmlns:inkscape from Inkscape, xmlns:sodipodi from Sodipodi, xmlns:sketch from Sketch, xmlns:figma from Figma and xmlns:serif from Affinity Designer. SVG Normalize only removes a namespace declaration if the corresponding prefix is not used anywhere in the document as an element name or attribute prefix. If the prefix is used — for example if Inkscape exported inkscape:label attributes — the namespace declaration is kept and the signal strip reports it as detected but kept.

What is the fallback viewBox when width and height are not numeric?

If the SVG has percentage-based dimensions such as width='100%' height='100%', those values cannot be used to create a numeric viewBox because the actual pixel size depends on the container. In that case, SVG Normalize falls back to a 512x512 viewBox and reports this clearly in the normalization report. If you need a specific viewBox size, set it manually using SVG ViewBox Editor after normalization.

Will my title and desc elements be removed during metadata cleanup?

No. The title and desc elements are accessibility metadata that screen readers and assistive technologies use to describe the SVG content. SVG Normalize deliberately preserves these elements even when Clean XML Metadata is enabled. Only XML processing instructions, DOCTYPE declarations, generator comments, empty comments and metadata elements containing tool-generated information are removed.

Does SVG Normalize upload my file?

No. All processing runs entirely in your browser using DOMParser, DOM manipulation and XMLSerializer. Your SVG file is never sent to any server. SVGTrim normalizes SVG structure locally in your browser. Your SVG file is not uploaded, and the output remains editable SVG markup.