Question

说我有这个HTML布局：

<div class="cards">
  <div class="card">
    <img class="card-image">
    <h3 class="card-title">...</h3>
    <p class="card-text">...</p>
    <a class="card-link">
      text
      <svg class="card-link-svg">
        ...some svg
      </svg>
    </a>
  </div>

  <div class="card">
    ...
  </div>

  ...
</div>

为了示例，这是一张在页面上重复说过20次的卡片。

在服务器的响应中，我有相同的SVG代码重复20次。然后我把它乘以4~5代表其他卡组我现在有相同的SVG代码〜100次反复重复。

然后我说另外~20-30个不同尺寸和形状的SVG用于页面上的其他组件，这使得很难进入精灵表。

在我网站上的一个页面上，我的初始响应只有220kb，仅用于文档，这对我来说非常庞大。

有没有办法减少使用SVG的代码占用空间，同时保持使用CSS设置样式的能力？

Answer 1

This加上this似乎就是我追求的目标。

<强> /static/svg/sprite.svg

<svg xmlns="http://www.w3.org/2000/svg">

  <symbol id="arrow" viewBox="214.7 0 182.6 792">
    <!-- <path>s and whatever other shapes in here -->  
  </symbol>

  <symbol id="shape-icon-2" viewBox="0 26 100 48">
    <!-- <path>s and whatever other shapes in here -->  
  </symbol>

</svg>

允许外部引用单个SVG，因此可归结为：

<svg>
    <use xlink:href="/static/svg/sprite.svg#arrow"></use>
</svg>

减少服务器响应中的SVG重复/占用空间

1 个答案: