Question

I currently have a line filled in SVG like this:

<path d="M 0   45
         L 100 45
         L 100 55
         L 0   55
         Z" fill="gray" />

I would like to define the thickness as a variable instead of hardcoding so that the definition is something along the lines of:

<path d="M 0   50 - t
         L 100 50 - t
         L 100 50 + t
         L 0   50 + t
         Z" fill="gray" />

with t = 5.

Is this possible in a SVG document?

Answer 1

SVG itself has no such variables.

You can change the attributes of SVG elements clients-side (with JavaScript). A more robust and simple way is to generate the finished SVG (without variables) on the server, where you can use variables in the server-side programming language of your choice.