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>
|
Need an easy way to get data into XML, or transform XML to another format?
MapForce lets you map XML data to/from any combination of XML, database, flat file, Excel 2007, XBRL, or Web services data.
Then it transforms data instantly or auto-generates royalty-free data integration code for recurrent conversions.
Download a free, fully functional 30-day trial to experience the following features:
- Easy-to-use, graphical data mapping interface
- Instant data transformation
- XSLT 1.0/2.0 and XQuery code generation
- Java, C#, and C++ code generation
- Advanced data processing functions
- Support for all major relational databases including SQL Server, IBM DB2, Oracle, and more
- Visual Studio & Eclipse integration
Download a fully-functional trial today!
|
|
|
| 
