HTML and CSS Reference
Save these changes and press F5 to view the web page, which should look like Figure 9-3 .
Figure 9-3. The SVG images with styling applied
Using SVG Image Files
In addition to embedding an svg element, you can also save this as a standalone image file with an .svg
extension. This file can then be used just like other graphic images. I'll show you how to create a standalone SVG
image and then use it on a page.
Creating an SVG Image
I'll first show you how to create a standalone .svg file and then use as a background image. This will also
demonstrate the scalability of SVG images.
eXerCISe 9-2. CreatING aN SVG IMaGe
In the Solution Explorer, right-click the Chapter 9 project and click the Add ➤ New
Folder links. Enter Images for the folder name.
From the File menu, select the New ➤ File links. In the New File dialog box, select
Text File from the General category, and click the open button.
Enter the following markup instructions:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.2//EN"
Copy and paste the entire svg element from the Index.cshtml file, including the
style element to the new text file.
Click the Save button. In the “Save File As” dialog box, navigate to the
Chapter 9 \Images folder and enter snowman.svg for the filename.