Nice idea, but I would much prefer if Illustrator used the swatch color names in the SVG as they are defined, rather than naming them sequentially such as .cls-1, .cls-2 etc as it does at the moment.

If there exists and option to do this now, it should be made much clearer how to do it.

I would like to have a global set of colors by name defined from the swatches, so they may be re-colored by a development environment to make app theme creation much easier by styling SVG images for icons.

Sarah Dayan published yesterday an article about CSS Custom Properties in SVG multicolor icon sets .
It includes some details about syntax.

https://medium.freecodecamp.org/lets-make-your-svg-symbol-icons-multi-colored-with-css-variables-cddd1769fca4

Hi Dirk,

exporting the swatch-book in an extra class doesn't seem to be necessary.
It doesn't do anything inside the css.

You could include the swatches inside a :root like this:

<style>
:root{
--Circle-background: #6cb674;
--Circle-foreground: #993467;
}
</style>

This way, you could omit the fallback-values inside the var-statements. But it could have unintended consequences, since swatches would override any variables in the surrounding document.

–––––

I've simplified the code sample a bit for the purpose of this thread: https://codepen.io/g12n/pen/NyqMRe/

I guess we want support all three styling options for SVG Export.

<!--Styling: Inline-Style -->
<svg viewBox="0 0 60 60">
<circle cx="30" cy="30" r="30" style="fill: var(--brand-color, #0af)" />
</svg>

<!--Styling: Presentation Attributes -->
<svg viewBox="0 0 60 60">
<circle cx="30" cy="30" r="30" fill="var(--brand-color, #0af)"/>
</svg>

<!--Styling: Internal CSS -->
<svg viewBox="0 0 60 60">
<defs>
<style>
.cls-1{
fill: var(--brand-color, #0af);
}
</style>
</defs>
<circle cx="30" cy="30" r="30" class="cls-1"/>
</svg>

I am still not sure about the appropriate fallback-methods for older browsers.
Especially for the styling Presentation Attributes I am not sure.

------

For the Scope-Question: Yeah, I don‘t think Inkscape and other tools support Global Swatches at all.

One of my concrete Use-Cases is switching Color-Modes on different media. E.G. when using a tool like PDF-Reactor, to create Print-Ready PDF from HTMl-Ressources. http://www.pdfreactor.com/

PDF-Reactor supports CSS Custom Properties, CMYK and Spot-Colors.

Hi Michael,

Thanks a lot for submitting this request here. I did experiment a little bit with your idea. Here an example to continue the discussion:

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg&quot; preserveAspectRatio="none" width="612" height="792" viewBox="0 0 612 792">
<defs>
<style>
.swatches {
--Circle-background: #6cb674;
--Circle-foreground: #993467;
}

.cls-1 {
fill: var(--Circle-background, #6cb674);
}

.cls-1, .cls-2 {
stroke: #231f20;
stroke-miterlimit: 10;
}

.cls-2 {
fill: var(--Circle-foreground, #993467);
}
</style>
</defs>
<title>Untitled-2</title>
<ellipse class="cls-1" cx="244" cy="251" rx="110" ry="100"/>
<circle class="cls-2" cx="364.5" cy="359.5" r="120.5"/>
</svg>

For this example I added a couple of colors to a swatch book. In the document itself I just used the colors with the custom name: "Circle background" and "Circle foreground".

Adding the entire swatch book doesn't seem to be meaningful in the majority of use cases. Would you disagree?

The issue with exporting custom properties is the limited scope of this features. At this point, only Web browsers do support custom properties and no authoring tool. This seems to be limiting for the round-tripping experience of customers initially.

Greetings,
Dirk