SVG In HTML Pages
SVG files can be embedded into HTML documents with the <embed>
tag, the <object> tag, or the <iframe> tag.
SVG in HTML Pages
Below you should see three different methods on how to embed SVG files into HTML pages.
Using the <embed> Tag
The <embed> tag is supported in all major browsers, and allows
scripting.
Note: The Adobe SVG Viewer recommends that you use the EMBED tag when
embedding SVG in HTML pages! However, if you want to create valid XHTML, you
cannot use <embed> - The <embed> tag is not listed in any HTML specification.
Syntax:
<embed src="rect.svg" width="300" height="100"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />
|
Note: The pluginspage attribute points to an URL for the plugin download.
Tip: Internet Explorer supports an additional attribute, wmode="transparent",
that let the HTML page background shine through.
Using the <object> Tag
The <object> tag is an HTML4 standard tag and is supported in all newer browsers.
The disadvantage is that it does not allow scripting.
Note: If you have installed the latest version of Adobe SVG Viewer,
SVG files will not work when using the <object> tag (at least not in
Internet Explorer)!
Syntax:
<object data="rect.svg" width="300" height="100"
type="image/svg+xml"
codebase="http://www.adobe.com/svg/viewer/install/" />
|
Note: The codebase attribute points to an URL for the plugin download.
Using the <iframe> Tag
The <iframe> tag works in most browsers.
Syntax:
<iframe src="rect.svg" width="300" height="100">
</iframe>
|
I Wish....
It would be great if we could add SVG elements directly into the HTML code,
only by referring to the SVG namespace, like this:
<html
xmlns:svg="http://www.w3.org/2000/svg">
<body>
<p>This is an HTML paragraph</p>
<svg:svg width="300" height="100" version="1.1" >
<svg:circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red" />
</svg:svg>
</body>
</html>
|
Click here to design a Stunning Flash Website for Free
Wix is a revolutionary web design tool that provides anyone with the possibility to create professional and beautiful websites for free.
With e-commerce features, search engine visibility and many more professional tools, Wix is the ultimate solution for creating a spectacular site while saving tons of money.
| 
