CODEWITHSUNDEEP
svgweb-hosting
Lukas Arvidsson
Lukas Arvidsson

Reputation: 467

.svg renders as text document in browser but not when viewed locally

I have stumbled upon a quite strange problem. When I upload my .svg file to my web hosting server the .svg file renders as text in the browser and not as an image.

When I developed the site I created a local web server and everything is looking good there.

So for example when I enter: 

http://localhost:8080/wordpress/wp-content/themes/SelenaStheme/intro/images/animation1.svg

I see a picture.

But when I enter:

http://www.selenas.se/wp-content/themes/SelenaStheme/intro/images/animation1.svg

I see the following:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px"
     height="150px" viewBox="0 0 200 150" enable-background="new 0 0 200 150" xml:space="preserve">
<g id="Layer_2" display="none">
    <rect display="inline" fill="#D3D3D3" width="200" height="150"/>
</g>
<g id="Layer_1">
    <g>
        <path fill="#BF4756" d="M61.241,66.484c0.058-0.52-0.096-1.099-0.349-1.751C61.025,65.329,61.142,65.913,61.241,66.484z"/>
        <path fill="#BF4756" d="M42.401,88.682c-3.276-11.089-6.221-23.403,5.585-28.073c2.426-0.96,5.841-1.078,7.912,0.355
            c-0.264-0.767-0.504-1.521-0.724-2.265c-1.966-0.397-4.368-0.153-7.021,0.897c-12.94,5.118-15.824,17.941-9.698,34.145
            c3.832,10.166,3.639,24.764-11.266,30.661c-8.845,3.498-16.252,1.535-18.141-3.243c-0.675-1.707-0.995-3.474-0.281-5.019
            c0.49,0.28,1.416,0.229,1.989,0.002c1.638-0.648,2.271-2.161,1.731-3.526c-0.593-1.501-2.336-2.075-4.793-1.103
            c-2.866,1.134-3.805,4.268-2.563,7.407c3.023,7.644,11.899,10.448,21.808,6.528c12.203-4.827,22.026-14.711,16.268-34.06
            C43.057,90.884,42.382,88.68,42.401,88.682z"/>
    </g>
    <g>
        <path fill="#FFFFFF" d="M42.405,88.679c2.056,0.146,4.033-0.253,7.139-1.481c10.61-4.197,10.363-15.735,7.067-24.41
            c-5.267-13.828-3.783-24.393,5.429-28.037c4.081-1.614,7.813-0.529,9.059,2.62c0.968,2.448-0.565,4.538-2.955,5.484
            c0.344-1.687,0.337-2.898-0.401-4.763c-1.107-2.799-3.503-3.401-5.776-2.502c-9.095,3.597-5.124,15.511-1.996,25.465
            c5.153,16.435-1.548,24.21-10.235,27.646c-2.766,1.094-5.075,1.495-6.981,1.156"/>
    </g>
</g>
</svg>

When I host the files on my public dropbox-folder I see the picture as intended.

Can it be so that rendering .svg files is disabled at my web hosting provider? How could that be? I am quite new to web development but this bug has taken me 5 hours to understand that this was my problem (I thought i was writing my the wrong paths due to the .svg files not showing up in my animation). Any idea how I can move on from here?

Thank you!

Upvotes: 2

Views: 557

Answers (1)

Robert Longson
Robert Longson

Reputation: 124069

You need to get your web hosting provider to serve SVG files with the mime-type image/svg+xml

You'd have to contact them and ask them I guess.

Upvotes: 2

Related Questions