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 SVG Parameter Variables Specification would do what you want but it's unlikely ever to be completed, let alone implemented by UAs. Instead SVG looks like it will move towards attributes being CSS parameters at which point you could use CSS Calc.

There is a light at the end of the tunnel for you though as this specification is already implemented by a javascript shim so if you use that you have a ready made drop in library that does what you want.

The syntax looks like this...

<object type="image/svg+xml" data="map.svg">
  <param name="x" value="125" />
  <param name="y" value="108" />
</object>

or

<object type="image/svg+xml" data="map.svg?y=103&x=523">
</object>

usage looks like this...

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 320">
<script type="text/ecmascript" xlink:href="ref2.js" />
<defs>
    <ref id="paramX" param="x" default="-10"/>
    <ref id="paramY" param="y" default="-10"/>
</defs>

<circle id="coord" cx="url(#paramX)" cy="url(#paramY)" r="5" fill="tan" stroke="brown" stroke-width="3" />

The library can be obtained from here

Answer 2

The simple answer is no.

You can define some things such as gradients, masks, patterns and filters relative to the object they are being applied to. You can also define some elements relative to the size of the parent SVG. However you can't define the shape of one element relative to another element. There is no such thing as variables in SVG.

What you can do is dynamically generate (or modify) an SVG using Javascript.

Answer 3

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:

<object type="image/svg+xml" data="yourimage.svg?fill=#FF0000"></object>

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.