How do I define or reference a variable in SVG?

Question

Might be you do not need variables for static images but this would be easier to inspect them and see related parts when everything is defined in terms of variables, IMO. It

Answer 1

The library referenced by Robert gave me issues, so I wrote a more simple function of my own, which seems to work.

Add this into a .js file and include at the bottom of your SVG, inside the svg tag.

var svgns = "http://www.w3.org/2000/svg";
var xlinkns = "http://www.w3.org/1999/xlink";

GetParams();

function GetParams()
{
    var sParams = document.defaultView.location.href.split("?")[1].split("&");
    var oObjects = document.getElementsByClassName('Dynamic');


    for (i = 0; i < sParams.length; i++) {

        var sName = sParams[i].split('=')[0]
        var sValue = sParams[i].split('=')[1]

        for (j = 0; j < oObjects.length; j++) {
            oObjects[j].setAttribute(sName, sValue)
        }

    }
}

Then any tags inside the SVG you want to be affected by the parameter, such as polygons, paths, circles etc, add 'Dynamic' as a class name.

You can then pass parameters through in the querystring of the object source:

This can of course be modified so different classes can be referenced if you have different parameters to send in, but for me it works fine as I only require fill changes.