Game Development Reference
In-Depth Information
As a boilerplate for the following examples, we'll assume an external
svg
file, where
we'll set the canvas size to 1000 x 1000 pixels, and draw away inside it. To view the
final result of each example, you can use any one of the methods described in the
previous section on how to load an SVG image into an HTML file. the following code
snippet shows how the
svg
tag is defined:
<svg xmlns="http://www.w3.org/2000/svg"
version="1.1" width="1000" height="1000">
</svg>
Drawing a rectangle is as simple as it can get with SVG. Simply specify a width and
height to a
rect
element, and that's it. Optionally, we can specify a stroke width and
stroke color (where a stroke is the same thing as a border), along with a background
color. Take a look at the following code:
<svg xmlns="http://www.w3.org/2000/svg"
version="1.1" width="1000" height="1000">
<rect
width="400"
height="150" />
</svg>
By default, every shape is rendered at the origin (x = 0, y = 0), with no stroke
(
stroke-width = 0
), and a background color (fill) set to all black (hexadecimal
value of #000000, and RGB value of 0, 0, 0).
The circle is drawn with a
circle
tag by specifying at least three attributes, namely
an
x
and
y
position (denoted by
cx
and
cy
), along with a radius value (denoted by
the letter
r
). The center of the circle is placed at position (
cx
,
cy
), and the radius
length does not take into account the width of the stroke, if one is present.
<svg xmlns="http://www.w3.org/2000/svg"
version="1.1" width="1000" height="1000">
<circle
cx="0"
cy="0"
