CODEWITHSUNDEEP
imageinternet-explorerfirefoxsvg
Apotheosis
Apotheosis

Reputation: 131

SVG placed in IMG tag not loading on Firefox & IE, works perfectly in Chrome

I am using an SVG through an img tag and it does not want to load through Firefox & IE. Here is the testing site.

http://testing.khalidsleiman.com/

You can find the SVG in the html by searching for a class called "mask". Placing the SVG directly in my html through an tag works. Here is a direct link to it as well.

http://testing.khalidsleiman.com/img/main-mask.svg

I have looked through 40-50 similar problems people have experienced and have not found a solution yet. Have not clue why it wouldn't load.

Upvotes: 0

Views: 2647

Answers (2)

user2505935
user2505935

Reputation: 58

Adding a .htaccess in the images folder solved my problem since the server did not support SVG.

AddType image/svg+xml svg svgz
AddEncoding gzip svgz

Upvotes: 1

Paul LeBeau
Paul LeBeau

Reputation: 101800

If you remove the position: absolute; and adjust the margin a bit, it seems to work fine in all three browsers.

.main-container .main-bg img.mask {
    bottom: 0;
    margin-bottom: -7px;
    opacity: 1;
    width: 101%;
}

I suspect an alternative to shifting it down with margin-bottom, would be to set preserveAspectRatio="xMidYMax meet" on the SVG. That would force it to sit on the bottom of the viewport, instead of centred vertically as it is now (which I think is what is causing the gap).

Upvotes: 2

Related Questions