Defining Variables in SVG

Question

I currently have a line filled with SVG as follows:

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

I would like to define thickness as a variable instead of hard coding, so that the definition is something like:

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

a t = 5.

Is this possible in an SVG document?

Answer 1

SVG itself does not have such variables.

You can change the attributes of SVG elements on the client side (using JavaScript). A more reliable and simple way is to create a ready-made SVG (without variables) on the server, where you can use the variables in the programming language on the server side of your choice.