| Scalable Vector Graphics | |
|---|---|
 | |
| Filename extension | .svg |
| Internet media type | image/svg+xml |
| Developed by | W3C + |
| Initial release | September 4, 2001 |
| Latest release | 1.2T |
| Type | Vector graphics file format |
| Standard | SVG 1.1 SVG Tiny 1.2 |
| Website | Scalable Vector Graphics (SVG) |
| Compressed SVG | |
|---|---|
| |
| Filename extension | .svgz |
| File formats category - | |
Scalable Vector Graphics (SVG) is an XML format for rendering two-dimensional vector graphics. Aside from being a graphics format, SVG also offers interactivity, similar to HTML's image map functionality. It also has some animation functionality.
Specification[]
Document type definition[]
The DTD for an SVG image is:
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
Data types[]
Defined data types for an SVG document are:
- integer
- Basically a long integer. Ex. 9, -2.
- number
- Single-precision real number value. (May be in either decimal or scientific notation) Ex. 6.1, -6E-5.
- length
- A measurement of length. A number with an optional unit. May also be a percentage. Ex. 12px, 10pt, 1in, 20, 90%.
- coordinate
- A measurement of length from the origin.
- list (of x)
- A list of values.
- number-optional-number
- A special list of numbers with one or two elements.
- angle
- An angle measure with an optional unit (deg, rad, grad).
- color
- An sRGB color. May be a color keyword or number specification.
- paint
- Type of paint to use.
- percentage
- A percentage used as reference to another measure such as length.
- transform-list
- uri
- A Uniform Resource Identifier.
- frequency
- Used in aural CSS. A number followed by either Hz (hertz) or kHz (kilohertz).
- time
- A measure of time. A number followed by either ms (millisecond) or s (second).
Document structure[]
An SVG image must be a valid SVG document with the "<svg>" root element, which has the following attributes:
| Attribute name | Type | Description |
|---|---|---|
| xmlns[:prefix] | Identifies the XML namespace | |
| version | number | The SVG version. There are currently two versions, 1.0 and 1.1. |
| x | coordinate | The x-coordinate of the region to render an embedded svg element. Default is 0. Not useful for the outermost (e.g. the root svg) svg element. |
| y | coordinate | The y-coordinate of the region to render an embedded svg element. Default is 0. Not useful for the outermost (e.g. the root svg) svg element. |
| width | length | The proposed width of the document. For embedded svg elements, the width of the rectangle to render the element. |
| height | length | The proposed height of the document. For embedded svg elements, the height of the rectangle to render the element. |
The <g> element enables grouping of different items in the document.
Paths[]
Paths are shape outlines which can be filled, stroked or used as clipping path. Paths are defined by the <path> element.
Path data[]
Path data has its own syntax in a d attribute. Example:
<path d="M 50 50 L 90 90 L 0 100 z"/>
- Move to (moveto)
A move to command starts a new point. The effect is as if the "pen" were lifted and moved to a new location. An uppercase "M" is absolute, a lowercase "m" is relative. At least one coordinate pair (separated by a space) is required. When more than one coordinate pairs are represent, those will represent implicit line to commands. Multiple subpaths may be specified by specifying multiple move to commands.
- Close path (closepath)
A close path command closes the current path (or subpath) and creates a line from the current point to the current subpath's initial point. Both uppercase and lowercase "z"s specify a close path command.
- Line to (lineto, horizontal lineto, vertical lineto)
A line to command draws a line from the current point to a new point. "L" (absolute) and "l" (relative) specifies a line to command with coordinate pairs; at least one coordinate pair (separated by a space) is required. "H" (absolute) and "h" (relative) specifies a horizontal line to command with an x-coordinate. "V" (absolute) and "v" (relative) specifies a vertical line to command with a y-coordinate. More than one line to commands draw a polyline.
- Cubic Bézier curve commands (curveto, smooth curveto)
"C" (absolute) and "c" (relative) specify a cubic Bézier curve from the current point of the current path or subpath to the third coordinate using the first coordinate as the control point at the beginning of the curve and the second coordinate as the control point at the end of the curve; three coordinate pairs are used and at least one is required. More than one group of coordinate pairs specify a polybézier.
"S" (absolute) and "s" (relative) is similar to the above, except that he first control point is assumed to be the reflection of the second control point on the previous command relative to the current point. There are only two coordinate pairs in this command.
Basic shapes[]
These are basically the same as a path that would draw the specified shape.
- Rectangle
Rectangles and rounded rectangles are specified using the <rect> element. Example:
<rect x="100" y="100" width="100" height="50" fill="blue" rx="3" />
- Circle
Circles are defined using a center point and a radius with the <circle> element. Example:
<circle cx="200" cy="200" r="20" />
- Ellipse
Ellipses are defined by its center point and two radii with the <ellipse> element. Example:
<ellipse cx="200" cy="200" rx="50" ry="150" />
- Line
Lines are defined using the <line> element. Example:
<line x1="100" y1="100" x2="200" y2="250" />
- Polygon
Custom polygons are defined using the <polygon> element. These are defined using a space-separated list of points in the polygon. Example:
<polygon points="100,100 100,200 300,400 200,90" />
Text[]
Text can be included using the <text> element. Text is placed in the content of the element.
Painting[]
SVG paths or text may be stroked, filled or outlined using a solid or gradient color or a pattern with any level of transparency. Colors may also be inherited from the parent using "currentColor". SVG uses the sRGB color space by default.
Example[]
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1" xmlns="http://wwww.w3.org/2000/svg">
<circle cx="200" cy="300" r="70" fill="black" />
</svg>