SVG Optimizer - Compress and Minify SVG Online

🔗 Related Tools

What is an SVG Optimizer?

SVG stands for Scalable Vector Graphics. It is an image format written as text code, so it stays sharp at any size and is popular for logos, icons and illustrations on websites. When you export an SVG from a design tool, the file often contains much more than the browser needs: comments, editor information, extra spaces, long decimal numbers and settings that only repeat the defaults.

An SVG optimizer removes this extra data and writes the rest in a shorter form, without changing how the image looks. A smaller file loads faster, uses less bandwidth and is easier to put into your code.

How to Optimize an SVG

1. Upload an SVG file, or paste your SVG code into the box.
2. Open the Settings and choose what to remove: metadata, comments, or color shortening.
3. Click Optimize SVG. A loading spinner shows while larger files are processed.
4. Check the preview at the top. It should look like your original.
5. Look at the original size, the optimized size and the percentage saved.
6. Click Copy Code to copy the optimized SVG, or Download SVG to save it as a file.

What You See on the Page

Item	Meaning
Upload or paste area	Where you add your SVG file or SVG code
Settings / Options	Toggles that decide what the tool removes or shortens
Optimize SVG button	Starts the optimization
Loading spinner	Shows that a larger file is still being processed
Visual preview	Shows how the optimized SVG looks
Original size vs optimized size	The file size before and after, with the percentage saved
Code box	The optimized SVG code
Copy Code and Download SVG	Copy the code, or save it as an .svg file

What Gets Removed or Shortened

Part of the file	What the optimizer does
Comments	Removes text such as <!-- Generator: ... -->
Metadata and editor data	Removes metadata blocks and information that design tools add for themselves
Extra spaces and line breaks	Removes whitespace that does not change the drawing
Path data	Writes the path in a shorter form, for example by rounding numbers and using shorter commands
Colors	Writes colors in the shortest form, for example #FF0000 as red
Default or useless attributes	Removes attributes that only repeat what the browser already does
XML declaration	Usually removed, because it is not needed when SVG is used on a web page

Exactly what changes depends on the options you choose and on the file.

Optimization Options

Option	What it does	Turn it off when
Remove Metadata	Deletes metadata and editor-specific data	You need to keep author, license or other information inside the file
Remove Comments	Deletes the comments in the code	You want to keep notes or a license comment in the file
Minify Colors	Writes colors in the shortest form	You want colors to stay exactly as they were written

SVG Optimization Example

Before:

<?xml version="1.0" encoding="UTF-8"?>
<!-- Generator: Some Editor -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
  <metadata>Created with an editor</metadata>
  <path d="M 12.000 2.000 L 22.000 22.000 L 2.000 22.000 Z" fill="#FF0000" stroke="none"/>
</svg>

After:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2l10 20H2z" fill="red"/></svg>

The XML line, the comment, the metadata and the extra spaces are gone, the path is shorter, the color is shorter and the default stroke setting is removed. The triangle looks the same. The exact output can differ a little between tools and settings.

How the Size Saving is Calculated

Saved (%) = (original size - optimized size) / original size x 100

Original	Optimized	Saved	Percentage saved
12.4 KB	4.9 KB	7.5 KB	about 60.5%
8,000 bytes	6,000 bytes	2,000 bytes	25%
2,500 bytes	2,000 bytes	500 bytes	20%

These numbers are examples. The tool shows the real sizes for your own file. If your SVG was already clean, the percentage can be small or zero.

Why Optimize SVG Files?

• Faster loading: Smaller files download faster, which helps pages load sooner, especially on slow mobile connections.
• Less bandwidth: If the same icon or logo is loaded many times, the saving adds up.
• Cleaner code: It is easier to read and paste an SVG that is free of editor clutter, especially when you use it inline in HTML.
• No private leftovers: Metadata can include tool names or file information that you may not want to publish.
• Easier to embed: A shorter SVG is easier to put in CSS, in an HTML page or in a component file.

When Optimizing Can Cause Problems

Optimization is safe for most simple icons and logos, but check the result in these cases:

• CSS or JavaScript that targets IDs or classes: If an optimizer shortens or removes an ID that your code uses, the link breaks.
• Animations: SVG animation with SMIL or CSS can depend on IDs and structure.
• Very small or very detailed graphics: Rounding numbers in paths can show up as small changes.
• Accessibility text: A <title> or <desc> may describe the image for screen readers. Keep it when the graphic carries meaning.
• Several SVGs on one page: If two inline SVGs end up with the same IDs, one can show the style of the other.

Always look at the preview, test the file where you will use it and keep a copy of your original.

How to Use an Optimized SVG on a Website

<!-- 1. As an image file -->
<img src="/images/logo.svg" alt="My logo" width="120" height="40">

<!-- 2. Pasted inline in your HTML -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">...</svg>

/* 3. As a CSS background */
.icon { background-image: url("/images/icon.svg"); }

Method	Good for	Keep in mind
img tag	Logos and illustrations that do not need styling from your page	CSS from your page cannot change the inside of the SVG
Inline SVG	Icons that you want to style or animate with CSS and JavaScript	Keep IDs unique on the page
CSS background	Decorative images	Not read by screen readers, so use it for decoration only

Keep the viewBox attribute in your SVG. It lets the image scale to any size.

SVG vs PNG and JPG

Feature	SVG	PNG	JPG
Type	Vector, drawn from shapes	Raster, made of pixels	Raster, made of pixels
Sharp at any size	Yes	No	No
Transparency	Yes	Yes	No
Best for	Logos, icons, simple illustrations	Screenshots, images with sharp edges	Photographs
Size grows with	Detail and number of shapes	Pixel dimensions	Pixel dimensions

Photographs are not a good fit for SVG. A photo converted into SVG can become very large. For photos, use the Image Compressor instead.

SVG Optimization and Server Compression

SVG is text, so web servers can compress it with gzip or Brotli when they send it to the browser. Optimizing and server compression do different jobs and work well together. Optimizing removes data for good, and compression then shrinks what is left. Because compression already removes a lot of repetition, the saving you get from optimizing is usually smaller after compression than the percentage shown here, but it is still worth doing.

SVG Safety

An SVG file is code, not just a picture. It can contain scripts and links to other files. Keep these points in mind:

• The preview on this page is shown as an image, so scripts inside the SVG do not run in the preview.
• The optimizer is not a security scanner. The downloaded file can still contain whatever was in the original.
• Use SVG files only from sources you trust, and be extra careful before you paste an SVG from an unknown source inline into your website.
• If your site lets visitors upload SVG files, treat them as untrusted and clean them on your server as well.

Tips for Better SVG Files

• Optimize as the last step. Keep your editable original, and save the optimized copy as the file you publish.
• Simplify the drawing first. Fewer points and shapes give a smaller file than any optimizer can.
• Convert text to outlines only if you need to, because it adds path data. Keep text as real text if the font will be available.
• Avoid embedding bitmaps in an SVG. A PNG or JPG hidden inside an SVG makes the file big, and an optimizer cannot shrink it much.
• Keep the viewBox. It makes scaling work.
• Check the preview at different sizes if the icon is used both large and small.
• Keep a title for meaningful images, so that screen readers can describe them.
• Use a version name such as logo.min.svg so you do not overwrite your original.

Common Mistakes

• Overwriting the original file: Always keep an editable copy.
• Not checking the preview: A small change in a path can be easy to miss if you do not look.
• Optimizing an SVG that your CSS or scripts depend on: Test the links between your code and the SVG after optimizing.
• Pasting code that is not a complete SVG: The code should start with an <svg> tag and end with </svg>.
• Expecting a big saving from a clean file: A file that is already tidy has little left to remove.
• Using an SVG for a photograph: The file can end up larger than a JPG.
• Trusting every SVG you download: They can contain scripts.

Privacy

• The optimization runs in your browser, and your file or code is not sent to our server.
• We do not save your SVG or the optimized result.
• The download file is created on your own device when you click Download SVG.
• Use only SVG files that you own or have the right to use.

Frequently Asked Questions

How do I optimize an SVG file?

Upload your SVG file or paste its code, choose the options you want, then click Optimize SVG. The tool shows a preview of the result, the original and optimized sizes with the percentage saved, and the optimized code. Click Copy Code to copy it or Download SVG to save it as a file.

What does an SVG optimizer remove or change?

It removes data that the browser does not need to draw the image, such as comments, metadata and editor-specific information, and extra spaces and line breaks. It also shortens path data, shortens colors and drops default or useless attributes. Exactly what changes depends on your options and on the file.

How much smaller will my SVG get?

It depends on the file. SVG files exported from design tools often contain a lot of extra data and can shrink a lot, while files that were already clean or hand-written shrink very little. The tool shows the exact saving for your file as the original size, the optimized size and the percentage saved.

How is the percentage saved calculated?

It is the size you saved divided by the original size, as a percentage. The formula is (original size minus optimized size) divided by original size, times 100. For example, a file that goes from 12.4 KB to 4.9 KB saves 7.5 KB, which is about 60.5 percent.

Will my SVG look different after optimization?

Usually it looks the same. Some steps, such as shortening the numbers in path data, round values slightly, which is normally invisible but can matter for very small or very detailed graphics. Always compare the preview with your original before you use the file.

What do the options Remove Metadata, Remove Comments and Minify Colors do?

Remove Metadata deletes metadata and editor-specific data from the file. Remove Comments deletes the comments. Minify Colors writes colors in the shortest form, for example #FF0000 as red or #AABBCC as #ABC. Turn an option off if you want to keep that part of the file.

Why did my file get only a little smaller, or not smaller at all?

If the SVG was already optimized or written by hand, there is little left to remove, so the saving can be small or zero. A file that is mostly large path data with many details can also stay large, because the shape itself needs those numbers.

Can optimizing break my SVG?

It can in some cases. If your CSS, JavaScript or animations refer to element IDs or class names, shortening or removing them can stop those links from working. Check the preview, test the file where you will use it, and keep your original file as a backup.

Is it safe to open and preview SVG files?

An SVG file is code, and it can contain scripts. The preview here is shown as an image, so scripts inside the file do not run in the preview. The optimizer is not a security scanner, though, and the downloaded file can still contain anything that was in your original. Use only SVG files from sources you trust.

Do I still need gzip or Brotli compression on my server?

Yes, it is a good idea. SVG is text, so web servers can compress it well with gzip or Brotli. Optimizing first removes data completely, and compression then shrinks what is left. The saving after server compression is usually smaller than the saving you see here, but both help.

What if I get an error when I paste or upload my SVG?

The file or code is probably not valid SVG, for example a tag is not closed, a quote is missing, or the file is a different format that was renamed to .svg. Fix the error in your editor, make sure the code starts with an svg tag, and try again.

Is my SVG uploaded to a server?

No. The optimization runs in your browser using JavaScript, and your file or code is not sent to our server.

Is this SVG optimizer free?

Yes. The tool is free and needs no signup. Only use SVG files that you own or have the right to use.