Is the sanitize option a complete security sanitizer?

No. It removes specific script, event-attribute, and javascript-link patterns. It is not a complete policy for arbitrary untrusted SVG or every embedding context.

Why preserve the viewBox when removing dimensions?

The viewBox defines the coordinate system. Removing width and height transfers sizing responsibility to the layout; removing the coordinate system can break responsive rendering.

Can optimization change appearance or references?

Yes. Review IDs, masks, filters, external references, and embedded styles in the real use site. Successful optimization is not a visual-equivalence guarantee.

Web engineering

SVG Optimizer

Reduce SVG markup with transparent optimization decisions.

Online tools Pricing

Input0 characters

Result

PreviewLocal image decode

Before

No preview

After

No preview

Prefer a native workflow?

Keep SVG Optimizer one shortcut away.

DevSexy for Mac puts the same private workflow in a focused desktop app, with global shortcuts and no browser tab to manage.

Global shortcutOffline-readyLocal processing

Try the Mac app free

This browser tool remains free.

Optimization is a review loop

Fewer bytes. Same asset? Prove it.

A smaller SVG is only a candidate result. Scaling, paint-server references, accessible names, and visual output still need deliberate checks before the file ships.

Original4.8 KB

<svg viewBox="0 0 64 64" width="64" height="64">
  <!-- Figma export -->
  <title>Signal mark</title>
  <path fill="#BFD456" d="M8 32 …" />
</svg>

Optimized2.1 KB

<svg viewBox="0 0 64 64">
  <title>Signal mark</title>
  <path fill="#bfd456" d="M8 32…"/>
</svg>

−56% RAW BYTES

What left the file

Read optimization as plugin effects.

SVGO applies an ordered transformation pipeline. These are categories to inspect, not a claim that every input contains every category.

Metadata

PLUGIN 01

Editors, generators, and comments

Usually safe after provenance review

Markup

PLUGIN 02

Empty groups and redundant attributes

Check CSS and animation hooks

Values

PLUGIN 03

Colors, numbers, and path precision

Compare thin strokes and tiny icons

References

PLUGIN 04

IDs and reused paint servers

Treat as a graph, never isolated strings

Sizing contract

viewBox owns the coordinate system.

Removing width and height can make an icon CSS-responsive. Removing viewBox can make it stop scaling. That is why dimensions are opt-in while viewBox remains protected by the default pipeline.

viewBoxPreserve

Coordinate system and responsive scaling

width / heightOptional remove

Intrinsic dimensions; CSS can replace them

aspect ratioReview

meet, slice, and alignment change framing

<title>Preserve

May provide an accessible name in its usage context

Reference risk map

An ID can have more than one consumer.

#brandGradient<linearGradient>fill="url(#brandGradient)"CSS #brandGradient<animate href="#mark">

defs and paint servers
masks, clips, and filters
CSS selectors and scripts
animation and external fragments

The ship loop

Compression ends with human-visible evidence.

Optimize

Run the selected SVGO pipeline locally.

Compare sizes

Measure raw bytes; gzip belongs in the delivery pipeline.

Render at 16 / 64 / 256 px

Look for clipping, precision loss, and changed framing.

Inspect names and references

Check title, IDs, gradients, masks, and CSS hooks.

Ship and regress

Use visual tests where asset identity matters.

Run a reproducible example

Inspect conservative SVG changes and the separate decision to remove explicit dimensions.

Using an example replaces the current input, reference input, operation, and options. Public demonstration data only.

Remove a comment while keeping the viewBox

Conservative mode, sanitation enabled, dimensions retained.

Input

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><!-- public note --><path d="M0 0h24v24H0z"/></svg>

The path and viewBox remain. Compare the resulting source and rendered icon in its real context.

viewBox="0 0 24 24"
<path

Remove width and height

Enable remove dimensions on a source that already supplies a viewBox.

Input

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z"/></svg>

The viewBox remains; CSS or the containing layout must now supply the intended rendered size.

viewBox="0 0 24 24"

Continue with a related task

Android Vector Asset Bridge

Convert compatible SVG paths to Android VectorDrawable and back.

HTML/SVG to JSX/TSX

Convert markup attributes and component structure for React codebases.

Color Space Converter

Convert modern CSS colors and check readable contrast across spaces.

Repeat the task in DevSexy for Mac

Use the native app for repeated offline work and direct Option shortcuts.

Direct answer

What is SVG Optimizer?

Optimize SVG online with SVGO, compare byte size and rendered output, and preserve responsive scaling and accessible titles by default.

What can it do?

Optimize
Format

How to use SVG Optimizer

01
Prepare the input
Keep an original SVG and choose the conservative or maximum optimization policy.
02
Choose the operation
Decide separately whether to sanitize and remove dimensions.
03
Review the evidence
Compare IDs, references, accessibility text, and rendered output before shipping the optimized asset.

Frequently asked questions

Is the sanitize option a complete security sanitizer?: No. It removes specific script, event-attribute, and javascript-link patterns. It is not a complete policy for arbitrary untrusted SVG or every embedding context.
Why preserve the viewBox when removing dimensions?: The viewBox defines the coordinate system. Removing width and height transfers sizing responsibility to the layout; removing the coordinate system can break responsive rendering.
Can optimization change appearance or references?: Yes. Review IDs, masks, filters, external references, and embedded styles in the real use site. Successful optimization is not a visual-equivalence guarantee.