SVG won't display in html

Question

I have trouble with an SVG. It won't display in html. Not with <img> not with <object> If browse directly to this SVG i can see it. Test: http://angliru.nl/upload/121.svg but when included I only see white, see: http://angliru.nl/test.html

What am i doing wrong?

I checked these 3 possibilities, but still isnt working:

Your server is using the wrong MIME type for SVG images. (Can be fixed by adding AddType image/svg+xml svg to your .htaccess file; other methods discussed here)
You saved the SVG file somewhere else and it doesn't exist at icons/chrome.svg. (Try navigating straight to the SVG file at icons/chrome.svg. Does it display in your browser?)
You saved the file with insufficient permissions, resulting in your web server being unable to access the file. (Can be fixed by navigating to the icons directory and typing chmod 0644 chrome.svg at the command line prompt.)

*Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it in the question itself. Questions without a clear problem statement are not useful to other readers. See: How to create a [mcve].* — BSMP, Sep 29 '16 at 14:08
I don't have an error message. It just displays a white page, instead of the included svg — Jasper Renema, Sep 29 '16 at 14:11
Your question is still missing the shortest code necessary to reproduce it in the question itself. — BSMP, Sep 29 '16 at 14:11
See http://stackoverflow.com/questions/35903224/how-many-levels-of-recursion-does-svg-support/35903727#35903727 the jpg won't get loaded when the SVG file is displayed via an img tag. — Robert Longson, Sep 29 '16 at 18:21

score 0 · Answer 1 · answered Sep 29 '16 at 14:13

Integrated as an SVG, the image does work without a problem (run the code snippet):

<svg version="1.1" id="Laag_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="100%" height="100%"
viewBox="265 90 311.9 495.3" enable-background="new 0 0 841.9 595.3" xml:space="preserve">
<g>
    <defs>
        <pattern id="img1" patternUnits="userSpaceOnUse" width="842" height="595">
            <image xlink:href="http://www.angliru.nl/upload/niels.jpg" x="0" y="0"
                width="842" height="595" />
        </pattern>
    </defs>
 <path d="M549.9,476.2c-3.3,0-6.1,0-8.9,0c-15.2,0-30.3-0.1-45.5,0.1c-2.3,0-5,1.3-6.8,2.9c-3.6,3-6.7,6.5-10,9.8
  c-3.2,3.1-6.4,3.3-9.5,0c-0.1-0.1-0.3-0.2-0.3-0.4c-7.5-11.2-18.1-13.6-31-12.6c-13.6,1-27.3,0.1-41,0.3c-2,0-4.4,1.1-6,2.5
  c-3.5,3-6.6,6.6-10,9.8c-3.9,3.7-7.1,4.1-10.1-0.1c-7.9-10.9-18.3-13.5-31.1-12.5c-12.8,1-25.6,0.2-38.5,0.1
  c-0.3,0-0.6-0.2-1.5-0.6c0-11.7,0-23.6,0-35.6c0-7.7,0.3-15.3-0.1-23c-0.1-2.3-1.4-5-3-6.8c-3.7-4.3-8-8-11.9-12.1
  c-3.7-3.9-3.6-6.3,0.1-10.2c0.2-0.2,0.4-0.5,0.7-0.7c12.3-8.5,16.2-20,14.5-34.8c-1.3-11,0-22.3-0.3-33.4c-0.1-2.4-1.3-5.1-2.9-7
  c-3.9-4.9-8.4-9.4-12.6-14.2c-2.5-2.9-2.3-5.6,0.5-8.3c4.1-3.9,8.3-7.7,12-12c1.6-1.8,2.8-4.6,2.8-7c0.2-16.7,0.2-33.3,0-50
  c0-2.2-1.2-4.8-2.6-6.5c-3.7-4.5-7.9-8.6-11.9-12.8c-3.5-3.8-3.4-6,0.2-9.8c2.4-2.5,4.5-5.5,7.2-7.6c6.8-4.9,7.6-11.5,7.4-19.3
  c-0.4-15.8-0.1-31.6-0.1-47.7c7.3,0,14.4,0,21.5,0c10.8,0,21.6,0.2,32.5,0.1c1.1,0,2.5-0.7,3.3-1.6c4.4-4.5,8.6-9.3,13-13.8
  c4.2-4.3,6.9-4.2,11-0.1c5.1,4.9,9.5,11.8,15.7,14.3c6.2,2.5,14.1,0.6,21.3,0.7c10.5,0,21,0.3,31.5,0c2.5-0.1,5.4-1.4,7.3-3
  c4-3.5,7.5-7.6,11.2-11.4c4.6-4.6,7.2-4.7,11.8-0.2c2.3,2.2,4.9,4.2,6.7,6.7c5,7.1,11.9,8.4,19.9,8.3c12.7-0.3,25.3,0,38,0
  c1.5,0,2.9,0,5.2,0c0,10.7,0,21,0,31.3c0,8.7-0.3,17.3-0.1,26c0,1.8,1.2,3.9,2.5,5.3c4,4.2,8.3,8.1,12.5,12.3c3.2,3.2,3,6.4,0,9.7
  c-1.5,1.6-2.8,3.3-4.6,4.6c-8.7,6.2-11.1,14.5-10.5,25c0.8,13.5,0.2,27,0.5,40.5c0,1.9,1,4.2,2.3,5.6c3.8,4.2,7.9,8.1,11.9,12.1
  c4,4,3.9,7,0,11.1c-2,2-3.7,4.4-6,6c-7.4,5.1-8.8,12.2-8.5,20.7c0.6,14.3-0.1,28.7,0.1,43c0,2.2,1.3,4.7,2.8,6.4
  c3.8,4.4,8.1,8.3,12.1,12.6c2.7,2.9,2.6,6-0.2,8.9c-3.7,3.8-7.4,7.6-11.3,11.3c-2.5,2.3-3.4,4.9-3.3,8.3
  C550,436.7,549.9,456.1,549.9,476.2z"
  fill="url(#img1)" />
</g>
</svg>

Also, you say that you have checked that your server is sending the right MIME Type, but you obviously didn't. There is no Content-Type header being sent.

Thanks, but what i don't understand is why it doesnt work with object or img ? — Jasper Renema, Sep 29 '16 at 14:38
Again: because your server doesn't send the correct Content-Type header, so the SVG is probably interpreted as regular HTML, which can not be represented as an image, instead of SVG. — Constantin Groß, Sep 29 '16 at 20:55

SVG won't display in html

1 Answers1