• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

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

Explorer ,
Mar 09, 2018 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?

Views

2.0K

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
community guidelines

correct answers 1 Correct answer

Explorer , Apr 06, 2018 Apr 06, 2018

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.

Votes

Translate

Translate
Adobe
Explorer ,
Mar 10, 2018 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!

Votes

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
community guidelines
Community Expert ,
Mar 10, 2018 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

Votes

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
community guidelines
Explorer ,
Mar 10, 2018 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...

Votes

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
community guidelines
Explorer ,
Apr 06, 2018 Apr 06, 2018

Copy link to clipboard

Copied

LATEST

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.

Votes

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
community guidelines