HTML and CSS Reference
In-Depth Information
<path d=”M8 16L776 0” fill-rule=”nonzero”
stroke=”blue” stroke-width=”5” stroke-
linejoin=”round” stroke-linecap=”butt”>
</path>
</svg>
A closing SVG element completes your code. Your drawing can
now be saved and added to a web page.
When you have completed an SVG drawing there are several
ways in which you can add SVG images to your web page. Unlike
JPEG, GIF, and PNG files, you cannot use the IMG element to add
an SVG drawing to your web page. You do, however, have three
alternative methods.
The first is to use the OBJECT element:
<object data=”star.svg” width=”300” height=”800”/>
The OBJECT tag has several attributes. The most important is
the data attribute that references the location of the SVG file.
The width and height attributes define the space used on the
screen for the SVG drawing.
A second method you can use to add SVG images to your web
page is through the use of the IFRAME element. Typically, you use
the IFRAME element to load an external web page, but you can also
load an SVG image directly into your web page. Here is an example:
<iframe src=”star.svg” width=”300” height=”800”></
iframe>
These two methods for embedding SVG images into your
web page are relatively easy to use and are not much more
complicated to use than the IMG element.
The third method of adding SVG images to a web page is to
insert the SVG XML directly into the HTML code itself. The fol-
lowing code is HTML saved as a web page. There is no need to
use separate SVG files in this example.
<html>
<head>
<title>SVG embedded inline in XHTML</title>
</head>
<body>
<h1>SVG embedded inline in XHTML</h1>
<svg xmlns=”http://www.w3.org/2000/svg”
width=”300” height=”800”>
<path
d=”M240 148L298 148L316 96L334 148L392 148L345
180L363 232L316 200L269 232L287 180Z”
fill-rule=”nonzero”
Search WWH ::




Custom Search