Control of SVG <style> class names on Export
Here is a detailed explanation of my issue:
https://forums.adobe.com/message/10234155#10234155
Summary: We should be able to assign/control style classes within the ai file that show up in the svg file.
8 comments
-
Matthew Harris commented
Using the st0 format for class names also causes problems when using the svg files in Elementor (page builder for WordPress).
The issue is that when using SVG on the web, you can only target the SVG classes with CSS if they are embedded into the actual page. So Elementor embeds the SVG into the page as an svg tag snippet, and then the css classes affect the other classes on the page, changing the styles unintentionally.
A randomise classes function would be handy here.
-
Grant Davis
commented
yes i would like the actual color swatch names retained in the exported SVG instead of the sequential cls-1, cls-2 that is currently seen.
-
Anonymous
commented
Yess this would be great !!! any object shoud be able to receive a class attribute and this class attribute should be exportable (through checkbox in the svg export prefs)... today we can select objects with their id (layer name), but we should be able to add a class in order to manipulate svg more easily.
-
Liam Dilley commented
This and Photoshop - At the very least the classes need to have some form of random id class name generation by default.
If you create two SVG images and add those on to a page your always going to have the font styles etc rendered based on the last SVG which is not great
-
Dirk Schulze
commented
Hi Brennan and Francis,
@Brennan We will review the issue with character and paragraph styles.
@Francis Got your request to multiple classes applied to an element. We will review it as soon as possible. It is a tricky one though. As mentioned by @Brennan, we are half way there if you use “Graphic Styles”.
Greetings,
Dirk -
Brennan Young
commented
Using AI (CC early 2019)
I notice that graphic style names make it to the CSS in the exported SVG (great!) whereas paragraph and character style names do not. (Boo!) Infuriating! Everything is changed to st1, st2... etc.
Use cases: Scripting SVG or using external css files depend on a minimal level of predictability about what identifiers appear in the markup which is just not there right now.
If I want several related/similar SVG files to use the same script or css, I can't be sure that the class name that AI generates will match the same class of element in each case.
"st4" might point to the main heading in one SVG, but might point to a minor tspan in some other SVG, depending (I suppose) on how many distinct styles appear in each individual document, the exact layer order, and various other arbitrary influences. This isn't how 'styles' are supposed to work.
Just use the identifier given in the UI for paragraph and character styles, if it's been specified, please!
Related: Shouldn't paragraph styles be applied to <text> elements, whereas character styles should be applied to <tspan> elements?
-
Francis
commented
I understand this perfectly.
You can set the name of a path that becomes an id in the svg export.
What we need is to set a list of classes (in the Properties window, probably). So if you set the list to orangeStyle, dark, tobeResized (probably with a + sign to add another class) and the svg output will have class="orangeStyle, dark, tobeResized" inside. -
Hi Gregan,
Thanks a lot for opening this feature request! Could you please send the minimal Ai test file (the one with the .a, .TWO, .b output) to sharewithai@adobe.com?
Do I understand your request correctly that you want to give each style class an individual name or do you want to have them all the same individual prefix?
Also, would creating and applying graphic styles with names of your choice be suitable for you if the same name is chosen as CSS class name on the SVG export?
Thanks a lot in advance,
Dirk