vendredi 20 octobre 2017

Automatically inlining Adobe Illustrator SVG class

I am working on a Laravel project where a file of SVG icons are being included into a Blade template. Each SVG in the file is defined by a <symbol>. I render an individual icon as:

<svg viewBox="0 0 150 150"><use href="#icon-i-want"></use></svg>.

This works great, but the SVGs were made with Adobe Illustrator and they have these auto-generated classes such as, .st0, .st1. These classes contain attributes like fill or stroke. For instance:

.st0{fill:#2595FF;} <line class="st2" x1="27.8" y1="80.5" x2="39" y2="80.5"/>.

There are so many SVGs in this file that the generic classes overwrite each other (there are 70+ .st0 classes). I can fix the problem by manually breaking the class into attributes.

`.st0{fill:#2595FF;}`
`<line fill="#2595FF" x1="27.8" y1="80.5" x2="39" y2="80.5"/>`

I'm not well versed in SVG and design tools nor do I own a license of Adobe Illustrator. All I have is this large file of SVGs. Is there a tool for what I manually did; that is, automatically inlining these generated classes?




Aucun commentaire:

Enregistrer un commentaire