From Svg wiki

Scalable Vector Graphics is a W3C Specification for defining 2-dimensionaly graphics in XML. It is said to be like HTML for graphics. An SVG file (extension *.svg or *.svgz) can be as simple as a plain, static graphic, or it can be animated with declarative syntax, or it can be a full-blown scripted Web application.

Contents 1 Basic Concepts 1.1 Shapes 1.1.1 <rect> 1.1.2 <circle> 1.1.3 <ellipse> 1.1.4 <line> 1.1.5 <polyline> 1.1.6 <polygon> 1.1.7 <path> 1.2 Canvas 1.3 The SVG viewport, the viewBox, and coordinate systems 1.4 Style 2 Transformations

Basic Concepts

• Shapes
• Canvas
• The SVG viewport, the viewBox, and coordinate systems
• Style

Shapes

The basic shapes include:

<rect>

A <rect>is a rectangle, and its attributes include:

• x x-axis coordinate, "left" coordinate of the upper-left-hand corner of the rectangle
• y y-axis coordinate, "upper" coordinate of the upper-left-hand corner of the rectangle
• width width of the rectangle in KM
• height height of the rectangle
• rx for rectangles with rounded corners, x-axis radius of the ellipse used to round off the corners
• ry for rectangles with rounded corners, y-axis radius of the ellipse used to round off the corners

In addition to a number of attributes such as style (see the spec linked from rec for the details). To round the edges of a rectangle, set rx to something. If you omit ry but have an rx the application will set ry to the value of rx.

<circle>

A <circle>is what the name implies, and its attributes include:

• cx x-axis coordinate, "left" coordinate of the center of the circle
• cy y-axis coordinate, "upper" coordinate of the center of the circle
• r radius of the circle

In addition to a number of attributes such as style.

<ellipse>

An <ellipse>is based on a center point and 2 radii, and its attributes include:

• cx x-axis coordinate of the center of the ellipse
• cy y-axis coordinate of the center of the ellipse
• rx x-axis radius of the ellipse
• ry y-axis radius of the ellipse

In addition to a number of attributes such as style. In an ellipse the values cx and cy default to zero if not specified, while rx and ry must be specified and greater than zero.

<line>

A <line>has the following attributes:

• x1 x-axis coordinate of the start of the line
• y1 y-axis coordinate of the start of the line
• x2 x-axis coordinate of the end of the line
• y2 y-axis coordinate of the end of the line

In addition to a number of attributes such as style: Lines have stroke, but no fill. The a value of any non-specified line attribute defaults to zero.

<polyline>

A <polyline>is a set of connected straight line segments and has the following attributes:

• points a list of points (representing a series of lines, i.e. x1, y1, x2, y2, x3, y3...)

In addition to a number of attributes such as style.

<polygon>

A <polygon>is a closed shape made up of a set of line-segments, and has the following attributes:

• points a list of points (representing a series of lines, i.e. x1, y1, x2, y2, x3, y3...)

In addition to a number of attributes such as style.

<path>

A <path>is a complex shape made up of a set of line-segments, and has the following attributes:

• d a parameterized command, each with its own list of coordinate points; for more detail, see Path

In addition to a number of attributes such as style.

Canvas

The SVG Canvas is discussed in the Coordinate Systems, Transformations and Units section of the SVG Spec. It is the "space where the SVG content is rendered."

The SVG viewport, the viewBox, and coordinate systems

This is explained in the SVG Spec in the at Coordinate Systems, Transformations and Units.

To compute coordinates function of viewBox, currentScale and currentTransform : pilat.free.fr.

Style

Styling in SVG should be familiar to those who've worked with CSS, and in fact CSS can be used with SVG. This is well explained in Section 6 of the SVG spec.

Transformations

The transform attribute is described in Section 7 of the SVG Spec. It is also discussed in this wiki on the transforms page.