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

Have you seen this? Or does that not answer your question?

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...

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.

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();

}