Inkscape.org
Beginners' Questions Assign a color to a variable
  1. #1
    Ryan Schultz Ryan Schultz @Theoryshaw

    Is it possible to assign a color to a variable?  Call is 'fancy_color', for example. 

    And then assign that 'fancy_color' to objects.

    And then, if the future, if the color that's assigned to the 'fancy_color' variable changes, all the objects that were assigned that color variable will change as well. 

     

  2. #2
    inklinea inklinea @inklinea⛰️
    👍*

    Inkscape does have a CSS editor under Object>Selectors and CSS.

    Once you have made a new class, you can assign that to the object. Changing the class will be reflected in all objects with that class.

    Of course as with all html / svg you have to watch for conflicts between inline attributes / inline styles and classes.

    Inkscape has a search and replace function too, you can for example search for all circles or if you assign an inkscape label via Object>properties. That can be later used in a search.

    You can also group objects, or put them in layers together. There are lots of ways to do it.

    However, in reference to you specific enquiry about 'variables', that is usually done via javascript. It is very easy to do, either from the HTML document or in the SVG, assuming javascript is allowed by the environment displaying the SVG. Also there are settings in the SVG which restrict or allow scripts.

    I've uploaded an svg with classes applied to sets of objects.

    Drawing
    Css
  3. #3
    Xav Xav @Xav👹
    🙌

    It depends on how and where you want to update your 'variable'.

    If you just want something within Inkscape to let you set named colours for objects, and then change the named colour across all objects at once, look into 'swatches'. It's the 7th button in the fill & stroke dialog (just to the left of the question mark), and lets you define named colours to use within your file.

     

    If you want something more complex, for use in an interactive SVG file in a web browser, for example, there are other options, but their support in Inkscape is generally not great. To extend what @inklinea said, CSS does have variables (technically referred to as 'custom properties') which are probably the best solution in a modern browser/JS environment, but as far as I'm aware Inkscape has no support for them, and no plans to add support.

    SVG does also support one implicit variable: the "currentColor" keyword. If you use this inside your file (e.g. when setting a fill or stroke colour), and load the file into a web browser via an appropriate mechanism, the value of the keyword will be calculated from the 'color' CSS property at that point. It's mostly useful for monochrome icon designs that need to reflect the page they're loaded into.

    There are other tricks with JS and/or CSS to let you swap colours out dynamically depending on the URL used to access the file, for example, but it's not worth going into detail about those unless that's specifically the sort of thing you're looking for.