Lesson 2: Using scalable vector graphics CHAPTER 12 499
FIGURE 12-24 he rendered car using <T path> and <circle> elementsDisplaying SVG files by using the ![]()
element
You have just seen how you can create SVG images by writing the XML yourself, but you can
use any of the SVG editors, such as svg-edit, which is a browser-based application, available at
http://code.google.com/p/svg-edit/.
If you use an SVG editor, you typically want to externalize the SVG into its own file to make
it easier to work on the drawing rather than embedding the drawing in your HTML page in
an <svg> element. You can do this by using the <img> element and setting the source to the
location of the .svg file. In the following example, the <svg> element is cut from the HTML
page and pasted into a new file called car.svg. In the HTML page, an <img> element is added
with a reference to the car.svg file.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="Content/svg.css" rel="stylesheet" />
</head><body>
<img src="images/car.svg" />
</body>
</html>When you display the HTML page, the car is displayed. If you try to resize the page, the
image won’t resize because the settings need to be changed.