如何在html中使用svg

最新推荐文章于 2024-08-28 07:00:00 发布

CodeMasterShiller

最新推荐文章于 2024-08-28 07:00:00 发布

阅读量2.8k

点赞数

文章标签： html xhtml mozilla validation object namespaces

本文链接：https://blog.csdn.net/dux003/article/details/5459540

版权

http://wiki.svg.org/SVG_and_HTML

SVG and HTML

Note:Someone please update this with current information about Mozilla, Safari, etc.

[ edit]

How do I embed an SVG image in an HTML page?

There are several ways, and it depends on what target browsers your page is aimed at.

the <object> tag
the <embed> tag
the <iframe> tag
Inline SVG

For content that displays in existing browsers, use an object element wrapped around an embed. (This is no good if you require strict validity (in the XHTML sense); see below for some ideas about that.)

Why object and embed?

The object tag is defined in HTML 4. Microsoft Internet Explorer 4.x, 5.x, and modern browsers such as MSIE 6, Mozilla, Opera, and Netscape Navigator 6 understand object, so will ignore its contents.
Browsers like NetscapeNavigator 2 and 3 will ignore object because they do not recognize it, and render the embed.
NetscapeNavigator 4 gets confused by object if it does not also contain embed (so far as my testing can tell).

The upshot is that the following should work in most browsers with, for example, the AdobeSvgViewer PlugIn:

<object data="sample.svgz" type="image/svg+xml"
width="400" height="300">
<embed src="sample.svgz" type="image/svg+xml"
width="400" height="300" />
</object>

The space and slash before the closing > of the embed tag is to make this fragment well-formed XML.

If you want to create valid XHTML, you cannot use embed. On the other hand, if validity is that important to you, you are probably already reconciled to leaving older browsers behind...? See the conversation that follows for some ideas about making valid almost-XHTML containing embed.

Peter Sorotokin offers:

In short: if you target Windows Internet Explorer only (e.g., for intranet), use <object>, Internet Explorer definitely likes it more. Otherwise, use <embed> or frames with SRC set to svg file.

That is practical advice: if you are aiming at a target audience including older browsers, you are pretty much stuck with <embed>. Following is an example of using the <embed> tag:

<embed src="MyFile.svg" width="40" height="60"
pluginspage="http://www.adobe.com/svg/viewer/install/" />

However, the proper, modern, method of referencing SVG in HTML does not use the <embed> tag. This post from Chris Lilley sums it up:

"the embed element is not listed in the HTML 2.0, 3.2, 4.0 or 4.01 DTDs. Nor can it be, since its syntax is not SGML conformant in the slightest."

Jon Ferraiolo suggests that for the "real world" Internet browser audience one should stick with <embed>, and provides "trickery" to enable the embed tag to pass validation:

I know the <embed> tag is not in any W3C standard, but if you want plugins to work with legacy browsers (some of which did not properly support W3C standards -- blame them, not the plugin providers), Adobe has found that the <embed>tag is the practical (albeit, non-sanctioned) way to go.__

If files must validate as XHTML and nothing works with the plugin except the <embed> tag, then you might be able to achieve validation by adding the definition of an <embed> element with those attributes that you happen to use by defining the <embed> tag in the "internal DTD subset". (See the XML 1.0 spec for details.) Something like:

<?xml-version ... ?>
<!DOCTYPE html .... [
<!ELEMENT embed EMPTY>
<!ATTLIST embed
src CDATA #IMPLIED >
]>
<html>...</html>

In effect, this bit of trickery allows you to validate everything else in the file correctly and lets the <embed> tag get treated as if it were valid.

A complete example of extending XHTML with the embed element, in the internal subset:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-_W3C_DTD XHTML 1.0 Strict_EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" [
<!ELEMENT embed EMPTY>
<!ATTLIST embed
src CDATA #REQUIRED
width CDATA #IMPLIED
height CDATA #IMPLIED>
<!ENTITY % inline
"embed | a | %special; | %fontstyle; | %phrase; | %inline.forms;">]>
<html>
<head>
<title>Example of bugwards compatibly extended XHTML</title>
</head>
<body>
<p>Support the <a href="http://www.webstandards.org/">WaSP</a> for
standards in our browsers.
<embed src="foo" />
</p>
</body>
</html>

but then many browsers render

" ]>"

at the top of the page. (Old browsers are older than XHTML; they treat it as HTML.) Only if the DTD itself is modified, the " ]>" doesn't show.

Tobias Reif actually implemented such a modification to the XHTML DTD, but he no longer hosts the files The proper method of embedding SVG in XHTML currently is by means of the <object> tag, which is done as below (Chris Lilley's comments follow):

<object type="image/svg+xml" data="./mjr-svgopenwindow.svg"
name="owMain" width="400" height="150">
</object>

Yes, but put something useful inside the object (that's why it has separate start and end tags, unlike img) - a JPEG file, or a text description, or both. This will be displayed by systems that can't yet display SVG.

However, as stated above, before choosing <object> over <embed>, be sure that the target browsers of your site handle it properly.

Then there's the future: the future of combining SVG and XHTML is perhaps Inline SVG, using multiple namespaces in the same document.

What about non-XML compliant markup as specified in HTML5? Presumably this will allow in-line SVG?
Apart from inlining, do any of these methods allow
1. (W3C?) DOM interaction with the rest of the document?
2. Interactivity?
3. Animation?

SVG in object