How do I optimize SVG paths? [closed]

Question

So I am creating few SVGs on Adobe illustrator and exporting its path, but I'm unable to understand why my paths are very very long, compared to other websites. So if you do a code analysis below. The top one is my SVG path, and the bottom one is from another website. The output icon is the same for both of us

How do I optimize my paths, go it can also be small like others. I have noticed all of my path code is a couple of hundred lines ago.

JS Fiddle: https://jsfiddle.net/bf51j9yr/

Someone else's SVG:

<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="m10 20h9.006c1.65 0 2.994-1.347 2.994-3.009v-9.982c0-1.673- 
1.341-3.009-2.994-3.009h-14.012c-1.65 0-2.994 1.347-2.994 3.009v9.982c0 
1.673 1.341 3.009 2.994 3.009h2.006v-9c0-.552.447-1 1-1h6v-3.5l5.5 5- 
5.5 5v-3.5h-4z"></path>
</svg>

Regards, Bill

Answer 1

SVGOMG by Jake Archibald available under https://jakearchibald.github.io/svgomg/ is a great open-source tool to do so. It allows to easily trim SVG markup size (also with varying precision).

It managed to trim your sample SVG by about 50% with no visual precision loss.

If you would like to achieve more, you might need to restructure your SVG. The size on an SVG depends directly on how it is composed from smaller elements (primitives and their compositions).

Redesign of Google logo is a good case study of how it might be achieved https://www.quora.com/How-could-Googles-new-logo-be-only-305-bytes-while-its-old-logo-is-14-000-bytes/answer/Ilya-Yakubovich?srid=3a0v Also, Konrad Dzwinel made a short tutorial how he has fine-tuned DuckDuckGo logo recently https://twitter.com/kdzwinel/status/1097592890501615616

Answer 2

The main reason your SVG is so big is that there are a lot of invisible elements in it. Here is an outline of all paths in there:

https://jsfiddle.net/w08bd4og/