I mentioned back in 2019 that graphics style class names do carry over.

It is character and paragraph styles that were failing. Any changes here?

I tried this method and while I was able to generate and control most of the styles with assigned class names through the Graphics styles panel, Adobe was still creating additional cls- class names. It was definitely fewer, but still creating conflict issues with other svg files on the same web page.

Hey, Jonathan, thanks for the note! Interesting... Well, this looks like a legit way to control these then. Does it look as a final solution to you though?

Hi all - if you add your style to the styles palette and name it, it will export with that name!

This is an ongoing issue across our company and is a major hitch for our website. We have thousands of pages using multiple svgs that cannot be loaded as image files because we would lose the interactivity. Right now I use a regex to search and replace because depending on if you have re-saved the svg since exporting the class name convention changes from -cls to st.

This is essential for anyone using Illustrator to create SVGs. even the simplest images take ages to fix in a code editor, but many of the ones I create are quite complex. This would save me hours a week.
Let us name styles and use those to create the CSS for SVGs please

Absolutely Agree. For now, to avoid duplicates I must open each SVG in a text editor and performa search/replace of "cls-" to cls-sometihg-".

The same is with duplicate ID's that are not even allowed in HTML.

We have .svg files with conflicting styles on our web pages because of the inability to predict class names. At a minimum, we should be able to choose the naming convention Adobe will use at export. So perhaps we can choose "cls" or "st" or enter our own syntax. So even if we cannot control which elements get the exact name, we can avoid conflicting with other files on the same web page.

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.

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.

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.

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

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

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?

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