Many websites use svg images to create beautiful content.
Today i can't configure a specific class that can be exported with the svg together with items, groups or layers. Groups do carry an id... but not a class... and this is a pain when we have to animate or create interactivity over svg artworks... today we have to manually modify the exported svg and we loose a lot of time.

Agree with Edu Couchez. I'm a decades-long Adobe Suite user but the SVG issue seems to be overly complex for an Illustrator programatic solution. Just the fact that you have to use DIFFERENT filters to achieve the effects of drop shadow and blends is an indicator that native SVG tools need their own program (like Inkscape).
Can Illustrator not release their own competitive version? I work in XD but do not code. My only SVG export workaround is to build vector within XD. I've written to Skillshare Illustrator tutorial experts and their response to the SVG problem is "out of my league". I am finding more beneficial discussion in developer conversations. I am a graphic designer, largely print design, but also developing designs for a dev team to implement through our JIRA workflow. The deadend for our team so far is Adobe Illustrator and has been for a number of years. So I'm now being forced to buy/train other software to solve Adobes problems in this area.

Appreciate all of the open discussions and hoping that these exchanges can motivate Adobe to move more quickly. Many of the open tickets on this topic go back to 2017!

Thanks very much! :)

https://illustrator.uservoice.com/forums/333657-illustrator-desktop-feature-requests/suggestions/41177197-support-svg-tiny-p-s

https://illustrator.uservoice.com/forums/333657-illustrator-desktop-feature-requests/suggestions/31209892-fully-support-the-svg-standard

https://illustrator.uservoice.com/forums/601447-illustrator-desktop-bugs/suggestions/39161347--svg-filter-effect-rasterized-in-image-instea

https://illustrator.uservoice.com/forums/601447-illustrator-desktop-bugs/suggestions/35410633-can-t-export-an-svg

Completely agree with Tim Kelly - it's a significant shortcoming not to support <title> and <description>, but regarding accessibility, I would love to see a way to work with aria roles, tabindexes and accessible names (such as aria-label). A more generally useful approach would be for the Illustrator GUI to support the full range of SVG attributes (including aria).

Might not be the best place to put this request. but seems relevant....

Is there any chance that we could get some Accessibility options for exporting SVGs?

At bare minimum, something to allow setting the <title> and <description> attributes, but also some better support around the ID - for use with aria labels and such.

As a developer, it is consistently a nightmare to work with SVGs that are exported from Illustrator as it always requires running them through an optimizer (not my primary concern here, it's easy enough to script) and often also requires manually editing the code, but it is especially a nightmare when accessibility is a priority, because that can only be added manually.

In an ideal world I could rely on the author of the SVGs to include all relevant information about the SVG (title and description), so when they get exported the only thing I would have to worry about would be optimization/de-bloating - and in a perfect world that wouldn't be necessary either.

Thank you for your consideration! :)

Hey Dirk Schulze!... thanks a lot for your answer :-)

Just I didn't remember I wrote my comment about it. In fact, I've been all this past months fighting against Illustrator, trying to find solutions to each of the increasing number of discouraging issues and aging of its nowadays unintuitive and prehistoric tools, compared with modern and cheaper design apps.

Sadly, the only answer I've found for it and all the other questions is move to the 21st century and leave behind 1990's. It means, learn new and more efficient software that could save my life and career (as didn't made Illustrator in last months)

I know illustrator is a big dinosaur, and change even the smallest tool functionality almost impossible. That's why I think it should be sent to de Elephant Graveyard and give him a splendorous retirement.

For Adobe, to really compete against the myriad of new 21st century design tools, should to start from the ground up with a new and light design tool... without all these ton of useless complex and unintuitive functions no one uses.

Good luck Adobe!... I've been a loyal user for decades, my job as a free lancer needs cheaper and faster tools to improve productivity and creativity, not frustration and years of "feature request" writing and voting. It's fun to see how nowadays, there are still people asking for a decent "isometric" grid option... when isometric design is something of the remote past.

Thanks Edu Couches for the detailed explanations! This indeed is really useful.

To point 1-3:
Same colors in the same class are offered by the File > Export as (Export For Screens.../Asset Export) work flows. I encourage you to try it and am eager to hear your feedback.

It is possible to export pre-defined CSS classes with custom names by using Graphic Styles in your artwork (See Panel Graphic Styles). When you drag an element into the panel, a new graphic style will be created. You can name it and reuse it on other elements. The name of the graphic style will be used as CSS name. That should address the class issue you describe.

To 4:
We do have a CSS Extract/Export Option but that will likely not address the described issue. Will add that to our backlog.

If you name a group, shape or text element, the File > Export as Route will use that as an ID. I hope this addresses the ID issue.

To 5:
I am not quite getting the ask. As you said, the Layer panel provides a hierarchical view of the Ai document structure. For SVG export we might clean it up a bit and remove the internally created groups but we are doing it ad hoc. What difference do you expect to the Layer panel?

Greetings,
Dirk

If I could click the vote button for Edu Couchez' well-considered proposals, I would.

Absolutely agree... SVG design and animation is an increasing demand today. Adobe Animate is not the right tool, as it is good for banner animations, but not optimised to manage HTML5/CSS/Javascript separate files (as usual with large web projects). Even worst... no intellisense/code completion for SVG/Javascript, so writing code is a pain.

I've been trying for years to find a decent procedure to export Illustrator graphics to reuse in HTML projects, but I've only been successful to use SVG as static images. So following I’ll describe some issues and proposals to help us simplify the process.

1 - "CSS Properties" panel incoherent: After carefully name each element and create all the CSS class styles, the SVG is exported using object names as Id. So I’ve to rewrite the SVG or the CSS to replace the Id with Class names or vice versa.
2 – After exported SVG, the new style classes generated are named in a numerical way (for example “st27”), so I’ve to manually rewrite each class in a meaningful way.
3 – Classes multiplied by each element in the SVG: If for example, I have 100 elements sharing the same colour, I get a CSS sheet with 100 different named classes to “paint” exactly the same colour, so just one class should be enough. Again, for efficient design and coding, I’ve to manually rename all 100 classes with a unique meaning one.
4 – Proposal 1: A more powerful “CSS Palette” tool… having options to export CSS as attached file, not embedded inside the SVG file, and ability to edit/rename ID and Classes.
5 – Proposal 2: Some document “outline view” tool to quick see the hierarchy and attributes of the SVG/AI content. “Layers” panel could do the trick, but thumbnail images makes it too large and difficult to navigate, so a simple and basic semantic tree view could be enough.

Thank you! Hope you could find my ideas useful.

Hi Ricardo,

The inactive SVG code... button definitely is a bug. It would be great if you could send us an Ai document where this bug appears to sharewithai@adobe.com. We are not able to reproduce this issue.

In the mean time, could you try using File > Export as (select SVG)? This should have a button called "Show Code" and also provides you access to the source code with out copy&paste into a text editor.

Greetings,
Dirk

Hi Dirk , it's general, the svg code generator it's just available if or when the document are with a simple draw.
If I do like this ( if I want just a icon for exemple, in a document with multiple draw) Save as - SVG - use all artboards the svg code generator isn't available...
Normaly I just copy the asset from artboard and paste that code on html editor, works also, but isn't good way to do it... and for people that want make a fast job, will be faster if that function becomes available... because we (webdesigners) want svg code and not svg file... It's the same, but it's a bit stupid that function is unavailable. Probably some people are questioning why...
Thanks Dirk

Hi Ricardo, this is very odd. This button should not be inactive. Does this issue happen with the latest release of Illustrator? Is there anything specific about the Illustrator document? Does it have huge amount of content? Many raster images or mesh gradients? Would it be possible for you to share an Illustrator document with the Illustrator team privately?

Greetings,
Dirk