What is SVG Optimizer?

Optimize SVG markup locally with SVGO, compare bytes and preview output while preserving responsive scaling and accessible titles by default.

What can SVG Optimizer do?

SVG Optimizer supports Optimize and Format. Each mode is available directly in the page workspace.

Does SVG Optimizer upload my data?

SVG Optimizer processes your input locally in the browser. DevSexy does not add an upload, account, or server-processing step to this workflow.

SVG Optimizer Online — SVGO Preview, Size & Safety Review

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.

SVG Optimizer