Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

SVG image tag not working

Tags:

xml

svg

xampp

I'm playing around with the SVG tutorial here, and can't load an image. XAMPP is giving me an error that says

This XML file does not appear to have any style information associated with it. The document tree is shown below.

I've copypasta'd from the docs, but it still doesn't work. Code below:

<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="5cm" height="4cm" version="1.1"      xmlns="localhost" xmlns:xlink= "localhost/svgtest">     <image xlink:href="My_Image.jpg" x="0" y="0" height="50px" width="50px"/> </svg> 

Googling the error message tells me that the XML is broken somehow, but I haven't changed anything but the locale and image title.

like image 216
SomeKittens Avatar asked Jun 19 '12 15:06

SomeKittens


People also ask

Why is my SVG not displaying?

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.

Can I use IMG tag for SVG?

From IE9 and above you can use SVG in a ordinary IMG tag..

How do I add an image to a SVG tag?

SVG images can be written directly into the HTML document using the <svg> </svg> tag. To do this, open the SVG image in VS code or your preferred IDE, copy the code, and paste it inside the <body> element in your HTML document.

Does Google Chrome support SVG?

Chrome was the first browser to launch with native SVG support from the beginming.


1 Answers

You got the namespaces wrong.

change

xmlns="localhost" xmlns:xlink= "localhost/svgtest" 

to

xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink" 

Maybe you should have a look at this Namespaces Crash Course by MDN.

like image 64
Sirko Avatar answered Sep 18 '22 18:09

Sirko