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?