Highlighted

Exported SVG <style> Definitions Keep Changing -> Need Consistent Output

Explorer ,
Mar 09, 2018

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:

Screen Shot 2018-04-06 at 3.39.22 PM.png

Also was good practice to Option+8 all paths to turn them into compound paths. Cleaned up the SVG code dramatically.

Views

715

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Exported SVG <style> Definitions Keep Changing -> Need Consistent Output

Explorer ,
Mar 09, 2018

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:

Screen Shot 2018-04-06 at 3.39.22 PM.png

Also was good practice to Option+8 all paths to turn them into compound paths. Cleaned up the SVG code dramatically.

Views

716

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Mar 09, 2018 0
Explorer ,
Mar 10, 2018

Copy link to clipboard

Copied

Bump! Would love some help on this. I will send whever solves this a $50 Starbucks card!

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 10, 2018 0
Adobe Community Professional ,
Mar 10, 2018

Copy link to clipboard

Copied

You can't control this in Illustrator unfortunately.

Please make a feature request to get this to the developers.

http://illustrator.uservoice.com

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 10, 2018 0
Explorer ,
Mar 10, 2018

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...

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Mar 10, 2018 0
Explorer ,
Apr 06, 2018

Copy link to clipboard

Copied

I was able to sort this issue out, it was all in the SVG export for screens settings:

Screen Shot 2018-04-06 at 3.39.22 PM.png

Also was good practice to Option+8 all paths to turn them into compound paths. Cleaned up the SVG code dramatically.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 06, 2018 0