How to reduce SVG file size: Find the cause, then fix it

To reduce SVG file size, find out what makes the file heavy before you run it through an optimizer. SVG files get large for five main reasons:

• A pixel image stored inside the code
• A font file stored inside the code
• Paths with thousands of anchor points
• Text converted to outlines
• Coordinates written with long decimals
• Extra data the design app saves for its own use

Code cleanup can strip the editor data and round the decimals in seconds. It can't remove an embedded photo or redraw a traced outline, so those fixes happen in your design app, before export. Server compression then shrinks what's left on its way to the browser.

File size here means kilobytes on disk, which is separate from how large the graphic appears on screen.

Key Takeaways

• An SVG file gets large when it stores pixel data or too many numbers: embedded images and fonts, dense paths, outlined text, long decimals and editor data.
• A Base64-encoded image is roughly a third larger than its source (MDN), so one embedded photo can outweigh every vector shape in the SVG.
• Embedded photos and traced, node-heavy paths get fixed in the design app before export, because code cleanup can't shrink either one.
• Stripping comments, metadata and whitespace never changes the drawing, while rounding coordinates, merging paths and deleting IDs or the viewBox trade accuracy or function for fewer bytes.
• Animated SVGs need their IDs, styles and scripts intact, and the SVGator SVG optimizer removes editor data without touching any of them.
• Gzip or Brotli server compression shrinks some files by up to 70% in transit (MDN), but cutting-machine upload caps measure the file itself.

Why is my SVG file so large?

An SVG file is large when it stores pixel data or too many numbers. Every anchor point, decimal place and embedded image is written into the file as text, so the file grows with the detail the code describes, whatever size the graphic displays at.

Here's what adds the weight:

• Embedded raster images. A PNG or JPEG placed in the artwork can end up inside the SVG as a base64 string, which is binary image data written out as plain text. A Base64 version of a file is roughly a third larger than its source, according to MDN's Base64 reference, so one embedded photo can outweigh all the vector shapes around it.
• Embedded fonts. Live text set in a custom font can carry the whole font file inside the SVG, written out as base64 like an embedded image. In an SVGator banner export we measured, the embedded font made up about half of the 55.7 KB file.
• Too many path nodes. Path nodes, or anchor points, are the points that define a path, and each one adds a set of coordinates to the code. Image Trace output and brush strokes carry far more points than a redrawn shape needs.
• Outlined text. Converting text to outlines replaces a short string of characters with a separate path for every letter.
• Long decimals. Coordinate precision is how many decimal places each point in the file keeps. Raw exports can carry more decimal places than a screen can show, repeated across every point.
• Editor data and leftovers. Design apps write extra tags and attributes for their own use, plus comments, hidden layers, empty groups and unused gradients. None of it changes what the browser draws.

Embedded images and dense paths are behind the multi-megabyte files. Editor data and decimals add weight to every export, but cleaning them up won't turn a 3 MB file into a 30 KB one on its own.

How to check what is making your SVG big

Four quick checks tell you which cause you're dealing with, and the whole round takes about two minutes. Save a copy of the original first, because some of the fixes later in this guide change the drawing.

1. Note the starting size. Check the file size in your file browser so you can measure every change against it. For an SVG already on a website, the Network tab in your browser's developer tools lists the size of each file the page loads.
2. Search the code for images. Open the SVG in a text editor and search for <image and base64. A match followed by a long block of random-looking characters means a raster image lives inside the file.
3. Read the numbers. Look at the d attribute of a few paths. Numbers with long tails of decimals point to a precision problem, and a single path that runs for screens of code points to a node problem.
4. Count the anchor points. In Illustrator, the Simplify dialog shows the original and new number of anchor points for the selected path. In any design app, selecting a shape with the direct selection or node tool shows how dense its points are.

If step 2 finds an image, start there, since code cleanup leaves embedded images untouched.

How to fix each cause in your design app

Structural problems get fixed in the source file, before export, because cleanup tools only edit the code they receive. Work on the original Illustrator, Inkscape or Figma file, re-export after each change, and compare the new size with the one you noted.

Remove or replace embedded images

Pick the fix based on whether the design needs the photo:

• The design works without it: delete the raster image, or redraw that part with vector shapes.
• The photo has to stay: upload it to a CDN and use its URL as the image link inside SVGator. The SVG then stores a short link in place of the base64 data, and the browser loads the photo as a separate file. SVGator's import guide also recommends linking images externally, which keeps large files under its 7 MB import limit.

A linked image loads when the SVG is inline or placed with <object> or <iframe>. Browsers don't load external files in an SVG placed with an <img> tag, according to MDN's guide to SVG as an image.

Choose How Fonts Get Exported

SVGator's export settings have three font options, according to SVGator's custom fonts guide:

• Embed adds the font file to the SVG, so the text displays correctly offline. This is the option that puts the whole font inside the file.
• External loads the font from Google's CDN, so the SVG needs an internet connection to show the right font.
• Do not include leaves the font out, for pages that already load it. Anywhere else, the text falls back to a default font.

Use External or Do not include for websites, and keep Embed for files that have to work offline. External fonts have the same <img> limit as linked images.

Simplify paths with too many anchor points

Path simplification removes anchor points while keeping the outline close to the original shape.

In Illustrator:

1. Select the shape.
2. Choose Object > Path > Simplify.
3. Drag the slider toward fewer points while you watch the preview. The full Simplify dialog shows the original and new point counts, so you see the reduction before you apply it.

In Inkscape:

1. Select the path.
2. Choose Path > Simplify.
3. Compare the result before running it again. Each run removes more nodes and moves the outline further from the original.

Image-traced artwork gains the most from this step, since traced outlines carry a large number of anchor points the shape doesn't need. Check the result at the largest size the graphic will display.

Decide between live text and outlines

• Live text stores the characters and a font name, which takes far less code. It stays selectable and readable by screen readers. The browser renders it, though, so it can look different from your design if the font isn't available.
• Outlined text draws every letter as a path. It looks identical everywhere but adds path data for each character.

Figma outlines text in SVG exports by default. Turn off Outline text to keep the text as <text> elements.

Keep outlines for logos and display lettering where the exact shape matters, and use live text for longer copy.

Reuse repeated shapes with use and symbol

When the same icon, shape or pattern tile appears several times, define it once and reference the copies:

• The <symbol> element stores the shape a single time.
• Each <use> element places a copy with its own position.
• Ten copies then cost one full path and ten short references.

Inkscape saves clones as <use> elements, so cloning repeated objects applies this technique without touching the code.

Use lean export settings

Each design app has export settings that control how much extra code goes into the file.

• Illustrator: export with File > Export > SVG and select Minify in the SVG Options. Minify writes the code with minimal IDs, indents, lines and white space. Adobe's guide to exporting SVG from Illustrator advises against reopening an exported SVG in Illustrator for edits, so keep the .ai file as your editable source and re-export from it.
• Figma: leave Include "id" attribute off unless your CSS or scripts target elements by layer name. That setting adds layer names as IDs and makes the file larger, while masks and gradients keep the IDs they need either way. Keep Simplify stroke on, since it exports inside and outside strokes as a close approximation instead of a heavier masking technique.
• Inkscape: save a copy as Optimized SVG. The default Inkscape SVG format keeps editor data for re-editing, and Optimized SVG removes it and opens a dialog with cleanup options. Keep the Inkscape SVG version as your editable source.

How to run an SVG optimizer without breaking your file

An SVG optimizer rewrites the code to remove what the browser doesn't need. Some of its steps never change the drawing, and others trade accuracy or function for fewer bytes. Run the safe steps on every file, and turn on each trade-off only after you've checked its effect in a preview.

Coordinate rounding is the trade-off worth testing first, because it shrinks every path in the file at once. Three decimals is the common default, and one compressor's settings guide says icons can go down to two. To test it:

1. Lower the value one step at a time.
2. Compare the preview at the largest size the graphic will display.
3. Go back one step when curves start to wobble or thin gaps open between shapes.
4. Keep the original open next to the result until the new file is live on your site.

IDs cause the most damage when a cleanup step removes them carelessly. An ID is the name a gradient, mask, clip path, <use> reference, stylesheet or script uses to find an element.

• Deleting every ID as a general cleanup step breaks those links.
• A careful cleanup removes only the IDs nothing refers to and shortens the rest.
• Inlining several cleaned-up SVGs on one page adds a second risk, because shortened IDs from different files can clash.

Older advice warns that optimizers delete the viewBox, the attribute that sets the drawing's coordinate area so it can scale to any size. Here's how current defaults compare:

• The current major version of the leading open-source SVG optimizer keeps viewBox and title by default, to preserve scaling and accessibility.
• If a web tool still has a Remove viewBox switch, leave it off.
• Its default settings still remove desc elements, so turn that step off for charts and diagrams that need a longer text description.

The SVGator SVG optimizer:

• Removes comments, metadata and editor data
• Keeps the IDs, styles and scripts that CSS and JavaScript animations use
• Takes SVG files up to 5 MB and needs no account
• Can't shrink embedded PNG or JPEG images or paths with thousands of nodes, which is why the design-app fixes come first

If you publish SVGs often, make that cleanup part of your routine: run each new file through the optimizer before it goes live, and keep the original as your editable source.

Minification vs server compression

• Minification removes characters from the SVG file itself, such as whitespace, line breaks and comments.
• Server compression shrinks the file in transit. The web server applies gzip or Brotli each time it sends the file, the browser unpacks it, and the file on disk keeps its size.

The two work together:

• A minified SVG is still plain text, and HTTP compression can cut the size of some documents by up to 70%, according to MDN's guide to HTTP compression.
• The Network tab in your browser's developer tools shows the transferred size next to the full size for each file, so you can confirm compression is on.
• Compression is a server setting, so if your SVGs arrive uncompressed, the fix sits with whoever manages the hosting.

SVGZ is an SVG file saved in gzip-compressed form. It's smaller on disk, but the server has to send it with the right headers for browsers to display it, which makes server compression of a regular SVG the simpler route for websites.

File size is one part of how SVGs affect load time. SVGator's page speed guide covers lazy loading, deferred scripts and animation players.

When to use PNG, JPEG, or WebP instead of SVG

Use a raster format when the artwork is photographic or painterly. SVG describes shapes with coordinates, so these need thousands of paths to approximate what a JPEG or WebP file stores as pixels:

• Watercolor textures
• Photos
• Heavily shaded illustrations

A traced photo shows the problem well: the trace produces a heavy file that still looks less accurate than the source image.

Keep SVG for flat icons, logos, charts and illustrations with solid colors. They stay small as SVG and scale to any size without blurring. For a side-by-side look at file size, transparency and scaling, see the SVG vs PNG comparison.

How to reduce the size of an animated SVG

An animated SVG needs its IDs, styles and scripts, because those parts drive the motion. Reduce its size with cleanup that keeps them intact, and treat rounding, path merging and ID removal as off-limits until you've previewed the animation.

These cleanup steps can stop an animation from playing:

• Merged paths join shapes that move on separate timelines.
• Renamed or deleted IDs disconnect the CSS or JavaScript that targets each element.
• Some compressors remove script elements by default as a security measure, which strips the motion from a JavaScript-animated file.

SVGator's page speed guide reports that a general-purpose optimizer cut SVGator's SVG exports by about 30%, and that the majority of that tool's options break animations.

SVGator exports are already minified, so the larger savings come from export choices:

• CSS export produces smaller files than JavaScript export.
• The external player option loads the animation player from a CDN, so each file no longer carries its own copy.
• For files that still need cleanup, a tool that keeps IDs, styles and scripts, such as the SVGator optimizer covered above, removes editor data without touching the animation.

How to get an SVG under an app's upload limit

Cutting machines, laser cutters and platforms with upload caps measure the SVG file itself, so server compression doesn't help and the size has to come down at the source. Check the app's help pages for its current limit, then work through these fixes in order, since the first ones save the most:

1. Remove embedded images. For cut files, a placed photo or preview image adds size without adding a single cut line.
2. Simplify traced outlines. Use Object > Path > Simplify in Illustrator or Path > Simplify in Inkscape, and compare the result with the original before you save.
3. Delete what the machine doesn't use. Remove hidden layers, guides, unused shapes and duplicate outlines stacked on top of each other, then save a copy as Optimized SVG or with Minify turned on. Inkscape's Plain SVG format is a lighter option that removes Inkscape's own elements and leaves the drawing as it is.
4. Lower the coordinate precision last. Round the decimals with a cleanup tool, then check that thin lines and small details still cut cleanly.

A tight cap such as 15 KB leaves room for simple shapes only. A detailed traced design may need a redraw with fewer shapes to fit under it.

Final thoughts

A smaller SVG starts with finding the cause. Embedded images and traced paths come out in your design app, editor data and long decimals come out in a cleanup tool, and server compression handles the rest on the way to the browser. Keep the original file until the lighter version is live and checked at full size.

When your file is ready for cleanup, run it through the SVGator SVG optimizer. It strips comments, metadata and editor data, keeps the IDs, styles and scripts that animations rely on, and works without an account. If you plan to animate the graphic next, SVGator exports animated SVGs that are already minified. CSS export keeps those files smaller still, and the external player loads from a CDN, so each file skips its own copy of the player.