Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why doesn't SVG work on local HTML files?

Tags:

html

xhtml

svg

I'm confused.

If I point by browser (Chrome or Safari on OSX) to this web site, it shows all the SVG perfectly:

http://emacsformacosx.com/

Now, if I view source on that page, copy it, and paste it into a new HTML document on my desktop, then view that with either browser, I get no SVG at all.

Why the difference?

Why does SVG work on the web site, but not in the local HTML file?

Thanks!

like image 445
Axeva Avatar asked Feb 21 '10 01:02

Axeva


People also ask

Why is SVG not working?

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.

How do I display SVG in HTML?

The quick way: img elementTo embed an SVG via an <img> element, you just need to reference it in the src attribute as you'd expect. You will need a height or a width attribute (or both if your SVG has no inherent aspect ratio). If you have not already done so, please read Images in HTML.


2 Answers

You renamed it to HTML, and the browser assumes html content.. while the page is text/xml ..

if you rename it to .xml and open it, you will see it just fine..

like image 140
Gabriele Petrioli Avatar answered Sep 18 '22 23:09

Gabriele Petrioli


The HTTP response header information causes the browser to interpret the information as XML:

HTTP/1.1 200 OK
Date: Sun, 21 Feb 2010 02:32:02 GMT
Server: Apache/2.2.14 (Debian)
Vary: Accept-Encoding
Transfer-Encoding: chunked
Content-Type: text/xml; charset=UTF-8

You see, the server that served up the page was smart enough to detect that this was an XML document, and told the browser. When you load the file from disk, your browser may not be smart enough to do this, and tend to rely on the file's extension to supply this information.

You could try inserting the following into the <head> element:

<meta http-equiv="Content-Type" content="text/xml; charset=UTF-8" />

You see what I did there? It's just a mirror of the HTTP response header that would have specified the document type and encoding.

The purpose of this tag is to make browsers think, "Hey, the server is telling me that this document is HTML, but the document is telling me it's XML. The document probably knows better than the server, so I'll trust it... ::interprets as XML::"

like image 33
amphetamachine Avatar answered Sep 17 '22 23:09

amphetamachine