CODEWITHSUNDEEP
htmlcsssvg
jordanm
jordanm

Reputation: 15

Inline CSS styles being applied to SVG with specific file name

I have a simple svg

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="100px" height="100px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">

<style type="text/css">
<![CDATA[
.st0{fill:#A0A0A0;}
]]>
</style>

<path class="st0" d="M92.6,0H7.4C3.3,0,0,3.2,0,7.2v85.6c0,4,3.3,7.2,7.4,7.2h85.2c4.1,0,7.4-3.2,7.4-7.2V7.2C100,3.2,96.7,0,92.6,0
z M29.7,85.2H14.8V37.5h14.8V85.2z M22.2,31c-4.8,0-8.6-3.9-8.6-8.6c0-4.7,3.8-8.6,8.6-8.6c4.7,0,8.6,3.9,8.6,8.6
C30.8,27.1,27,31,22.2,31z M85.2,85.2H70.4V62c0-5.5-0.1-12.7-7.7-12.7c-7.7,0-8.9,6-8.9,12.3v23.6H39V37.5h14.2V44h0.2
c2-3.8,6.8-7.7,14-7.7c15,0,17.8,9.9,17.8,22.7V85.2z"/>
</svg>

However, when I place it in my html file like this:

<img src="images/icon_linkedin.svg" alt="LinkedIn">

It doesn't appear. Inspecting the HTML reveals that image could not be loaded and the following inline style has been added to the HTML img element.

style="display: none !important;"

Changing the file name (of the actual file and in the HTML) fixes this but I'm wondering what's going on here? It only seems to occur in Firefox (57.0.1).

Upvotes: 1

Views: 59

Answers (1)

Honsa Stunna
Honsa Stunna

Reputation: 595

are you using adblocking software? It should work jsfiddle.net/honsa/5tao1sog

Upvotes: 1

Related Questions