在Web上正確使用SVG-有解無憂

我想知道在 HTML 檔案上使用 SVG 的最佳方式是什么。

我讀過一篇文章指出，為了更好的性能和減少 HTTP（網路）呼叫，最好使用 SVG 圖示而不是圖示字體（即 fontawesome 等）。并促進搜索引擎優化。

我知道如何使用/包含 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 任務。

uj5u.com熱心網友回復：

前段時間，當我發現整個圖示庫（字體很棒，谷歌圖示）甚至來自 CDN 的加載時間時，我也有過同樣的想法。

使用 8 或 10 個圖示的網站的所有這些加載。

我嘗試了 svg sprite，但我總是對在常規 HTML CSS 中使用 sprite 感到困惑（主要是垂直對齊、大小和顏色問題）。

我用 2 個不同的 svg 庫想法制作了 github。一是如何擁有純 CSS svg 庫，二是使用嵌入式 svg 圖示。在那些中，圖示可以很容易地與文本或其他 html 標簽對齊，很容易調整大小和繼承顏色。

在這里檢查：

https://github.com/pierfarrugia/svgicons_css

https://github.com/pierfarrugia/svgicons_embed

您當然可以找到解決問題的想法

uj5u.com熱心網友回復：

你在這里提出了一些很好的問題！

簡短回答：盡可能使用行內 SVG！

案例圖片/圖表：

通過標簽加載一個單獨的 .svg 影像是有意義的，當它應該是可變的時，例如由編輯器通過 CMS 系統。這樣處理 SVG 的方式與處理 IMG 的方式相同。對于圖示、圖表等情況，它具有使用矢量圖形而不是像素圖形的優勢。

案例圖示或徽標：（通常用例）

在 html 代碼中使用行內 SVG作為字體圖示的 ( <svg xmlns="..."><path></svg>) 替換是一個好主意，因為：

縮放得更好并且總是很鋒利
可以通過 CSS輕松更改，例如顏色
立即加載 html 并立即顯示，因為它不必加載不同的檔案。
在 html 代碼中在頁面上多次復制并不重要，因為gzip 壓縮（由服務器）消除了有關傳輸檔案大小的開銷

因此，當您可以在代碼中直接使用 SVG 時，使用 svg 精靈沒有意義。

請注意：在將 SVG 放入您的代碼之前清理 SVG是個好主意，尤其是當您來自 Illustrator 等圖形軟體時。最好的工具是https://jakearchibald.github.io/svgomg/。通過代碼，看看它是如何被清理的。

uj5u.com熱心網友回復：

使其成為原生 JavaScript Web 組件<svg-icon>（所有瀏覽器都支持）

只定義一次
從最小的 JavaScript創建 SVG客戶端
包括它的行為
所以它是一個 Web 組件，您可以放入任何應用程式

在 Web 上正確使用 SVG

<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

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/535756.html

標籤：网页格式表现网络svg搜索引擎优化

上一篇：我可以重寫這段代碼以使其運行得更快嗎？

下一篇：移動到較新版本后，mariaDB10.5.8存盤視圖非常慢