How to dynamically render paths in different colors

Aug 25, 2009 at 10:58 PM

I'm creating a diagramming application which uses SVG. The svg images have been created with Inkscape and already have default colors etc. so they can be viewed in any SVG viewer.

Most of the shapes and symbols that can be put on a diagram need to be configurable in strokeColor, fillColor, and line/path thickness.


How can I  access the SVG elements from within my application so I can dynamically change these properties? I can only think of some equivalent of getElementByID() but any suggestion is welcomed :)


Thanks in advance,


Aug 26, 2009 at 12:13 AM

OK, so I figured I could use SVG parameters to handle the configurations... but how can I access the parameters from C#?

May 5, 2010 at 3:50 PM
Hi, did you ever figure the best way to do this? I am trying to do the exact same thing - modify properties at run-time from an SVG file originally created in inkscape. Thanks!
May 5, 2010 at 9:58 PM

Sadly no. If it's supported by the SVG spec in one way or another I couldn't find it which is lame because if it's supported in SVG it should be trivial to implement.

May 5, 2010 at 10:35 PM

Oh geez, sorry hannson I totally missed this thread! It's so old, too.... I've been pretty rubbish at keeping track up discussions here. I'm very sorry about that.

There is a way of doing what you want using this library using XML entities. For example, you can use "&firstColour;" and another called "&secondColour;" in your code and define these at the top of your SVG file to ensure it will work in Inkscape & other viewers. You can then replace those entity values with your own values at runtime using this library and then render out the updated image.

The other way is to go through the "DOM" after the SVG file has been loaded and use GetElementById to find a specific element and then update its style values (there's already another thread on doing this, which I still need to provide a proper example for).

I'll also work on getting you an example of using entities to dynamically replace values. I don't think it requires much work to do.

May 6, 2010 at 10:52 AM

hannson, I've updated the thread I mentioned with one method of dynamically changing styles but I did mention another one to do with XML entities if you're interested in another method.

Changeset 48302 has a new Entities sample added that shows how to use entities to quickly and easily change SVG styling at runtime. To sumarise it here all you need to do is create a file that used entities of your own choosing (e.g. &entity1;) in an SVG file like so:

<?xml version="1.0"?>
<svg xmlns="" width="800" height="800">
  <g style="fill-opacity:0.7;">
    <circle cx="6.5cm" cy="2cm" r="100" style="&entity1;" transform="translate(0,50)" />
    <circle cx="6.5cm" cy="2cm" r="100" style="&entity2;" transform="translate(70,150)" />
    <circle cx="6.5cm" cy="2cm" r="100" style="fill:green;" transform="translate(-70,150)"/>

(Note: Entities must be an entire attribute value. They cannot be mixed in with other strings)

With that done you can specify the entity values in your code at runtime:

            string filePath = Path.Combine(AppDomain.CurrentDomain.BaseDirectory, @"..\..\sample.svg");

            var sampleDoc = SvgDocument.Open(filePath, new Dictionary<string, string> 
                    {"entity1", "fill:red" },
                    {"entity2", "fill:yellow" }

            sampleDoc.Draw().Save(Path.Combine(AppDomain.CurrentDomain.BaseDirectory, @"..\..\sample.png"));


Ultimately I'd probably use the method described in the other thread to update values. This method was developed more for the web (to allow ?entity1=fill:red&entity2=fill:yellow in the querystring).

I can't imagine this is too useful for you now since it's been such a long time since your initial request, but at least others might be able to pick on this. Again, if you're reading this, I apologise for the tardy response times.


Dec 13, 2015 at 2:51 PM
how to fill it by image in code behind ?