# Use constants for colors in vector images? (SVG)

## Recommended Posts

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

}

## Create an account

Register a new account

• 48
• 12
• 10
• 10
• 9
• ### Forum Statistics

• Total Topics
631375
• Total Posts
2999659
×