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>
|
Whether you're new to XML or already an advanced user,
the user-friendly views and powerful entry helpers,
wizards, and debuggers in XMLSpy are designed to meet your XML
and Web development needs from start to finish.
New features in Version 2010!
- XML editor
- Graphical XML Schema / DTD editors
- XSLT 1.0/2.0 editor, debugger, profiler
- XQuery editor, debugger, profiler
- XBRL validator, taxonomy editor, taxonomy wizard
- Support for Office Open XML (OOXML)
- Graphical WSDL 1.1/2.0 editor & SOAP debugger
- JSON editing & conversion
- Java, C#, C++ code generation
- And much more!
Download a free trial today!
|
|
|
| 
