svg Example

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.