Copy link to clipboard
Copied
My website will rely on several hundred SVG files generated by illustrator. The website is designed to control certain styles in the SVG, changing their colors for different options picked by the user. Unfortunately I've not been able to find a way to control the style names that are output by the .ai file using the "Export for Screens" to SVG flow.
I thought I had figured it out by assigning Graphic Styles to the the colors I want my website to control, but in the past 24 hours things have gone sideways and the output SVg files seem to only be assigning one graphic style in the exported SVG.
Here is the SVG <style> code, the .TWO style is one of the graphic styles that I've assigned, .a is supposed to be .ONE, .b is supposed to be .THREE etc. Unfortunately I can't just have my site change based on the arbitrary letters that are being exported as I need to assign specific numbers to specific colors.
<style>
.a{fill:#131410;}
.TWO{fill:#1765b1;}
.b{fill:#faed23;}
.c{fill:#e91f27;}
.d{fill:#8ac640;}
.e,.f{fill:none;stroke:#565656;stroke-miterlimit:10;}.e{stroke-dasharray:3;opacity:0.25;}.f{opacity:0.5;}
</style>
Within illustrator, how do I explicitly control these output style definitions?
I was able to sort this issue out, it was all in the SVG export for screens settings:
Also was good practice to Option+8 all paths to turn them into compound paths. Cleaned up the SVG code dramatically.
Copy link to clipboard
Copied
Bump! Would love some help on this. I will send whever solves this a $50 Starbucks card!
Copy link to clipboard
Copied
You can't control this in Illustrator unfortunately.
Please make a feature request to get this to the developers.
Copy link to clipboard
Copied
Omg. That is not good news! Not sure how I’ll work around this other than manual text file editing. Might be able to come up with a script that can bulk process my exports...
Copy link to clipboard
Copied
I was able to sort this issue out, it was all in the SVG export for screens settings:
Also was good practice to Option+8 all paths to turn them into compound paths. Cleaned up the SVG code dramatically.