Geek Answers Handbook

SVG not showing up in Opera and Firefox, but Chrome

I am trying to display this simple built-in svg:

<!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 this, Opera and Firefox do not. Is something missing?

Thank you for your help!

+6
cross-browser svg
source share
5 answers

This is supported, actually :) You have two options: the old one using xhtml and the new one using html5 and a modern browser with html5 parser:

Example xhtml (works in most browsers, including old IE 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>
Example

html5 (atm is supported by IE9, FF4 and Chrome, Safari in the 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 &PlusMinus; means that there are two solutions!</p> </body> </html>
+4
source share

To do this, you need an HTML5 parser to display it correctly, such as Firefox 4, or Opera 11.50 . See caniuse.com for more information.

You can use XHTML with built-in svg, and it will work in all svg-compatible browsers, although, for example, see here .

+2
source share

According to this site you have several options. . although I personally struggle with this ...

"A simple and easy way to include SVG in 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>

"Include SVG file." image / svg + xml "is the MIME type of the included file. It must be specified." "The text to be displayed if the browser does not support SVG. Browsers should ignore tags that they do not understand, thereby exposing the text."

It also describes the method of using namespaces ....

“An SVG file can be placed directly into an XHTML file through namespaces. Here is an example of a very simple XHTML file that displays a blue square. The square was drawn using Inkscape (for clarity, the Inkscape image was saved as a regular SVG file, and some of the unused rectangle attributes have been 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 .. SVG is not easy ..

0
source share

Well, I found a reason: directly embedding svg tags in html is not yet supported in most browsers.

-one
source share

Of course, there is a security block with Firefox. This is easy to get around if you are using PHP. Just add your image.

Much easier.

 <?php include "myimage.svg" ?>
-2
source share

More articles:


All Articles