Game Development Reference
In-Depth Information
}
</style>
<circle
cx="75"
cy="75"
r="50"
stroke="black"
stroke-width="2"
fill="red"></circle>
</svg>
How to use it
Although it is highly recommended that you use a professional vector editor software
when composing complex SVG graphics, such as Inkspace or Adobe Illustrator, this
section will walk you through the basics of SVG composition. This way you can draw
basic shapes and graphs by hand, or at least be familiar with the fundamentals of
SVG drawing.
Remember that whether you are importing your SVG graphics into your HTML
through any of the methods described previously, drawing them inline, or even
creating them dynamically through JavaScript, you will need to include the XML
namespace to the root
svg
element. This is a common mistake made by newcomers
to SVG, which may result in your graphics not showing up on the page.
The primitive shapes we can draw with SVG are rectangle, circle, ellipse, line, poly-
line, polygon, and path. Some of these primitives share attributes (such as width and
height), while others have attributes that are unique to that shape (such as the radius
of a circle). Everything you see in an SVG graphic is a result of these primitives used
together in some combination.
Everything in SVG is drawn inside an SVG canvas, which is defined by the parent
svg
tag. This canvas is always rectangular, even though the shapes inside it can be
of any shape that can be created by any of the primitives. Also, the canvas has its
own coordinate system, which places the point origin at the top left corner of the can-
vas. The width and height of the canvas (determined by the parent
svg
tag) determ-
ines the dimensions of the drawing area, and all the (x, y) points reference inside the
canvas (by all the child elements of
svg
) are relative to that point.
