In the following example:
  • The area used by for the svg object will be a rectangle of 200 pixels by 200 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 center of the circle is also in the center of the svg area as defined by the circle elements cx and cy attributes, the center coordinates being (500, 500).
  • The radius of the circle being defined by the r attribute of the circle element, and has a value of 200.
  • The circle is filled with a solid color of red as defined by the fill attribute.
  • The circle is outlined in blue with a line width of 10, as defined by the stroke and stroke-width attributes. The width of 10 is not pixels, but is 10 within the user coordinate system. In this case the width in pixels would be approximately (10 / 1000) * 200 pixels or two pixels.