3

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)

Improve this question
3
  • 1
    I'd say: contact the support. This is a clear missconfiguration, at least if that really is a svg file you uploaded...
    – arkascha
    Commented Jul 9, 2013 at 20:08
  • I'd recommend not using physical units. What happens if somebody looks at your site on a phone? The image will be bigger than the screen. I'd recommend the rem unit.
    – Janus Troelsen
    Commented Jul 9, 2013 at 20:21
  • image/svg+xml is the officially registered mediatype for svg (see IANA), and it's not exactly new (apache has been shipping with the svg mimetype enabled per default for many years now). +1 for contacting the hosting company.
    – Erik Dahlström
    Commented Jul 10, 2013 at 7:52

2 Answers 2

Reset to default
3

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)

Improve this answer
3
  • Great idea, combined with something like onerror="this.onerror=null; this.src='images/avatar.png'" it might be even possible to just use the image file itself (without need to hard-code the image in the html). Just need to see if the <?xml version="1.0" encoding="UTF-8" standalone="no"?> part works in this, however the javascript could remove it if needed. Tnx
    – JVApen
    Commented Jul 9, 2013 at 20:48
  • if you want to use JavaScript, you can get an arraybuffer from the XHR object (if you set responseType accordingly) and use Blobs and window.URL.createObjectURL on them
    – Janus Troelsen
    Commented Jul 9, 2013 at 21:06
  • Currently using this: <script type="text/javascript"> function getSVG(source) { xmlhttp = new XMLHttpRequest(); xmlhttp.open("GET", source, false); xmlhttp.send(); return "data:image/svg+xml," + xmlhttp.responseText; } </script> <img src="images/avatar.svg" onerror="this.onerror = null; this.src = getSVG('images/avatar.svg')"/> And its working as wanted. Tnx Again
    – JVApen
    Commented Jul 13, 2013 at 15:10
0

The answer of Janus Troelsen managed to help me with this.

Instead of directly embedding the image into the HTML, I'm using some javascript to retrieve the image:

<script type="text/javascript">
     function getSVG(source)
     {
             xmlhttp = new XMLHttpRequest();
             xmlhttp.open("GET", source, false);
             xmlhttp.send();
             return "data:image/svg+xml," + xmlhttp.responseText;
     }
</script>
<img src="images/avatar.svg"
     onerror="this.onerror = null;
              this.src = getSVG('images/avatar.svg')"/>

This worked the server!

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.