HTML and CSS Reference
In-Depth Information
elements display, you can see the full description of the available options on the w3.org website:
www.w3.org/
In most cases your game sets a viewport that matches the aspect ratio of the element, so you won't need to
reconfigure
preserveAspectRatio
often.
Your SVG document must have a top-level
<svg>
tag, but it can also have child
<svg>
tags that can be
transformed and moved independently.
<rect>
The
<rect>
tag defines a rectangle or a square. It takes a
width
and
height
parameter to define the size
of the rectangle along with optional
rx
and
ry
parameters to add a border radius to the rectangle. The
x
and
y
locations indicate the top-left corner of the rectangle.
<circle> and <ellipse>
The
<circle>
tag defines a circle. It takes a
cx
and
cy
parameter, which defines the center of the circle, and
then an
r
parameter that defines the radius. If you don't want a symmetric circle, you can also use the
<el-
lipse>
and define different
x
and
y
radii using
rx
and
ry
in addition to the center parameters.
<path>
The
<path>
tag is an extremely useful tag, which is the Swiss-army-knife of SVG that can be used to draw
arbitrary paths and shapes. The
d
attribute sets the path data used to draw the object. The path data is a string in
the form of commands followed by arguments. The example shown earlier to draw a triangle was as follows:
<path d="M 50 50 L 75 50 L 75 0 Z" fill="black"
stroke="#CCC" stroke-width="2"/>
The
<path>
tag uses three commands:
•
M
: For absolute move to
•
L
: For absolute line to
•
Z
: To close the path
Using a lowercase
m
or
l
means the points provided after would be relative to the previous command instead
of absolute positions (except in the case of an initial
m
, which would be interpreted as an absolute position re-
gardless). These commands draw straight lines, but you can also draw cubic Bézier curves and quadratic Bézier
curves using
C
and
S
or
Q
and
T
commands, respectively. Drawing Bézier curves by hand, however, is no fun,
so you'll most likely want to generate your path using a program such as Adobe Illustrator or the open-source
Inkscape, both of which export to SVG.
Again, for more details the w3.org specification documentation provides a comprehensive resource:
<polygon> and <polyline>
The
<polygon>
and
<polyline>
elements are much like a version of the
<path>
element limited to
straight lines. Each takes a
points
attribute that defines the set of points that makes up the shape.
<poly-