Game Development Reference
In-Depth Information
Listing 10-1.
SVG image source with gradient, animated ellipse, and image
<svg version="1.1" width="320" height="320" xmlns="
http://www.w3.org/2000/svg">
<defs>
<radialGradient id="planet">
<stop offset="0%" stop-color="rgb(0, 0, 255)" />
<stop offset="100%" stop-color="rgb(0, 0, 125)" />
</radialGradient>
</defs>
<ellipse fill="url(#planet)" stroke="#000" cx="256" cy="256" rx="50%" ry="50%">
<animate attributeName="rx" values="10%;20%;10%" dur="2s"
repeatCount="indefinite" />
<animate attributeName="ry" values="10%;20%;10%" dur="2s"
repeatCount="indefinite" />
</ellipse>
<image x="110" y="110" width="100" height="82" xlink:href="ship.png">
<animate attributeName="x" values="25%;50%;25%" dur="2s"
repeatCount="indefinite" />
<animate attributeName="y" values="25%;50%;25%" dur="2s"
repeatCount="indefinite" />
</image>
</svg>
Figure 10-1 shows what a small image with several primitives looks like.
Figure 10-1.
SVG image with gradient, animated ellipse, and image
What benefits does SVG offer?
Vector graphics are easily scalable with no loss in quality, which is very convenient when building
interfaces.
The format supports animation natively and through JavaScript, making the development process
simple and speedy.
An SVG object model allows assigning familiar events to each object. To obtain similar
functionality on canvas, you need to write extra logic for matching object coordinates to click
coordinates.
