HTML and CSS Reference
In-Depth Information
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
1.
In the Solution Explorer, right-click the Chapter
9
project and click the Add ➤ New
Folder links. Enter
Images
for the folder name.
2.
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.
3.
Enter the following markup instructions:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.2//EN"
"http://www.w3.org/Graphics/SVG/1.2/DTD/svg12.dtd">
4.
Copy and paste the entire
svg
element from the
Index.cshtml
file, including the
style
element to the new text file.
5.
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.
