4

Trying to make compatible all svg's images in different browsers I have an issue with Firefox.

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

<img src="image.svg" />

If you can see the image below,seems that the SVG is repeated. If I will used the svg as background-image, problably I will can do background-repeat: no-repeat, but in this case I need use the svg at img element and can't specify background-repeat to an element img.

How I can fix this? All answers will be apreciate.

enter image description here

Improve this question
7
  • How is the image repeated? Is this a sprite SVG? Could you make a JSfiddle with the actual image?
    – Paulie_D
    Commented Apr 17, 2014 at 12:17
  • I dont know why is repeated. There's no fiddle needed, its just only an image with that svg ( and no sprite ) and 0 css. The problem is only an firefox
    – Jorge Guerola
    Commented Apr 17, 2014 at 12:28
  • i can't reproduce your problem or maybe i just don't get your question. You want to make that img repeated? if you include a simple img like this <img src="image.svg" /> it should display your image once
    – Jozsi
    Commented Apr 17, 2014 at 12:36
  • 2
    but as i can see on the image you posted it appears just once
    – Jozsi
    Commented Apr 17, 2014 at 12:39
  • 2
    I'm only seeing one image. Do I need any special glasses to see the other one? :)
    – helderdarocha
    Commented Apr 17, 2014 at 12:48

2 Answers 2

Reset to default
5

I'm going to explane 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>

The element SVG measures are 21x19 px. BUT! the measure of the element SVG inside are 22x20 px.

So, if i put the measures of svg (21x19) that don't fix the initial problem, however if i put width and height of the element (22x20) solves the problem.

Improve this answer
1

Ok i see what's your problem now. You should try to add for img tag the exact width and hight of the image you try to add, just to ensure it will display the expected dimension. Try it and see what happens, if not please make a jsfiddle to can help you

Improve this answer
1
  • 2
    That worked, but its a bit strange, check my answer. :)
    – Jorge Guerola
    Commented Apr 17, 2014 at 13:34

Not the answer you're looking for? Browse other questions tagged or ask your own question.