: How to decrease the size of my svg file Attached is an image, new.jpg, which I created in Illustrator and then converted it into SVG as required for a project. I have also used 2 compression

@Alves566

If you are ok with modifying the output code manually after exporting, there are some interesting approaches:

Since a big part of your SVG is repeated (the two lenses seem to be identical), you could use <symbol> and <use> elements to spare you some kbytes. In my tests, it went from 4.021kb to 2.453kb.

It will look something like this:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="25" height="25" viewBox="9.14 6.96 25 25">
<path fill="#FED428" d="M12.37 16.13c-1.38 3.51-.51 7.56 2.23 10.16 3.18 3.01 8 3.57 11.94 1.77 2.96-1.35 4.93-4.9 4.75-8.13-.29-5.31-4.24-9.71-9.62-10.07-8.35 1.72-7.81 2.46-9.3 6.27z"/>
<path fill="#872C0C" stroke="#872C0C" stroke-width=".2" stroke-linejoin="round" stroke-miterlimit="10" d="M27.12 22.39c-.84 1.3-1.8 1.77-3.15 2.44 1.54 1.1 4.38-1.78 3.15-2.44-1.02 1.57 1.03.55 0 0z"/>
<symbol id="l" viewBox="0 0 32 32">
<defs>
<path id="a" d="M20.97 14.81c-.46-1.39-2.79-.69-3.53-1.78-.66-.7-1.59-3.34-2.95-2.13-.98.87-1.12 2.29-2.5 2.66-.87.27-3.52.75-2.36 2.25.56.95 1.66 1.63 1.63 2.81-.03 1.24-.42 3.75 1.68 3 .62-.22 1.23-.44 1.85-.66.61-.22 1.29.16 1.87.37.55.19 1.29.61 1.88.38.85-.34.68-1.29.66-2.02-.02-.82-.17-1.57.36-2.25.48-.64 1.71-1.73 1.41-2.63z"/>
</defs>
<clipPath id="b">
<use xlink:href="#a" overflow="visible"/>
</clipPath>
<g clip-path="url(#b)" fill="none" stroke-width="3.04" stroke-miterlimit="10">
<path stroke="#EE6455" d="M37.59 25.2c0 9.37-8.74 16.65-17.95 14.97-9.18-1.66-14.78-11.55-11.53-20.28 2.55-6.84 9.83-10.96 17-9.66 7.15 1.29 12.48 7.71 12.48 14.97 0 8.4 0-8.41 0 0z"/>
<path stroke="#FFEE2C" d="M34.55 25.2c0 4.47-2.54 8.68-6.49 10.77-4.01 2.12-9.01 1.8-12.7-.82-3.68-2.6-5.65-7.13-5.04-11.6.6-4.4 3.66-8.21 7.82-9.76 7.81-2.92 16.41 3.07 16.41 11.41 0 6.72 0-6.72 0 0z"/>
<path stroke="#29FFC2" d="M31.5 25.2c0 4.56-3.49 8.52-8.02 9.06-4.53.55-8.89-2.45-9.97-6.89-1.08-4.44 1.39-9.13 5.68-10.72 4.29-1.59 9.24.33 11.31 4.4.66 1.28 1 2.71 1 4.15z"/>
<path stroke="#74A6FA" d="M28.46 25.2c0 3.32-2.77 6.09-6.09 6.09s-6.09-2.77-6.09-6.09 2.78-6.09 6.09-6.09 6.09 2.77 6.09 6.09z"/>
</g>
<path fill="none" stroke="#F5F7F8" stroke-width=".55" stroke-miterlimit="10" d="M20.97 14.89c-.42-1.28-2.52-.82-3.38-1.6-.76-.7-1.47-3.21-2.89-2.46-1.16.61-1.19 2.37-2.56 2.77-.92.27-3.3.58-2.65 2.07.45 1.02 1.8 1.72 1.77 2.91-.02.95-.47 3.89 1.42 3.22 1.2-.42 2.21-1.01 3.45-.57.53.19 1.08.46 1.63.58 1.07.38 1.47-.67 1.45-1.5-.02-.84-.28-1.98.27-2.69.5-.67 1.79-1.81 1.49-2.73z"/>
</symbol>

<use href="#l" x="0" y="0" width="32" height="32"/>
<use href="#l" x="12.8" y="0" width="32" height="32"/>

<path fill="#F5F7F8" d="M21.23 15.65c.14.26.9.32.79 0 .27.55.71.99 1.05 1.5-.89-.3-2.05-.5-2.91 0 .37-.47.79-.96 1.07-1.5.26.52-.21.41 0 0z"/>




Also, you can lower the number of decimal cases to one. It will mess with the shapes, though. In this case, the difference is small, but noticeable. For a better result, you can tweak the vector before exporting. Here, it went from the 2.453kb to 2.153kb. This can be done on the export options panel, on Illustrator.

An idea that I haven't tested is using circle svg elements on top of each other for the rainbow, (you don't really need each circle to have a hole in it). It will sure spare another kb since specifying the dimensions for a circle is way more compact than specifying each anchor!

If it's for web, you can always gzip the file!

Vote Up Vote Down

@Samaraweera207

I tried redrawing your graphic using Inkscape (just for fun!), so that I could use a Clone for the other rainbow star shape instead of having two independent graphics. Using a Clone means the rainbow star only needs to be defined once. I don't think Illustrator can do Clones. Also I used a single line/path with a wide stroke for the star shapes, and the sun background is just a circle. The plain SVG that Inkscape generated was 6.31kb.

But, after using both your compression links, and reducing the decimal places, the final result is 2.38kb. I think you'd be hard pressed to get it any lower without actually simplifying the graphic. I wonder if anyone here can get it even smaller?

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 80 80" height="80mm" width="80mm"><defs><clipPath id="a"><path d="M138.968 162.324c-2.104 1.479-7.174-1.66-9.746-1.69-2.548-.03-7.653 2.992-9.691 1.462-2.057-1.543-.638-7.335-1.404-9.79-.76-2.433-5.211-6.354-4.386-8.765.832-2.433 6.78-2.874 8.877-4.361 2.08-1.474 4.433-6.92 6.981-6.88 2.571.04 4.828 5.56 6.89 7.095 2.045 1.522 7.951 2.078 8.701 4.514.757 2.457-3.795 6.31-4.619 8.745-.816 2.415.481 8.204-1.603 9.67z" fill="none" stroke-linejoin="round" stroke-width="2.1159805" stroke="#f0f0f0"/></clipPath></defs><g transform="translate(0 -217)"><circle r="26.553" cy="259.035" cx="39.335" fill="#ffd42a"/><path d="M35.224 250.152c3.922-2.315 10.725-.141 10.725-.141" fill="none" stroke-linejoin="round" stroke-width="2.11" stroke="#f0f0f0"/><g id="b" fill="none" stroke-linejoin="round"><g clip-path="url(#a)" transform="translate(-106.728 101.77)"><path d="M187.08 175.763a31.966 30.97 0 0 1-31.966 30.97 31.966 30.97 0 0 1-31.965-30.97 31.966 30.97 0 0 1 31.965-30.971 31.966 30.97 0 0 1 31.966 30.97z" stroke-width="8.2" stroke="#00ffc2"/><path d="M195.089 175.763a39.974 38.73 0 0 1-39.975 38.73 39.974 38.73 0 0 1-39.974-38.73 39.974 38.73 0 0 1 39.974-38.73 39.974 38.73 0 0 1 39.975 38.73z" stroke-width="8.2" stroke="#fff000"/><path d="M178.963 175.763a23.848 23.106 0 0 1-23.849 23.106 23.848 23.106 0 0 1-23.848-23.106 23.848 23.106 0 0 1 23.848-23.106 23.848 23.106 0 0 1 23.849 23.106z" stroke-width="8.2" stroke="#72a5fd"/><path d="M203.354 175.763a48.24 46.738 0 0 1-48.24 46.738 48.24 46.738 0 0 1-48.24-46.738 48.24 46.738 0 0 1 48.24-46.739 48.24 46.738 0 0 1 48.24 46.739z" stroke-width="8.36" stroke="#f06450"/></g><path d="M32.314 263.8c-2.103 1.478-7.173-1.66-9.745-1.69-2.548-.03-7.653 2.992-9.692 1.462-2.056-1.544-.638-7.336-1.404-9.79-.759-2.433-5.21-6.355-4.386-8.766.833-2.433 6.78-2.873 8.878-4.36 2.079-1.474 4.433-6.92 6.98-6.88 2.572.04 4.829 5.56 6.891 7.095 2.044 1.522 7.951 2.078 8.7 4.513.757 2.458-3.795 6.31-4.618 8.746-.816 2.414.48 8.204-1.604 9.67z" stroke-width="2.1159805" stroke="#f0f0f0"/></g><use height="100%" width="100%" transform="translate(34.597 .546)" xlink:href="#b"/><path d="M43.164 275.518s6.682-2.572 8.787-6.715c.29.102 1.68.775.734 2.723-1.232 2.536-6.21 6.78-9.521 3.992z" fill="#882c02" stroke-linecap="round" stroke-linejoin="round" stroke-width=".41" stroke="#882c02"/></g></svg>

Vote Up Vote Down

@Deb5748823

Might also help to post the SVG code so we can see for ourselves although Jake Archibald's SVGOMG (which you mentioned) is pretty good and is my go-to.

Personally, I'd be quite happy if I was able to shrink that SVG from 6KB to 4KB and I don't think you'll be able to compress/optimise it much further without starting to lose detail.

Also be aware that there are settings in the SVGOMG GUI you can play around with to achieve a smaller size WHILE getting a live preview of how it would/will look.

EDIT

So I noticed you've added the SVG code for us to have a better look on how to optimize.

After lowering the precision on SVGOMG I managed to get the file to 1.37KB with a total saving of 0.03KB! Although someone else pointed out you could re-use the clip path of the glasses lens to potentially save even more bytes when you re-use it in the svg with /

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="25" height="25" viewBox="9.14 6.96 25 25">

Vote Up Vote Down