In my opinion, the most exciting usage of SVG is as an inline element in an HTML document. While you will learn about SVG images as a separate file format and all the ways that SVG images can be used to develop modern web apps, the largest portion of this book will show you ways to interact with SVG elements embedded directly into the document. This is important because it is not possible to animate or otherwise manipulate the individual elements of an externally-referenced SVG file; this is only possible if the SVG elements are available directly (via the Document Object Model (DOM)) on the page.
The following example shows a simple inline SVG image with three circles and teases one of the most powerful tools you have when working with inline SVG: CSS! CSS can be used to style SVG elements in the same way that you can style regular HTML elements. This opens up a world of possibilities. The properties used here are probably new to you since they are SVG-specific, but just like the background-color or border properties you're used to, you can adjust the basic look and feel of SVG elements with CSS. In this next example, the CSS defines a default fill color for all circles, adds a border to the second circle, and then changes the fill color for the third circle. If you're not already scheming of ways to use CSS to manipulate SVG elements, rest assured you'll have plenty of ideas after reading Chapter 5, Working with SVG and CSS:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Mastering SVG - Using SVG images in CSS</title>
<style type="text/css">
circle {
fill: rgba(255,0,0,1);
}
.first {
opacity: .5;
}
.second {
stroke-width: 3px;
stroke: #000000;
}
.third {
fill: rgba(0,255,0,.75);
}
</style>
</head>
<body>
<svg width="400" height="250" viewBox="0 0 400 250" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="25" class="first"></circle>
<circle cx="200" cy="100" r="25" class="second"></circle>
<circle cx="300" cy="100" r="25" class="third"></circle>
</svg>
</body>
</html>
Opening a browser will show the results of all that CSS:
