Use constants for colors in vector images? (SVG)

Recommended Posts

Posted (edited)

Hi

I have around 1000 vector images (*.SVG). They have colors specifid in each one, but i would like to set up a "master-file" that specifies a couple of color-constants, so it's easier to change between colors.  This would need the image files to "look" at that master file.

Currently (some of the content of ) an image file looks like this:

<ellipse id="Circle" fill="#5389A4" cx="12" cy="12" rx="10" ry="10"/>

I would like to set up a "master-file" like

define grey1 = #606060
define grey2  =#909090

The image file would then read something like:

<ellipse id="Circle" fill="grey1" cx="12" cy="12" rx="10" ry="10"/>

Is that doable?

Thanks
Erik

Edited by suliman

Share this post


Link to post
Share on other sites

Im not sure.

Could a "style sheet" be placed in the folder and all the images would automatically "look" at this to figure out their colors? The images are used by another application, not office or anything that might easily use style sheets...

Share this post


Link to post
Share on other sites

Sorry don't know about that, but I'm no expert so there might be a way to do it. As a last resort you could write a small program to copy paste those colors to every .svg file, not an ideal solution of course.

Share this post


Link to post
Share on other sites

It is possible to use CSS with SVG. I have written about my experiences with SVG and CSS in my blog: Automatically Generating Sprites for a Space Shooter. Depending on the workflow for the SVGs, you might consider using an external sytlesheet over injecting an inline style.

In any case, you will need to transform your existing SVGs into ones that use your stylesheet. How you decide to proceed from here again depends on the workflow for the SVGs. If it’s a one–time transformation from hardcoded attributes to CSS styles, then I recommend writing a one–off script to batch process each file, transforming matching attributes of each element to CSS attributes. For example, a minimal proof of concept in PowerShell (untested):

ls *.svg |% {

[xml]$svg = get-content -raw $_;
foreach ( $n in $svg.SelectNodes('//[@fill="#5389A4"]') ) {
  $n.removeAttribute('fill');
  $n.setAttribute('class', 'custom-fill');
}
$svg.save();

}

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now