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.