Menu
I'm trying to display this simple embedded SVG image:
<!DOCTYPE HTML>
<html>
<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?
819
If you are trying to use SVG like <img src="image. svg"> or as a CSS background-image , and the file is linked to correctly and everything seems right, but the browser isn't displaying it, it might be because your server is serving it with an incorrect content-type.
SVG (Scalable Vector Graphics) is officially supported by all main web browsers, including Internet Explorer. The support spans into a wide variety of image editor software, particularly Inkscape, which uses SVG as its native format (If you want a refresher on SVG, click here).
You might want to know that SVG is officially supported by all main web browsers out there, including the recently defunct Internet Explorer. In recent tests made on this matter, support for the SVG format across modern web rendering engines proved that, as we stated above, almost all of them are compatible.
Opera. Close to ASV in most areas and surpasing it in many, Opera's browser is widely viewed as the most advanced SVG viewer. Opera has done much to integrate SVG with emerging parts of HTML and CSS.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
