Game Development Reference
In-Depth Information
<circle
cx="75"
cy="75"
r="50"
stroke="black"
stroke-width="2"
fill="red"></circle></svg>
</body>
While this may seem easy enough for a simple red circle, once the image gets to be
more complex, it gets a bit hard to manage all of it in one file. Thus, it may be more
convenient to simply save all of the SVG files externally, then import them individu-
ally. This approach also lends itself much better to resource sharing and reuse, as
we can import the same graphic in multiple files without having to copy the entire file
every time.
<body>
<object type="image/svg+xml"
data="red-circle.svg"
width="100" height="100">
</object>
<img src="red-circle.svg" width="100"
height="100" />
</body>
One final note about SVG before we dive into some hands on examples, is that
every node inside the parent
svg
tag (including that parent node) is managed by the
browser. Thus, every one of these nodes can be styled through CSS. If that's not
enough, every node inside an SVG graphic can have browser events registered to
them, allowing us to interact with the graphic and all of its individual components the
same way as most other DOM elements. This makes SVG a very dynamic, highly
flexible graphics format.
If the SVG instance is inlined with the HTML, then we can simply get a direct ref-
erence to the parent svg node, or to any child node direct though JavaScript. Once
we have that reference, we can act on the objects just like any other DOM elements.
