SVG載荷：與外部SVG一起工作的另一種方式

SVG很棒：它們很小，在任何規模上看起來都很清晰，並且可以在不創建單獨文件的情況下自定義。但是，今天的Web標準中我覺得缺少一些東西：將它們包含在外部文件中，該文件也保留了格式的自定義功能。

例如，假設您想將存儲的網站徽標存儲為Web-logo.svg。您可以做：

 <img  src="%E2%80%9C/images/logo.svg%E2%80%9D/" alt="SVG載荷：與外部SVG一起工作的另一種方式" >

如果您的徽標到處都一樣，那很好。但是在許多情況下，同一徽標有2-3個變體。例如，Slack有兩個版本。

如果我們有一種自定義上面徽標的填充顏色的方法，則可以傳遞任何任意顏色來呈現所有變化。

也以圖標為例。您不想這樣做，對嗎？

 <img  src="%E2%80%9C/icons/heart-blue.svg%E2%80%9D/" alt="SVG載荷：與外部SVG一起工作的另一種方式" >
<img  src="%E2%80%9C/iCons/heart-red.svg%E2%80%9D/" alt="SVG載荷：與外部SVG一起工作的另一種方式" >

加載外部SVG作為內聯元素

為了解決這個問題，我創建了一個名為SVG-Loader的庫。簡而言之，它通過XHR獲取SVG文件，並將其加載為內聯元素，從而使您可以自定義填充和中風等屬性，就像內聯SVG一樣。

例如，我的側面項目SVGBox上有一個徽標。我可以擁有一個文件並自定義填充顏色：

我使用Data-SRC設置了SVG文件的URL。填充屬性覆蓋原始SVG文件的填充。

要使用圖書館，我唯一要確保的是要提供的文件具有適當的CORS標題以使XHR成功。庫還在本地緩存文件，使後續文件更快。即使對於第一個負載，性能也與使用標籤相當。

這個概念並不新鮮。 SVG Injext做類似的事情。但是，SVG-LOADER更易於使用，因為我們只需要在您的代碼中包含庫（通過<script>標籤或JavaScript Bundle中）。不需要額外的代碼。</script>

動態增添元素和屬性的變化也會自動處理，這確保了它與所有Web框架一起工作。這是React的一個例子：

但為什麼？

這種方法可能會感到非正統，因為它引入了JavaScript依賴性，並且已經有多種使用SVG的方法，包括內聯和外部來源。但是有一個很好的情況，可以通過這種方式使用SVG。讓我們通過回答常見問題來檢查它們。

我們可以自己不僅僅是內聯SVG嗎？

插入是使用SVG的最簡單方法。只需在HTML中復制並粘貼SVG代碼即可。這就是SVG載荷最終正在做的。那麼，為什麼還要添加額外的步驟來從其他地方加載SVG文件呢？有兩個主要原因：

1. 內聯SVG使代碼冗長： SVG可以從幾行到幾百行。如果您需要的只是幾個圖標，並且它們都很小，則內線SVG可以很好地工作。但是，如果它們很大或很多，這將成為主要的痛苦，因為那樣，它們就變成了不是“商業邏輯”的代碼中的長文本。代碼很難解析。
   
   這與更喜歡外部樣式表而不是標籤或使用圖像而不是數據URIS相同。難怪在React代碼庫中，首選方法是將SVG用作單獨的組件，而不是將其定義為JSX的一部分。

2. 外部SVG更加方便：複製和粘貼通常可以完成工作，但是外部SVG確實很方便。假設您正在嘗試在應用程序中使用哪種圖標。如果您使用的是Inline SVG，則意味著來回獲取SVG代碼。但是，使用外部SVG，您只需要知道文件的名稱即可。
   
   看看這個示例。 GitHub上最廣泛的圖標存儲庫之一是材料設計圖標。使用SVG-LOADER和UNPKG，我們可以立即開始使用5,000個圖標中的任何一個。

對於每個SVG而不是製作精靈，觸發HTTP請求不是效率低嗎？

並不真地。使用HTTP2，提出HTTP請求的成本已變得較小。是的，捆綁仍然有好處（例如，更好的壓縮），但是對於非阻滯資源和XHR，在現實世界中，專業人士幾乎不存在。

這是一支與上麵類似的方式加載50個圖標的筆。 （默認情況下，以隱身模式打開，因為文件被緩存）：

那標籤（SVG符號）呢？

SVG符號將SVG文件的定義與其使用分開。我們可以擁有這樣的東西，而不是在任何地方定義SVG：

 <svg>
  
</svg>

問題在於，沒有使用第三方域上託管的符號文件的瀏覽器支持。因此，我們不能做這樣的事情：

 <svg>
  
</svg>

Safari甚至不支持託管在同一域上的符號文件。

我們不能使用嵌入SVG的構建工具嗎？

我找不到一種明顯的方法來從URL獲取SVG並將其插入通用捆綁包中，例如WebPack和Grunt，儘管它們存在於本地存儲的SVG文件中。即使存在此操作的插件，設置捆綁器也不是完全簡單的。實際上，我經常避免使用它們，直到項目達到確定的複雜性水平為止。我們還必須意識到，大多數互聯網與諸如WebPack和反應之類的事情都是陌生的。簡單的腳本可以具有更大的吸引力。

那標籤呢？

標籤是包含所有瀏覽器中工作的外部SVG文件的本機方法。

 <object data="“" https: preected width="”"> </object>

但是，缺點是我們無法自定義SVG的屬性，除非它託管在同一域上（並且標籤不尊重CORS標題）。即使文件託管在同一域上，我們也需要JavaScript來操縱填充，如以下：

 <object data="“" https:><p>簡而言之，使用以這種方式使用外部SVG文件使使用圖標和其他SVG資產的超符合意義。如前所述，使用UNPKG，我們可以在GitHub上使用任何圖標，而無需額外的代碼。我們可以避免在捆綁器中創建管道來處理每個圖標的SVG文件或組件，而只是在CDN上託管圖標。</p>
<p>以這種方式加載SVG文件可以包裝很多好處，成本很少。</p></object>

以上是SVG載荷：與外部SVG一起工作的另一種方式的詳細內容。更多資訊請關注PHP中文網其他相關文章！