Skip to content
Translate Ideas and Comments
Choose language:
There was an error during translation

Michael Gehrmann

My feedback

1 result found

  1. 5 votes

    We're glad you're here

    Please sign in to leave feedback

    Signed in as (Sign out)

    We’ll send you updates on this idea

    How important is this to you?

    We're glad you're here

    Please sign in to leave feedback

    Signed in as (Sign out)
    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