Skip to content

Michael Gehrmann

← Adobe Illustrator

My feedback

1 result found

  1. SVG export option to export global Color Swatches as CSS Custom Properties

    5 votes

    We're glad you're here

    Please sign in to leave feedback
    Signed in as (Sign out)
    Close
    Close

    We’ll send you updates on this idea

    4 comments  ·  Illustrator (Desktop) Feature Requests » File Save, Import and Export  ·  Admin →
    How important is this to you?

    We're glad you're here

    Please sign in to leave feedback
    Signed in as (Sign out)
    Close
    Close
    An error occurred while saving the comment
    Michael Gehrmann commented  · 

    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

    An error occurred while saving the comment
    Michael Gehrmann commented  · 

    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.

    Michael Gehrmann supported this idea  · 
    Michael Gehrmann shared this idea  · 

Feedback and Knowledge Base

(thinking…)