How one *should* be able to assign class names in Illustrator for SVG export

Jeff Valore has a handy article on CSS Styling Illustrator SVGs in which he explains how one can:

• Create Graphic Styles with CSS compliant names
• Apply those styles to one or more elements in Illustrator
• Have those style names get written as class attributes via File > Save As > SVG, choosing More Options in the resultant dialogue box, and making sure Style Elements is applied to the CSS Properties drop-down menu

But the resultant SVG code is not as clean or optimal as that produced via the more modern File > Export > Export For Screens, which Adobe prefers us to use.

Here’s an example…

Code produced via File > Save As > SVG

Subsequently minimised to 1,123 characters. In particular, note the verbose and superfluous XML declaration, comment and attributes.

<?xml version=”1.0" encoding=”utf-8"?><! — Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) →<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN” “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version=”1.1" id=”Layer_1" xmlns=”http://www.w3.org/2000/svg" xmlns:xlink=”http://www.w3.org/1999/xlink" x=”0px” y=”0px” viewBox=”0 0 58 33" style=”enable-background:new 0 0 58 33;” xml:space=”preserve”><style type=”text/css”>.mountain{fill:#5D2479;}.primary{fill:#5D2479;}.secondary{fill:#CEBDD7;}.snow{fill:#FFFFFF;}</style><path class=”secondary” d=”M55.2,31.5h-8l-5.1–8.8l4–6.9L55.2,31.5z M11.9,15.8l4,6.9l-5.1,8.8h-8L11.9,15.8z” /><g><g><path class=”primary” d=”M46.1,12.8l-4.9,8.4L29,0L16.7,21.2l-4.9–8.4L0.2,33h57.6L46.1,12.8z M55.2,31.5h-8l-5.1–8.8l4–6.9 L55.2,31.5z M11.9,15.8l4,6.9l-5.1,8.8h-8L11.9,15.8z” /></g></g><g><polygon class=”mountain” points=”12.5,31.5 29,3 45.5,31.5" /></g><g><g><path class=”snow” d=”M11.4,19.5l-3,2.2l3.4–5.9l2.6,4.4L11.4,19.5z M48.7,20.2l-2.6–4.4l-3.4,5.9l3–2.2L48.7,20.2z M26.4,11.6 l1.3,1.9l2.6–3l5.2,3.7L29,3l-8.8,15.2L26.4,11.6z” /></g></g></svg>

By contrast, although File > Export > Export For Screens is slick, it has no options for control over what gets written to the resultant SVG…

Code produced via File Export > Export For Screens

650 characters of clean code that is minimised by default, and includes a <title> attribute for better accessibility. If my Graphic Styles had gotten applied as class names it would have been 701 characters.

<svg xmlns=”http://www.w3.org/2000/svg" width=”58" height=”33" viewBox=”0 0 58 33"><defs><style>.a{fill:#cebdd7;}.b{fill:#5d2479;}.c{fill:#fff;}</style></defs><title>icn-expedition</title><path class=”a” d=”M55.2,31.5h-8l-5.05–8.75,4–6.94ZM11.86,15.8l4,6.94L10.81,31.5h-8Z”/><path class=”b” d=”M46.14,12.8l-4.87,8.44L29,0,16.73,21.25,11.86,12.8.2,33H57.8ZM55.2,31.5h-8l-5.05–8.75,4–6.94ZM11.86,15.8l4,6.94L10.81,31.5h-8Z”/><polygon class=”b” points=”12.53 31.5 29 3 45.47 31.5 12.53 31.5"/><path class=”c” d=”M11.41,19.54l-3,2.2,3.43–5.94,2.56,4.44Zm37.29.7L46.14,15.8l-3.43,5.94,3–2.2ZM26.4,11.65l1.28,1.92,2.65–3,5.19,3.75L29,3,20.23,18.2Z”/></svg>

Here’s what that SVG looks like in PNG form (Medium doesn’t do SVG import):

What Illustrator *should* do

1. By default, incorporate named Graphic Styles as SVG class attributes where they are present, and fallback to .a, .b, .c class names where Graphic Styles have not been utilised.
2. For those who want more control, provide something like More Options within the Export For Screens route.

I’ve raised this as a feature request to Adobe.

If I’ve missed something or got something wrong, let me know.