HTML and CSS Reference
In-Depth Information
Chapter 9
Scalable Vector Graphics
In this chapter I'll show you how to use scalable vector graphics (SVG) in an HTML5 web application using Visual
Studio, ASP.NET MVC, and SQL Server. There are a lot of really cool things that you can do with SVG. I've picked
out a fun demonstration that can be easily applied to many business applications. But first, let me give you an
introduction to what SVG is.
Most people think of a graphic element as some form of bitmap; an array of rows and columns of pixels, and
each pixel is assigned a specific color. In contrast, however, vector graphics express an image as a collection of
formulas. For example, draw a circle with a center at point x,y and a radius r. More complex images are defined
as a collection of graphic elements including circles, lines, and paths. While the rendering engine will ultimately
determine the specific pixels that need to be set, the image definition is based on a formula. This fundamental
difference provides two significant advantages to using vector graphics.
First, as its name suggests, vector graphics are scalable. If you want to expand the size of the image, the
rendering engine simply recalculates the formula based on the new size and there is no loss of clarity. If you
zoom in on a bitmap image you'll quickly start to see graininess and the image becomes blurry.
Secondly, each element in the image can be manipulated independently. If there are several circles in the
image, for example, you can highlight one by simply changing the color of that image. Since vector graphics are
formula based, you can easily adjust the formula to modify the image. What makes this particularly useful is
that these elements can be styled using CSS, employing the powerful selectors and formatting capabilities that I
showed you in Chapter
4
.
Introducing SVG
You'll begin by creating a page that uses simple geometric shapes to draw a picture. Then you'll apply styles to
these shapes using CSS. I'll show you how to save these markup elements in an
.svg
image file. This image file
can be used just like other image files such as .
jpg
or .
png
files.
Creating the Sample Project
You'll first need to create a Visual Studio project that is similar to ones you created previously. This will use the
Basic MVC4 project template.
eXerCISe 9-1. CreatING the VISUaL StUDIO prOJeCt
1. Start Visual Studio 2012. In the Start Page, click the New Project link.
2. In the New project dialog box, select the “ASP.NET MVC4 Web Application” template.
Enter the project name
Chapter
9
and select a location for this project as shown in
Figure
9-1
.
