0

I have the following HTML code containing an element for presenting a SVG:

<div class="item">
    <div id="item_sla">
    <image title="imagetitle" src="SVGImage.svg"/>
</div>

and the following CSS:

.item {
    height: 95.5px;
    width: 100%;
    margin-left:0;
    background-color: #ffffff;
}
#item_sla {
    width: 20px;
    height: 20px;
    object-fit: center;
    margin-left: 10%;
    margin-top: 23px;
    float: left;
}

enter image description here

However, the SVG image is unfortunately blurry i.e. has cropped corners. I've read so far the solution described here, but unfortunately I cannot get it right.

Any hint onto why this happens?

Community
  • 1
  • 1
dsafa
  • 783
  • 2
  • 8
  • 29
  • is the height of .item the same as the image? – Keith Jul 20 '16 at 16:56
  • No it isn't - the height of the item is fixed at 95.5px as you can see in the CSS code snipped above – dsafa Jul 20 '16 at 17:01
  • That shouldn't matter for SVG anyway... – Jacob Colvin Jul 20 '16 at 19:46
  • This questuion can't be definitively answered without seeing the contents of the SVG. Or at least knowing what its `width`, `height` and `viewBox` are set to. Please post the SVG file into your question. Also fix the errors in your sample: close the `item_sla` div and rename the incorrect `` element. – Paul LeBeau Jul 21 '16 at 06:28

1 Answers1

0

Try changing 'image' to 'img' and close the second div As follows:

<div class="item">
    <div id="item_sla">
    <img title="imagetitle" src="Nutshell.svg"/>
    </div>
</div>
Francis Hemsher
  • 3,478
  • 2
  • 13
  • 15