在Web上正确使用SVG

Question

我想知道在HTML文档上使用SVG的最佳方法是什么。

我读过一篇文章指出，使用SVG图标比使用图标字体更好，以获得更好的性能&减少HTTP (网络)调用。并提高SEO也。

我知道如何使用/包含SVG，但我有一些担心，特别是在性能和减少网络请求方面。

最常见的使用<img src="facebook.svg">标记。我经常从一些网站的开发工具上看到。

另一个是，通过使用<svg xmlns=""><path></svg>标记和，

最后一个是，我将所有的SVG放在一个.SVG文件(Sprite)上并导入它们。

<svg class="svg__icon">
   <use href="sprite.svg#facebook-icon">
</svg>

sprite.svg

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

        <symbol id="user" viewBox="0 0 24 24">
            <title>User</title>
            <path fill="none" d="M0 0h24v24H0z"/>
            <path d="M4 22a8 8 0 1 1 16 0h-2a6 6 0 1 0-12 0H4zm8-9c-3.315 0-6-2.685-6-6s2.685-6 6-6 6 2.685 6 6-2.685 6-6 6zm0-2c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4z"/>
        </symbol>

    <symbol id="facebook-icon" viewBox="0 0 24 24">
        <title>Facebook</title>
        <path fill="none" d="M0 0h24v24H0z"/>
        <path d="M14 13.5h2.5l1-4H14v-2c0-1.03 0-2 2-2h1.5V2.14c-.326-.043-1.557-.14-2.857-.14C11.928 2 10 3.657 10 6.7v2.8H7v4h3V22h4v-8.5z"/>
    </symbol>


    <symbol id="instagram-icon" viewBox="0 0 24 24">
        <title>Instagram</title>
        <path fill="none" d="M0 0h24v24H0z"/>
        <path d="M12 2c2.717 0 3.056.01 4.122.06 1.065.05 1.79.217 2.428.465.66.254 1.216.598 1.772 1.153a4.908 4.908 0 0 1 1.153 1.772c.247.637.415 1.363.465 2.428.047 1.066.06 1.405.06 4.122 0 2.717-.01 3.056-.06 4.122-.05 1.065-.218 1.79-.465 2.428a4.883 4.883 0 0 1-1.153 1.772 4.915 4.915 0 0 1-1.772 1.153c-.637.247-1.363.415-2.428.465-1.066.047-1.405.06-4.122.06-2.717 0-3.056-.01-4.122-.06-1.065-.05-1.79-.218-2.428-.465a4.89 4.89 0 0 1-1.772-1.153 4.904 4.904 0 0 1-1.153-1.772c-.248-.637-.415-1.363-.465-2.428C2.013 15.056 2 14.717 2 12c0-2.717.01-3.056.06-4.122.05-1.066.217-1.79.465-2.428a4.88 4.88 0 0 1 1.153-1.772A4.897 4.897 0 0 1 5.45 2.525c.638-.248 1.362-.415 2.428-.465C8.944 2.013 9.283 2 12 2zm0 5a5 5 0 1 0 0 10 5 5 0 0 0 0-10zm6.5-.25a1.25 1.25 0 0 0-2.5 0 1.25 1.25 0 0 0 2.5 0zM12 9a3 3 0 1 1 0 6 3 3 0 0 1 0-6z"/>
    </symbol>

    <symbol id="twitter-icon" viewBox="0 0 24 24">
        <title>Twitter</title>
        <path fill="none" d="M0 0h24v24H0z"/>
        <path d="M22.162 5.656a8.384 8.384 0 0 1-2.402.658A4.196 4.196 0 0 0 21.6 4c-.82.488-1.719.83-2.656 1.015a4.182 4.182 0 0 0-7.126 3.814 11.874 11.874 0 0 1-8.62-4.37 4.168 4.168 0 0 0-.566 2.103c0 1.45.738 2.731 1.86 3.481a4.168 4.168 0 0 1-1.894-.523v.052a4.185 4.185 0 0 0 3.355 4.101 4.21 4.21 0 0 1-1.89.072A4.185 4.185 0 0 0 7.97 16.65a8.394 8.394 0 0 1-6.191 1.732 11.83 11.83 0 0 0 6.41 1.88c7.693 0 11.9-6.373 11.9-11.9 0-.18-.005-.362-.013-.54a8.496 8.496 0 0 0 2.087-2.165z"/>
    </symbol>

    <symbol id="youtube-icon" viewBox="0 0 24 24">
        <title>YouTube</title>
        <path fill="none" d="M0 0h24v24H0z"/>
        <path d="M21.543 6.498C22 8.28 22 12 22 12s0 3.72-.457 5.502c-.254.985-.997 1.76-1.938 2.022C17.896 20 12 20 12 20s-5.893 0-7.605-.476c-.945-.266-1.687-1.04-1.938-2.022C2 15.72 2 12 2 12s0-3.72.457-5.502c.254-.985.997-1.76 1.938-2.022C6.107 4 12 4 12 4s5.896 0 7.605.476c.945.266 1.687 1.04 1.938 2.022zM10 15.5l6-3.5-6-3.5v7z"/>

    </symbol>

    <symbol id="pinterest-icon" viewBox="0 0 24 24">
        <title>Pinterest</title>
        <path fill="none" d="M0 0h24v24H0z"/>
        <path d="M13.37 2.094A10.003 10.003 0 0 0 8.002 21.17a7.757 7.757 0 0 1 .163-2.293c.185-.839 1.296-5.463 1.296-5.463a3.739 3.739 0 0 1-.324-1.577c0-1.485.857-2.593 1.923-2.593a1.334 1.334 0 0 1 1.342 1.508c0 .9-.578 2.262-.88 3.54a1.544 1.544 0 0 0 1.575 1.923c1.898 0 3.17-2.431 3.17-5.301 0-2.2-1.457-3.848-4.143-3.848a4.746 4.746 0 0 0-4.93 4.794 2.96 2.96 0 0 0 .648 1.97.48.48 0 0 1 .162.554c-.046.184-.162.623-.208.784a.354.354 0 0 1-.51.254c-1.384-.554-2.036-2.077-2.036-3.816 0-2.847 2.384-6.255 7.154-6.255 3.796 0 6.32 2.777 6.32 5.747 0 3.909-2.177 6.848-5.394 6.848a2.861 2.861 0 0 1-2.454-1.246s-.578 2.316-.692 2.754a8.026 8.026 0 0 1-1.019 2.131c.923.28 1.882.42 2.846.416a9.988 9.988 0 0 0 9.996-10.003 10.002 10.002 0 0 0-8.635-9.903z"/>
    </symbol>
    </defs>
</svg>

我为什么要把它们放在一个雪碧上？我想你preload它。如果这种方法/技术是可能的话。

<link rel="preload" as="image" href="sprite.svg">

任何建议/修正(正面和负面)都很感激，只是对我被分配到的SEO任务的关注。

Answer 1

几次前，当我发现加载整个图标库(字体很棒，谷歌图标)的时间时，我也有同样的想法，甚至从CDN中也是如此。

所有这些加载网站使用8或10个图标。

我试过sprite，但是我总是困惑于在常规的HTML中使用sprite (主要是垂直对齐、大小和颜色问题)。

我为svg库设计了两个不同的github。一个是如何拥有纯CSS svg库，第二个是使用嵌入式svg图标。在这些中，图标可以很容易地与文本或其他html标记对齐，很容易调整大小并继承颜色。

检查这里：

https://github.com/pierfarrugia/svgicons_css

https://github.com/pierfarrugia/svgicons_embed

你当然能找到解决问题的办法。

Answer 2

你在这里提出了一些好问题！

简短的回答:尽可能使用内嵌的SVG！

案例图像/图表：

通过标签加载一个单独的.svg映像是有意义的，当它应该是可变的，例如通过一个CMS系统由一个编辑器。用这种方式处理SVG就像处理IMG一样。它的优点是在像图标、图表等情况下使用矢量图形而不是象素图形。

案例图标或徽标：(常用用例)

在html代码中使用内联SVG作为字体图标的替代()是一个好主意，因为：

sharp

• is

1. 的扩展性更好，并且总是很容易通过CSS进行更改，例如，颜色
2. 与html一起加载，并在上立即显示，因为它不需要加载不同的文件。

< code >H 116将其多次复制在html代码中并不重要，因为e 117gzip压缩<代码>E 218(由服务器)消除了传输文件大小H 219G 220(由服务器处理)的开销。

因此，当您可以在代码中直接使用svg时，使用SVG精灵是没有意义的。

请注意:在将SVG放入代码之前，最好先清除SVG，特别是当您来自诸如Illustrator这样的图形软件时。最好的工具是https://jakearchibald.github.io/svgomg/。通过代码，看看它是如何清理的。

Answer 3

使其成为本机JavaScript Web组件<svg-icon> (在所有浏览器中都支持)

• 只定义了一次

• 从最小JavaScript

创建SVG客户端。

• 包括其行为

• ，所以它是一个Web组件，可以放到任何应用程序

中。

​

​

​

<style>  svg-icon{ width:76px;background:hotpink } </style>

<svg-icon></svg-icon>
<svg-icon is="facebook"></svg-icon>
<svg-icon is="instagram"></svg-icon>
<svg-icon is="twitter"></svg-icon>
<svg-icon is="youtube"></svg-icon>
<svg-icon is="pinterest"></svg-icon>

<script>
customElements.define( "svg-icon", class extends HTMLElement {
    connectedCallback() {
      this.style.cursor = "pointer";
      this.style.display = "inline-block";
      let icon = this.getAttribute("is") || "user";
      this.innerHTML = `<svg viewBox="0 0 24 24"><title>${icon}</title>
          ${{
             user:     `<path d="M4 22a8 8 0 1 1 16 0h-2a6 6 0 1 0-12 0H4zm8-9c-3.315 0-6-2.685-6-6s2.685-6 6-6 6 2.685 6 6-2.685 6-6 6zm0-2c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4z"/>`,
             facebook: `<path d="M14 13.5h2.5l1-4H14v-2c0-1.03 0-2 2-2h1.5V2.14c-.326-.043-1.557-.14-2.857-.14C11.928 2 10 3.657 10 6.7v2.8H7v4h3V22h4v-8.5z"/>`,
             instagram:`<path d="M12 2c2.717 0 3.056.01 4.122.06 1.065.05 1.79.217 2.428.465.66.254 1.216.598 1.772 1.153a4.908 4.908 0 0 1 1.153 1.772c.247.637.415 1.363.465 2.428.047 1.066.06 1.405.06 4.122 0 2.717-.01 3.056-.06 4.122-.05 1.065-.218 1.79-.465 2.428a4.883 4.883 0 0 1-1.153 1.772 4.915 4.915 0 0 1-1.772 1.153c-.637.247-1.363.415-2.428.465-1.066.047-1.405.06-4.122.06-2.717 0-3.056-.01-4.122-.06-1.065-.05-1.79-.218-2.428-.465a4.89 4.89 0 0 1-1.772-1.153 4.904 4.904 0 0 1-1.153-1.772c-.248-.637-.415-1.363-.465-2.428C2.013 15.056 2 14.717 2 12c0-2.717.01-3.056.06-4.122.05-1.066.217-1.79.465-2.428a4.88 4.88 0 0 1 1.153-1.772A4.897 4.897 0 0 1 5.45 2.525c.638-.248 1.362-.415 2.428-.465C8.944 2.013 9.283 2 12 2zm0 5a5 5 0 1 0 0 10 5 5 0 0 0 0-10zm6.5-.25a1.25 1.25 0 0 0-2.5 0 1.25 1.25 0 0 0 2.5 0zM12 9a3 3 0 1 1 0 6 3 3 0 0 1 0-6z"/>`,
             twitter:  `<path d="M22.162 5.656a8.384 8.384 0 0 1-2.402.658A4.196 4.196 0 0 0 21.6 4c-.82.488-1.719.83-2.656 1.015a4.182 4.182 0 0 0-7.126 3.814 11.874 11.874 0 0 1-8.62-4.37 4.168 4.168 0 0 0-.566 2.103c0 1.45.738 2.731 1.86 3.481a4.168 4.168 0 0 1-1.894-.523v.052a4.185 4.185 0 0 0 3.355 4.101 4.21 4.21 0 0 1-1.89.072A4.185 4.185 0 0 0 7.97 16.65a8.394 8.394 0 0 1-6.191 1.732 11.83 11.83 0 0 0 6.41 1.88c7.693 0 11.9-6.373 11.9-11.9 0-.18-.005-.362-.013-.54a8.496 8.496 0 0 0 2.087-2.165z"/>`,
             youtube:  `<path d="M21.543 6.498C22 8.28 22 12 22 12s0 3.72-.457 5.502c-.254.985-.997 1.76-1.938 2.022C17.896 20 12 20 12 20s-5.893 0-7.605-.476c-.945-.266-1.687-1.04-1.938-2.022C2 15.72 2 12 2 12s0-3.72.457-5.502c.254-.985.997-1.76 1.938-2.022C6.107 4 12 4 12 4s5.896 0 7.605.476c.945.266 1.687 1.04 1.938 2.022zM10 15.5l6-3.5-6-3.5v7z"/>`,
             pinterest:`<path d="M13.37 2.094A10.003 10.003 0 0 0 8.002 21.17a7.757 7.757 0 0 1 .163-2.293c.185-.839 1.296-5.463 1.296-5.463a3.739 3.739 0 0 1-.324-1.577c0-1.485.857-2.593 1.923-2.593a1.334 1.334 0 0 1 1.342 1.508c0 .9-.578 2.262-.88 3.54a1.544 1.544 0 0 0 1.575 1.923c1.898 0 3.17-2.431 3.17-5.301 0-2.2-1.457-3.848-4.143-3.848a4.746 4.746 0 0 0-4.93 4.794 2.96 2.96 0 0 0 .648 1.97.48.48 0 0 1 .162.554c-.046.184-.162.623-.208.784a.354.354 0 0 1-.51.254c-1.384-.554-2.036-2.077-2.036-3.816 0-2.847 2.384-6.255 7.154-6.255 3.796 0 6.32 2.777 6.32 5.747 0 3.909-2.177 6.848-5.394 6.848a2.861 2.861 0 0 1-2.454-1.246s-.578 2.316-.692 2.754a8.026 8.026 0 0 1-1.019 2.131c.923.28 1.882.42 2.846.416a9.988 9.988 0 0 0 9.996-10.003 10.002 10.002 0 0 0-8.635-9.903z"/>`
            }[icon] || console.error("invalid is:", icon)
           }</svg>`;
      this.onclick = (evt) => {
        console.log("clicked:", icon);
      }
      this.onmouseenter = (evt) => this.style.background = "green";
      this.onmouseleave = (evt) => this.style.background = "pink";
    }
  }
);
</script>

​

如果您想进一步推进这N步，请参见：https://iconmeister.github.io