HTML and CSS Reference
In-Depth Information
1.4.4. Scalable Vector Graphics
Scalable Vector Graphics (SVG) is an XML language that allows you to create impressive
vector graphics using markup that can be styled using CSS and interacted with via the
DOM using JavaScript. One of the primary issues with bitmap graphics is that as you scale
their dimensions up, the quality of the graphic degrades and produces a “pixelated” result.
Vector graphics are constructed using math equations rather than pixels, and as a result they
can scale up to look impressive even at large sizes.
In
chapter 7
,
you'll learn how to use SVG as you build the app SVG Aliens (
figure 1.18
)
,
an exercise that illustrates how to create shapes and complex objects using SVG, imple-
ment collision detection, and understand the pros and cons of using SVG rather than the
<canvas>
element.
