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 ellipse is also in the center of the SVG area as defined by the ellipse elements cx and cy attributes, the center coordinates being (500, 500).
The radius of the ellipse along the x-axis is defined by the attribute rx, which has a value of 100 in user coordinates.
The radius of the ellipse along the y-axis is defined by the attribute ry, which has a value of 300 in user coordinates.
The ellipse is filled with a solid color of red as defined by the fill attribute.
The ellipse 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.