SVG not showing in Opera and Firefox, but Chrome
I'm trying to display this simple embedded SVG image:
<!DOCTYPE HTML>
<ht开发者_如何学编程ml>
<head>
</head>
<body>
<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
<g>
<title>Layer 1</title>
<text xml:space="preserve" text-anchor="middle" font-family="serif" font-size="24" id="svg_1" y="125" x="141" stroke-width="0" stroke="#000000" fill="#000000">test</text>
</g>
</svg>
</body>
</html>
Chrome shows it, but Opera and Firefox don't. Is there something missing?
It is supported, in fact :) You have two options - old one, using XHTML, and new one, using HTML5 and a modern browser with an HTML5 parser:
XHTML example (works in most browsers, including old Internet Explorer with the Adobe plugin installed):
<?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">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<head>
<title>SVG embedded inline in XHTML</title>
</head>
<body>
<h1>SVG embedded inline in XHTML</h1>
<object id="AdobeSVG" classid="clsid:78156a80-c6a1-4bbf-8e6a-3cd390eeb4e2"> </object>
<?import namespace="svg" urn="http://www.w3.org/2000/svg" implementation="#AdobeSVG"?>
<svg:svg version="1.1" baseProfile="full" width="300px" height="200px">
<svg:circle cx="150px" cy="100px" r="50px" fill="#ff0000" stroke="#000000" stroke-width="5px"/>
</svg:svg>
</body>
</html>
html5 example(atm supported by IE9, FF4 and Chrome, Safari in near future):
<!DOCTYPE html>
<html>
<head>
<title>SVG in text/html</title>
</head>
<body>
<h1>SVG in text/html</h1>
<p><svg height=86 width=90 viewBox='5 9 90 86' style='float: left;'>
<path stroke=#F53F0C stroke-width=10 fill=#F5C60C stroke-linejoin=round d='M 10,90 L 90,90 L 50,14 Z'/>
<line stroke=black stroke-width=10 stroke-linecap=round x1=50 x2=50 y1=45 y2=75 />
</svg><b>Warning:</b> Remember that ± means that there are two
solutions!</p>
</body>
</html>
You need an HTML5 parser for that to get that properly displayed, e.g. Firefox 4, or Opera 11.50. Check out caniuse.com for more browser details.
You can use XHTML with inline SVG images and it will work in all SVG-capable browsers though. See here for an example.
According to this site, you do have some options. Although I personally struggle with this, as well...
"A simple and easy way to include SVG into a web page is to use the XHTML object tag. Here is an example:"
<?xml version="1.0"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SVG Included with <object> tag in an XHTML File</title>
</head>
<body> <h1>An SVG rectangle (via <object> tag)</h1>
<object type="image/svg+xml" data="web_square.svg">
Browser does not support SVG files!
</object>
</body>
</html>
"Inclusion of SVG file. The "image/svg+xml" is the MIME type of the included file. It must be given."
"Text that will be displayed if a browser does not support SVG. Browsers should ignore tags that they don't understand thereby exposing the text."
He also outlines a method "Using Name Spaces"...
"Through Name Spaces, an SVG file can be placed directly in an XHTML file. Here is an example of a very simple XHTML file that displays a blue square. The square was drawn with Inkscape. (For clarity, the Inkscape drawing was saved as a plain SVG file and some of the unused rectangle attributes were deleted.)"
<?xml version="1.0"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head> <title>SVG Embedded into an XHTML File</title>
</head>
<body> <h1>An SVG rectangle (via Name spaces)</h1>
<svg
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.0"
width="150"
height="150"
id="svg1341">
<defs id="defs1343" />
<g id="layer1">
<rect
width="90" height="90"
x="30" y="30"
style="fill:#0000ff;
fill-opacity:0.75;
stroke:#000000 stroke-width:1px"
id="rect1353" />
</g>
</svg>
</body>
</html>
Good luck... being SVG isn't easy...
Well, I found the reason: directly embedding SVG tags in HTML is not supported yet in most browsers.
加载中,请稍侯......
精彩评论