SVG 负载过大答案

【问题标题】：SVG Oversized on LoadSVG 负载过大
【发布时间】：2021-04-08 14:30:51
【问题描述】：

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

它会展开并占据整个页面，直到所有内容都加载完毕，然后它会对齐到正常的 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;
}

Here 是我在加载时看到的。

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

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

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

【问题讨论】：

标签： html css svg

【解决方案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 调整高度和宽度。

【讨论】：

我试过这个，但在 css 启动之前它仍然显示很大
@carinlynchin，你能把我链接到这个网站吗？
我不能，因为它落后于身份验证登录，但实际上只有几分之一秒......我只是放弃了它
为 SVG 标签添加宽度和高度效果很好！

【解决方案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;
  }

【讨论】：

不幸的是，这不起作用。我更新了我最初的帖子以包含更多 SVG 所处的情况，但即使在它周围放置一个约束 DIV 也无济于事，因为一旦 CSS 启动，搜索图标就可以了。这完全是在初始加载时 - SVG 在 CSS 样式表之前加载。

【解决方案3】：

内联加载 SVG 和样式。如果您将标签放在标签上方，它将消除页面加载时的巨大卡顿。

【讨论】：

【解决方案4】：

如果您可以在<img> 标签中加载您的 svg，则直接设置 img 的大小

 <img src="badge.svg" width="200">

【讨论】：

【解决方案5】：

我的解决方案是将 SVG 元素的不透明度设置为 0，然后在加载后将其设置为 1。 1.添加不透明度：0；到 CSS 中的元素或其父级。 2. 可选添加一个过渡，比如transition: 0.5s opacity； 3. 创建一个新类，假设“已加载”，透明度为：1； 4. 在 JavaScript 中，在加载事件中添加一行，将“加载”类添加到 SVG 元素或其父元素。

【讨论】：

【解决方案6】：

更好的解决方案...

添加样式="display:none;"属性内联到 img 标记。
页面完全加载后，使用 jQuery .show() img。

  $( window ).load(function() {
  $('.container img').show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<div class="container">
<img src="https://www.zdmdesigns.com/images/zdm-logo.svg" style="display:none;">
</div>

【讨论】：

【解决方案7】：

您需要在 html dom 上确定您的宽度和高度。另外，请尝试使用以下标签

<object data="your_svg_path" width="57" height="57" type="image/svg+xml">
</object>

【讨论】：

【解决方案8】：

不是原始问题的答案，但可能对某人有所帮助。

如果您使用 CMS 和 FontAwesome 作为 JS，您可能需要在编辑模式下禁用 FA，这样它就不会替换标签。如果没有加载 FA 脚本，则内容中会停留，而不是 .

【讨论】：