SVG负载过大

Question

我有一个简单的搜索图标作为我正在使用的SVG，但是由于某种原因，当我加载网页时，尽管CSS和SVG本身的样式有24x24锁定，但它仍然很大。

它散开并占据整个页面，直到所有内容都加载完毕，然后捕捉到正常的24x24尺寸。看起来绝对荒谬，我知道我必须做错了什么。有任何想法吗？

SVG：

<svg style="position: absolute; width: 0; height: 0;" width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
    <symbol id="icon-search" class="icon" viewBox="0 0 24 24">
        <title>search</title>
        <circle class="st0" cx="9.3" cy="9.2" r="8.6" />
        <line class="st1" x1="15.3" y1="15.4" x2="23.3" y2="23.4" />
    </symbol>
</defs>

HTML：

<div class="searchContainer">
     <div class="search">
          <input class="image" type="image" src="images/search.svg"><input class="text" type="text" onfocus="if(this.value == 'Search') { this.value = ''; }" value="Search" onblur="if (this.value == '') { this.value = 'Search'; }">
      </div><!-- /search -->
</div><!-- /searchContainer -->

CSS：

input.image{
   fill: black;
   width: 24px;
   height: 24px;
   border: 0;
   padding-top: 9px;
   text-align: right;
}

这是我在加载时看到的内容。

请注意，其他图标也是SVG，但是它们使用我无法用于搜索输入的方法在单个文件中完成。

<svg><use xlink></use></svg>

任何帮助表示赞赏。谢谢！

Answer 1

您可以通过直接向 SVG 添加宽度和高度属性来解决此问题。例如，您的 SVG 可能如下所示：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 225 225" width="20" height="20"> 
  <title>Search</title>
  <path fill="#fff" d="M225 202v8c-2.7 7.3-7.6 12.4-15 15h-8c-7.3-1.2-12.4-5.7-17.3-10.9-6.6-7-13.6-13.7-20.4-20.6-11.5-11.6-22.9-23.2-34.3-34.7-18 10.2-36.7 14.6-56.6 11.2-34.8-5.9-57.9-25.9-69.3-59.2C2 105.2 1.3 99 0 93V78c.3-.8.7-1.5.8-2.3C6.1 38.8 27 15 62.1 3.4 67.2 1.7 72.7 1.1 78 0h15c3.6.7 7.1 1.3 10.7 2C140 8.7 170 44.2 171.1 81.2c.5 17.2-3.3 33.3-12.5 49.2 1.3 1 3 1.9 4.2 3.2 17.1 17 34.1 34.2 51.3 51.2 5.1 4.9 9.7 9.9 10.9 17.2zM85.1 146.9c33 .5 61.5-27.3 61.9-60.4.4-33.7-26.7-61.5-60.6-62.2-33.3-.7-61.5 26.8-62.1 60.6-.6 33.3 27 61.5 60.8 62z"/>
</svg>

请注意其中具体说的地方width="20" height="20"。这将限制图像加载时的 SVG 大小。然后您可以根据需要使用 CSS 调整高度和宽度。

Answer 2

将 SVG IMG 元素放入 div 中，然后适当调整 div 和 img 的大小...

<div id="logo">
  <img id="logo_img" src="assets/images/logo.svg">
</div>

  #logo {
    display: block;
    height: 50px;
  }
  #logo_img {
    height: 50px;
    width: 200px;
  }