Geek Answers Handbook

Why doesn't SVG work with local HTML files?

I'm confused.

If I point my browser (Chrome or Safari on OSX) to this website, it will display all SVGs perfectly:

http://emacsformacosx.com/

Now, if I look at the source on this page, copy it and paste it into a new HTML document on my desktop, and then view it using any browser, I don't get SVG at all.

Why is the difference?

Why does SVG work on a website, but not in a local HTML file?

Thanks!

+6
html xhtml svg
source share
2 answers

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

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

+8
source share

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 the page was smart enough to detect that it was an XML document, and told the browser. When you download a file from disk, your browser may not be smart enough to do this, and usually relies on a file extension to provide this information.

You can try pasting the following into the <head> element:

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

Do you see what I did there? This is just a mirror of the HTTP response header, which would indicate the document type and encoding.

The purpose of this tag is to make browsers think, “Hey, the server tells me that this document is HTML, but the document tells me XML. The document probably knows better than the server, so I will trust it ... :: interprets how XML :: "

+4
source share

More articles:


All Articles