The root element of an SVG document is the
<g> element groups basic shapes together.
In addition to basic shapes, SVG supports gradients, rotation, filters, animations, etc.
<svg version="1.1" baseProfile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg"> <rect width="100%" height="100%" fill="red" /> <circle cx="150" cy="100" r="80" fill="green" /> <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text> </svg>
Element declared later in the SVG file render on top of elements declared earlier.
Position elements on a coordinate grid, measured in pixels, with the top left corner as the 0,0 point of origin.
When serving SVG, a web server should send these HTTP headers:
Content-Type: image/svg+xml Vary: Accept-Encoding
Gzip compression is possible in SVG, although not all viewers support it, particularly when loading local files.
Name compressed files like
foo.svgz, and serve them with these HTTP headers:
Content-Type: image/svg+xml Content-Encoding: gzip Vary: Accept-Encoding
Basic shapes: circle, ellipse, line, polygon, polyline, rect, path.
Paths combine straight and curved lines to create complex shapes. Polylines are limited to only straight lines.
Define a path with the lone
The value of
d is a series of commands and coordinates operating line a plotter (e.g.,
M 10 10 go move to that coordinate point).
Uppercase command letters denote absolute coordinates, while lowercase command letters mean coordinates relative to the previous command.
Straight line path commands:
M x ymove to absolute coordinates x, y.
m x ymove to relative coordinates x, y.
L x ydraw a line to x, y.
H xdraw a line horizontally to x.
V ydraw a line vertically to y.
Zclose the path by drawing a line from the current position to the original point.
Curved path commands:
C x1 y1, x2 y2, x ydraws a cubic bezier curve, with tree coordinates:
x1 y1the control point for the start of the curve
x2 y2the control point for the end of the curve
x ywhere the line ends
S x2 y2, x ya shorthand for the above, following an earlier curve, where the first control point of this curve mirrors the last control point of the previous curve
Q x1 y1, x ya quadratic curve
T x ya shorthand like
S, but for a chained quadratic curve