1

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 tools, compression tool 1 & compression tool 2 via which have decreased the size to 3.8 kb from 5.8 kb originally.

My question is that is there a way to decrease the file size any further i.e. an extremely powerful compression tool which doesn't mess with the image OR a way to get rid of extra stuff within Illustrator to decrease the size.

I am also attaching a screenshot, layers.jpg, which shows all the layers in the image. new.jpg layers.jpg

SVG Code;

<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"/><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"/><g><defs><path id="c" d="M33.79 14.81c-.41-1.27-2.52-.82-3.38-1.6-.76-.7-1.47-3.2-2.89-2.46-1.16.61-1.19 2.37-2.56 2.77-.91.26-3.68.75-2.52 2.29.55.95 1.67 1.62 1.64 2.81-.03 1.11-.44 3.75 1.56 3.04.63-.22 1.25-.44 1.88-.67.64-.23 1.17.06 1.77.27.52.18 1.24.59 1.81.51 1.01-.14.94-1.14.91-1.9-.02-.87-.21-1.72.35-2.44.5-.63 1.73-1.71 1.43-2.62z"/></defs><clipPath id="d"><use xlink:href="#c" overflow="visible"/></clipPath><g clip-path="url(#d)" fill="none" stroke-width="3.04" stroke-miterlimit="10"><path stroke="#EE6455" d="M50.41 25.2c0 9.37-8.74 16.65-17.95 14.97-9.17-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.97z"/><path stroke="#FFEE2C" d="M47.37 25.2c0 4.47-2.54 8.68-6.49 10.77-4.01 2.12-9.01 1.8-12.71-.82-3.68-2.6-5.65-7.13-5.05-11.6.6-4.4 3.66-8.21 7.82-9.76 7.83-2.92 16.43 3.07 16.43 11.41 0 6.72 0-6.72 0 0z"/><path stroke="#29FFC2" d="M44.32 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.6 9.24.33 11.32 4.4.65 1.28.99 2.71.99 4.15 0 5.05 0-5.05 0 0z"/><path stroke="#74A6FA" d="M41.29 25.2c0 3.32-2.77 6.09-6.09 6.09s-6.09-2.77-6.09-6.09 2.77-6.09 6.09-6.09 6.09 2.77 6.09 6.09c0 3.36 0-3.36 0 0z"/></g><path fill="none" stroke="#F5F7F8" stroke-width=".55" stroke-miterlimit="10" d="M33.79 14.89c-.42-1.28-2.52-.82-3.38-1.6-.77-.7-1.46-3.2-2.89-2.46-1.16.61-1.19 2.37-2.56 2.77-.92.27-3.3.58-2.65 2.07.44 1.02 1.81 1.71 1.77 2.91-.03 1.02-.48 3.89 1.47 3.2.62-.22 1.24-.44 1.85-.66.64-.23 1.1-.05 1.71.17.54.19 1.15.52 1.72.58 1.09.11 1.2-.93 1.18-1.72-.02-.81-.26-1.84.27-2.53.52-.66 1.82-1.81 1.51-2.73z"/></g><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"/></svg>
    enter code here
  • 1
    Hello, 3.8 k is about the smallest a file can be, but yes to save file size you should have no clips or masks, so expand and flatten all. Then if you make the image physically smaller, like 100 pixels across then it will save space. – Webster Feb 13 '18 at 1:15
  • Why do you want to reduce the size of the SVG? It's already tiny, at only 3.79kb – Billy Kerr Feb 13 '18 at 10:15
  • USe a svgz file? – joojaa Feb 13 '18 at 11:34
  • @BillyKerr its required for the project to be smaller than what it is at the moment. – shahz Feb 14 '18 at 0:12
  • 1
    @Webster No in this case it just most likely makes the file larger. As shaz you note. Flattening in general makes things more complicated so no it wont help. Try decreasing the number of decimals. You can also try npt having 2 clipping groups, just make the eyeglasses a compound path then clip to that instead of one per lens. This should take you down a bit. Also consider using a true circle in the background... Anyway SVG is not really a very optimal format for small size. – joojaa Feb 14 '18 at 8:45
2

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">

  • it'd be REALLY useful if people could explain their downvotes because if I'm suggesting bad advice I'd like to know what I'm doing wrong – Brandito Feb 14 '18 at 2:29
  • 1
    I dont think this is a bad answer per see. However it does not really answer the question as being asked. – joojaa Feb 14 '18 at 8:46
1

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>
  • 2
    Well, a stroke width of .41 could easlily be 0.4 without much change, as could a stroke width of 2.11 be 2.1 without andy difference also quite a lot of repeated cases of fill="none" stroke-linejoin="round" could be replaced with a style definition etc. – joojaa Feb 14 '18 at 13:55
  • @joojaa I suspected something like that might be possible, removing the 1 off .41 would be easy enough for me, but as for the rest, if only I knew how! Sadly, as you already know, I am certainly no coder! – Billy Kerr Feb 14 '18 at 14:04
  • @joojaa, do feel free to use the code to write an answer to improve on mine. I might finally learn something! – Billy Kerr Feb 14 '18 at 14:09
  • 1
    Well by reading the code quickly i knocked it down to 2.32 KB i susepect if i would write a script to round some of the other numbers i kould shave maybe .3 KB But this is definitely diminishing returns kind of stuff. – joojaa Feb 14 '18 at 14:11
1

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!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.