Search code examples
svgmime-types

Show svg if mime-type equals text/xml

I am trying to use an svg-image on my home-page, basicly using following code:

<html><head/><body>
<img src="images/avatar.svg" width="135mm" height="210mm"/>
</body></html>

Everything goes fine on my pc (Linux with apache-server), however after transfer to a very limiting host, the image is no longer shown. (Note: Tested with Chrome29 and Opera12)

Reason for this: it is transferred under 'text/xml' instead of 'image/svg+xml'

What I am looking for is a way to show this image on my homepage, preferably without loosing the img-tag.

The tricky part about this:

  • I have no access to the magic file
  • I am not allowed to upload an .htaccess
  • I have no server side scripting
  • I do not want to use (i)frames
  • Basicly I can only add (x)html, css, javascript

To ease some constraints:

  • It does not need to work under IE

EDIT: Did already contacted support, they claim their host works as it should. So that is why I am looking for solutions (currently using .png, but ain't happy with that)

Solution

  • You can use a data URI (where you specify the content-type yourself), or you can use HTML5 which allows for inline SVG's (which would require you to drop the img tag).

    http://jsfiddle.net/zy96L/4/:

    <!doctype html>
<head><title>Red circle</title>
<body>
    <img alt="red circle" src="data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'><circle%20fill='red'%20cx='50'%20r='50'%20cy='50'%20/></svg>" />

    (even validates)