svg Example

In the following example:

The area used by for the svg object will be a rectangle of 300 pixels by 300 pixels (see the svg element's width and height attributes).
The user coordinates of this rectangle will be defined by a rectangle from point (0, 0) and (1000, 1000). See the svg element's viewBox attributes.
The rectangle will be drawn from user coordinates (100, 100) with a width and height of 800.
The gradient starts from user point (0, 500) and stretches to user point (500, 1000).
The gradient starts on the left at point (0, 500) as red (see stop offset="0%") and transitions to the middle point (500, 500) as white (see stop offset="50%") and then transitions to point (1000, 500) as blue (see stop offset="100%").
The rectangle is outlined in black with a line width of 5, as defined by the stroke and stroke-width attributes. The width of 5 is not pixels, but is 5 within the user coordinate system. In this case the width in pixels would be approximately (5 / 1000) * 300 pixels, which will be approx 2 pixels.