HTML SVG <image>是模糊/裁剪拐角

Question

我有含有元素用於呈現SVG以下HTML代碼：

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

和下面的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; 
} 

然而，SVG圖像不幸模糊，即有裁剪角落。我已經閱讀了迄今爲止描述的解決方案here，但不幸的是我無法做到。

任何提示爲什麼發生這種情況？

Answer 1

嘗試改變「圖像」到「IMG」，並關閉第二個div 如下：

<div class="item"> 
    <div id="item_sla"> 
    <img title="imagetitle" src="Nutshell.svg"/> 
    </div> 
</div>