超越'使用”元素的自動SVG壓縮

如果您繪製自己的SVG文件或從Internet下載它們，那麼SVG-編輯或SVGOMG之類的工具是您的朋友。使用這些工具壓縮文件僅需幾秒鐘，並且可以大大降低您的文件大小。但是，如果您需要使用SVG內聯用來與代碼進行動畫或互動，那麼對於代碼可讀性，您仍然可以做很多事情。

重複使用SVG的並不總是一個選擇，但是當它是時，您將不後悔花幾分鐘的時間將其付諸實踐。

在本文中，我將展示一個示例，我能夠利用這一元素的大量優勢 - 不僅是為了保持文件大小，而且還可以更清晰地標記，該標記變得更加清晰，易於維護。

這是我需要使用的第一個設計。它最初是在Illustrator中創建的：

查看以下代碼，這是直接從軟件導出的原始文件，重2.05kb：

這根本不是一個重的文件。但是，打開它，您會發現有很多空的標籤，棄用的命名空間，不必要的空白空間，逗號和軟件應用的額外信息。這使得代碼很難使用，煩人的掃描並為文檔中的數百行創建了一個很大的滾動。

您還會注意到該文件確實使用了和元素，但並非以最佳方式使用。那不是軟件的錯！原始文件中的每個宇航員插圖都有一個剪裁面具：一個無形的圓圈，就像一個窗口一樣，我們可以看到我們的角色。沒有它，宇航員的訴訟將在圓圈外面氾濫成災。在插畫家中，有幾種方法可以避免這種情況，例如使用探路者選項裁剪這些額外的零件。這樣，我們將獲得一些字節，並避免僅使用一個額外的圓圈來剪切我們不會顯示的圖形信息。文件的壓縮從軟件開始。儘管如此，如果我們不想編輯原始文件，我們還可以改進代碼。

用SVGOMG壓縮SVG並保持默認選項不會付出任何努力，您將獲得一個重量為1.46kb的文件。與原始大小相比，這是30％的降低，圖形看起來完全相同。

重複使用內容

這將需要通過SVG並進行一些調整。我知道此選項需要更多時間來了解上一個示例，但這並不像看起來那樣困難。

我們有一個重複的元素，即圓圈內的宇航員。那就是我們將在SVGOMG上壓縮的一種。結果看起來像這樣：

 <svg xmlns="“" http:> .st3，.st4 {填充：＃ffcb2f; stroke：＃12192c; streose width：1.4891; stroke-miterlimit：10} .st4 {fill：＃69b2b1} 
<circle cx="“" cy="“" r="“" fill="“＃12192C”/">   
<circle cx="“" cy="“" r="“" fill="“＃f6a2a4”/">   
<defs> <circle cx="“" cy="“" r="“"></circle> </defs>   
<clippath>  </clippath>
<g clip-path="“" url _>     
     
<path d="“" m74.3 m31.8 .7-c0 .7-.6 z cx="“" cy="“" r="“"></path>     
<circle cx="“" cy="“" r="“"></circle>     
   
</g> 
</circle></circle></svg>

第一建議：

1. 將內容移動到CSS文件（假設您可以使用SVG內聯用戶，並且文檔中鏈接了樣式表）。
2. 用對您有意義的東西重命名ID。
3. 將這些複雜的數字（例如“卒中）=“ 1.489”）圓形亂七八糟，以觸及寬度=“ 1.5”。如果您在Illustrator中調整了向量大小，則可以選擇縮放邊框，這可能會發生。
4. 由於我們的行程線上的Join是圓形的，因此請刪除中風限制=“ 10”，因為我們不需要它。
5. 該代碼將是我們的宇航員模板。我們需要將所有內容包裝在一個組中，向該組添加ID並將其放置在標籤中。請注意，我們已經有一個元素，其中有一個圓。我們可以刪除它，因為它將是較大的標籤的一部分。

請注意，前兩個圓圈的形狀具有不同的半徑和顏色。我們可以保持較小的速度並添加足夠大以達到相同的效果的效果 - 同樣，我們可以避免使用Illustrator中帶有邊框的圓圈。

另一個重要的是，我們當前的視圖框太小，無法構建。讓我們變得更大，並在X軸上添加一些負空間，以便我們可以開始從中間克隆宇航員。

要了解有關Viewbox的更多信息，請查看Amelia Wattenberger的《 Scaling Svering Svg》的精美指南。

我們將以這樣的方式結束：

 <svg xmlns="“" http:>
  <g>
   <circle cx="“" cy="“" r="“" fill="“" currentcolor stroke="“＃12192c”" stroke-width="“"></circle> <clippath> <circle cx="“" cy="”" r="”"></circle> > > > > > > > > > > > > > > > > > > > > > > > > > > > >
   <g clip-path="“" url>  <path d="”" .7-.7-.5></path> <circle cx="“" cy="”" r="“"></circle> <ciripe cy r="“"></ciripe>  <path fill="“" none streoke="“＃12192c”" stroke-width="“" stroke-linecap="”" rond d="“" m76.3>
 
</path></g></clippath></g></svg>

內部的內容不會在任何地方渲染。要開始克隆我們的宇航員，我們需要將其ID鏈接在元素中：

Xlink：自SVG2以來，HREF被棄用，但最好將其用於兼容目的。您可以在現代瀏覽器中使用HREF，但是我在Safari上對其進行了測試，並且在撰寫本文時也無法使用。如果您使用使用：HREF，請確保在SVG標籤中包含此名稱空間：XMLNS：XLINK =“ http://www.w3.org/19999/xlink（如果您決定使用HREF，則不需要它）。

現在，我們可以將相應的文本添加到第一個圖中，並將其與變換屬性對齊。我們最好將這兩個元素放在一個小組中，因此將來我們將能夠將整個小組轉換為我們想要的位置：

 <g transform="“轉換（-95">
  
  <text transform="“轉換（25">技術領導者</text>
</g>

連接線是可以直接使用直接繪製的簡單形狀。路徑看起來很恐怖，但是對於矩線來說，無需擔心。我將解釋此代碼：

d =“”是用於數據的，這就是我們將命令放置的地方。 M是將我們的手移到我們開始繪畫的地方（但這沒有繪製任何內容）。 -4 200意味著我們將鉛筆放在左側的四個單元，將200個單元放在視圖框的底部（遵循SVG坐標系的方向）。 v是開始繪製垂直線的命令，該垂直線將從此位置轉到-25個單位。 H用於水平，因此我們在從那裡到200到200的線。感覺就像徽標作家。

我以三個路徑分開了線，但是在一系列命令後，我們只能使用一個帶有M值的線，以移動我們的手並開始從坐標系中的新點開始繪製。

看看最終文檔。現在，該文件重779個字節，並具有12行可讀和可擴展的代碼：

如果我們在中定義的屬性中聲明任何值，則由於元素的性質，不可能在其克隆中更改它。這就是為什麼在上面的示例中，主圓的填充被用電流彩色的值代替，以控制所有復制的背景。 CurrentColor將繼承該元素的CSS顏色值（或上方的任何元素）。在SVG中，我正在為某些複製的宇航員添加一類，並在CSS中添加顏色值。這樣，我將能夠在該類中更改元素的所有實例。要了解有關以及如何設計其內容的更多信息，Sara Soueidan的這篇文章擁有您需要知道的一切。

準備好此代碼後，我們將能夠更輕鬆地將圖形擴展到類似的內容：

以下是並排比較可讀性和代碼量的三個示例，我們從241到10條整齊的行：

以上是超越'使用”元素的自動SVG壓縮的詳細內容。更多資訊請關注PHP中文網其他相關文章！