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?
- make the title optional (and editable)
- add an option to inline all styles
- automatically inline a style when there is only one item in it
- no useless groups
- is it possible to choose between simple and double quotes?