SVG optimization: reduce file size without losing quality

SVG is a vector format that scales without losing quality. However, files exported from Figma, Illustrator, or other editors often contain redundant data. Optimization can reduce file size by 30–80% without visual changes. This article covers the main techniques and tools.

To encode SVG as base64 and a Data URI, use SVG Encoder on reChecker. To combine icons into a sprite, use CSS Sprite on reChecker.

What you can remove without losing quality

Metadata and comments

Editors add auxiliary information:

<!-- До оптимизации -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <!-- Generator: Adobe Illustrator 24.0 -->
  <metadata>...</metadata>
  <path d="..."/>
</svg>

Remove metadata, comments, title (if not needed for accessibility), desc (if unused).

Hidden layers and unused elements

Elements with display="none", opacity="0", visibility="hidden" are candidates for removal if they are not used in animation.

Coordinate precision

Coordinates with 5–6 decimal places are excessive for screen display. Rounding to 2–3 decimal places reduces file size:

<!-- До:  -->
<path d="M 10.123456789 20.987654321 L 30.111111 40.222222"/>

<!-- После: -->
<path d="M 10.12 20.99 L 30.11 40.22"/>

Default attributes

Many attributes have default values. You can omit fill="black" if you need black. stroke="none" is the default for elements without a stroke.

Structural optimization

Combining paths

Multiple path elements with the same fills can be combined into one:

<!-- До -->
<path fill="#333" d="M0 0 L10 0 L10 10 Z"/>
<path fill="#333" d="M20 0 L30 0 L30 10 Z"/>

<!-- После -->
<path fill="#333" d="M0 0 L10 0 L10 10 Z M20 0 L30 0 L30 10 Z"/>

The M command (moveto), with no fill between paths, lets you “jump” between contours.

Using symbols and use

Move repeated elements into <defs> and reference them with <use>:

<defs>
  <path id="icon" d="M0 0 L10 10 L0 10 Z"/>
</defs>
<use href="#icon" x="0" y="0"/>
<use href="#icon" x="20" y="0"/>

Simplifying path

Complex Bézier curves can be simplified by reducing the number of anchor points. Tools such as SVGO do this automatically with configurable precision.

Inline SVG vs. external file vs. sprite

For 1–3 icons on a page, inline SVG is acceptable. For dozens of icons, use a sprite. Generate sprites with CSS Sprite on reChecker.

Encoding as base64 and a Data URI

Embedding SVG in CSS through a Data URI eliminates a separate request:

.icon {
  background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0...') center/contain no-repeat;
}

Cons: increases CSS size by ~33% due to base64 encoding and is harder to debug. Pros: one HTTP request and the option to inline it in critical CSS.

SVG Encoder on reChecker converts SVG to base64 and Data URIs, with compression settings.

Optimization tools

SVGO (Node.js)

A popular optimizer. Installation and basic usage:

npm install -g svgo
svgo icon.svg -o icon.optimized.svg

Plugins enable or disable specific transformations. Config svgo.config.js:

module.exports = {
  plugins: [
    'removeDoctype',
    'removeComments',
    'removeMetadata',
    'removeEditorsNSData',
    'cleanupIds',
    'convertColors',
    { name: 'removeViewBox', active: false }, // сохранить viewBox
  ],
};

SVGOMG (online)

A web interface for SVGO with a visual before-and-after comparison. Convenient for one-off optimization without installing tools.

Manual minification

• Remove line breaks and extra spaces
• Replace style="..." with attributes (fill, stroke) where possible
• Use short names: fill instead of fill-rule in simple cases

Optimization checklist

Overall, a reduction of 30–80% is achievable, depending on the original file.

Security when using inline SVG

When embedding user-provided SVG in HTML, check its contents. SVG can contain <script>, onload, javascript: in attributes. Sanitize it or use CSP to block inline scripts.

Practical recommendations

1. Export from the editor — where possible, export an “optimized” SVG (Figma and Illustrator have these options)
2. Automation — add SVGO to your build process (Webpack, Vite, Gulp) to optimize automatically during the build
3. Check — after optimization, visually compare the result at different sizes and against different backgrounds
4. Sprites — for a large icon set, use CSS Sprite or a symbol sprite with <use>
5. Base64 — use it for critical icons that need to display before fonts load

Integrating SVG Encoder and CSS Sprite into your workflow speeds up SVG preparation for production.

viewBox and size attributes

Keep viewBox during optimization — it defines the coordinate system and lets the SVG scale without distortion. You can remove the width and height attributes if the size is set with CSS. For inline SVG, it is often enough to leave only viewBox:

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

Grouping and reuse

Move repeated elements (icons in a set) into a shared sprite. The symbol sprite format lets you include icons by ID:

<svg style="display:none">
  <symbol id="icon-close" viewBox="0 0 24 24">
    <path d="M18 6L6 18M6 6l12 12"/>
  </symbol>
</svg>
<svg class="icon"><use href="#icon-close"/></svg>

One request, reuse, and the ability to style with CSS. Generating these sprites is what CSS Sprite on reChecker is for.

Checking after optimization

After using SVGO or optimizing manually, be sure to check:

• Display on light and dark backgrounds
• Scaling (zooming in to 200–300%)
• Animations, if used
• Accessibility (role, aria-label for decorative SVGs)

Visual differences may appear with aggressive coordinate rounding settings. Increase the precision in the SVGO config if needed.