Jump to content
  • Advertisement
suliman

Use constants for colors in vector images? (SVG)

This topic is 398 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

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 this post


Link to post
Share on other sites
Advertisement

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

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

We are the game development community.

Whether you are an indie, hobbyist, AAA developer, or just trying to learn, GameDev.net is the place for you to learn, share, and connect with the games industry. Learn more About Us or sign up!

Sign me up!