All geek questions in one place

Firefox img element

Trying to make all svg images compatible in different browsers. I have a problem with Firefox.

I am using the .SVG image in the img element. Something like that:

<img src="image.svg" />

If you see the image below, it seems that the SVG is repeating itself. If I use svg as the background image, I can probably do background-repeat: no-repeat, but in this case I need to use svg in the img element and cannot specify background-repeat for the img element.

How can i fix this? All answers will be helpful.

enter image description here

+4
source share
2 answers

I am going to explain this strange case.

This is the code of my SVG

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="21.391px" height="18.881px" viewBox="228.645 224.748 21.391 18.881" enable-background="new 228.645 224.748 21.391 18.881" xml:space="preserve" xmlns:xml="http://www.w3.org/XML/1998/namespace">
<g>
    <path fill="#CEE4C4" d="M243.708,230.977c-3.494,0-6.328,2.83-6.328,6.323c0,3.494,2.834,6.328,6.328,6.328   c3.496,0,6.328-2.834,6.328-6.326C250.036,233.808,247.204,230.977,243.708,230.977z M244.437,242.177h-1.508v-1.805h1.508V242.177   z M244.308,239.066h-1.24l-0.129-5.723h1.498L244.308,239.066z"/>
    <g>
        <path fill="#9FAEB1" d="M237.384,237.376c0-0.024-0.004-0.051-0.004-0.076c0-0.627,0.096-1.229,0.266-1.803l-3,2.25v-3h-4v-8h12    v4.324c0.347-0.059,0.699-0.096,1.062-0.096c0.318,0,0.63,0.031,0.938,0.076v-6.305h-16v12h4v4L237.384,237.376z"/>
    </g>
</g>
</svg>

SVG 21x19 px. ! SVG 22x20 px.

, svg (21x19), , , (22x20), .

+5

, , . img , , , . , , , , jsfiddle, .

+1

Source: https://habr.com/ru/post/1536943/

More articles:


All Articles