Fabien Huet

Fabien
Huet

Web ninja //
CTO on demand

Home Github About me

📦 Hey Adobe! Please make Illustrator Assets Export for SVGs cleaner. (I still love you)

in SVG

The Assets Export panel in Illustrator is great. It did improve my workflow a lot for PNGs. But sadly, I still have to clean up Illustrator SVGs.

This is the raw export for a small squared French flag (expanded for legibility) :

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80">
    <defs>
        <style>
        .cls-1 {
            fill: #fff;
        }

        .cls-2 {
            fill: #1cb0f6;
        }

        .cls-3 {
            fill: #d33131;
        }
        </style>
    </defs>
    <title>fr</title>
    <g id="Layer_2" data-name="Layer 2">
        <g id="Layer_1-2" data-name="Layer 1">
            <path class="cls-1" d="M25,0H55V80H25Z"/>
            <path class="cls-2" d="M0,0H25V80H0Z"/>
            <path class="cls-3" d="M55,0H80V80H55Z"/>
        </g>
    </g>
</svg>

Where do the groups come from? There is no such thing in my illustrator file. Not even two layers.

I want to get rid of the title. I understand why there is one, and “French flag thumbnail” would be nice. But “fr” is useless.

Please be smart about classes and defs. There we only need a fill attribute. the classes add weight instead of saving some.

After cleaning it up:

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'>
    <path fill='#fff' d='M25,0H55V80H25Z'/>
    <path fill='#1cb0f6' d='M0,0H25V80H0Z'/>
    <path fill='#d33131' d='M55,0H80V80H55Z'/>
</svg>

Once one-lined, we go from 374 bytes with the initial version to 185.

I understand that it would require some weird conditions and fine tuning but that would improve a lot the workflow not to have to clean the SVGs.

Improvements?