HTML and CSS Reference
In-Depth Information
elements display, you can see the full description of the available options on the website:
TR/SVG/coords.html#PreserveAspectRatioAttribute .
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.
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.
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 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-
Search WWH ::

Custom Search