我受到 Bytes #293 HTML 主要內容的激勵。他們的動機來自 HTML 2023 現狀調查（以及金錢......但讓我們從郵件中保留贊助部分）。
看來
如果您根本不熟悉這些東西，我可以幫助您提供一些開始連結。之後，什麼都不會改變，但你會更了解 svg
́_(ツ)_/́
Tl;DR
SVG 元素是向量圖形元素。這可以理解為一堆用字元表示的幾何圖形。您可以使用 Adobe Illustrator 或 Inkscape 作為免費替代方案來建立一個。
從人們的回答中，我們可以看到一些規律。我不會選擇任何特定的主題，但我會嘗試分享一些圍繞這些主題的知識，以便您可以在這裡找到一些提示和技巧、分享經驗和圍繞該主題的其他常識。
我將跳過 SVG 精靈主題，就像這個例子一樣。這是一個單獨的主題，與 svg 標籤關係不大。我只能同意，您仍然可以為它們找到一些罕見的用例。
正確的 SVG 檔案應該是上述幾何圖形的表示。很容易檢查我們的圖標是否由設計師或您使用它的網站以正確的格式準備。
錯誤範例：
預期語法：
在我的職業生涯中，我曾多次遇到這種情況。值得記住這一點。當您取得光柵圖形，將它們匯入向量圖形程式並嘗試以 .svg 副檔名匯出它們時，就會發生這種情況。它不會神奇地將您的圖像轉換為向量圖形。
我可以提供您大多數通用 svg 元素的備忘單。
| Tag | Description | Animated attributes |
|---|---|---|
| used for grouping elements | - | |
| main tag for your actual icon. Avoid modifying the d="" attribute on your own ? It is possible but be careful with that. Grab a link with an explanation for each character group. To animate your path use animateMotion tag | - | |
| Basic rectangle shape in SVG. Simple as that | ✅ | |
| Simple as that. The line between two points. Don't mistake with the stroke attribute! It can also be used on the line tag. | ✅ | |
| You can think about it as an enhancement version of the g tag but it keeps the elements inside invisible for later use with, let's guess it... use tag | - | |
| Next basic shape. Be careful as the size is defined by radius and you position your circle with cx and cy attributes. | ✅ | |
| Let's call it a custom shape. They are connected straight lines where the last point connects to the first point. | ✅ | |
| Very similar to the previous one but with a notable difference. The last point doesn't need to be connected to the first point. | ✅ |
請注意，這些只是一些選定的 SVG 元素。我剛剛描述了最常見的。還有很多可供您使用。完整列表可以在這裡找到。
由於我們現在熟悉了一些常見的 svg 標籤，我們可以進入下一段修改圖示的基本參數。
假設我們與一位年輕設計師合作。他/她並不像您一樣完全知道如何為網路做好準備。因此，有時您會看到圖示大小略有不同，且兩側缺少剪切填充。
| good one | wrong one |
|---|---|
 |
 |
經典案例。我知道我們應該與設計師進行快速通話並澄清這一點，但我們想在這裡學習一些 svg。在這種情況下我們不會這樣做。我們可以自己修復。
從程式碼的角度來看，都是關於屬性的。原始的 SVG 交叉檔案如下所示：
結果：
幾乎就是我們想要的！讓我們進一步深入研究如何保留第一個圖標中的填充。
我們有2個選擇。我們可以保持相同的 viewBox 值，也可以調整每個巢狀標籤上的每個寬度、高度、x 和 y 值。
第一個選項看起來很簡單，對我們來說效果很好，但可能有一個問題。就我而言，我的群組標籤上有這個奇怪的轉換屬性。
現在我們的圖示大小是可以調整的。請注意，它是向量圖形，因此調整大小後我們不會失去圖標品質。
那為什麼 viewBox 如此重要？
當我們想要正確縮放或設定圖示的某個位置時，這是關鍵。它有 4 個參數 viewBox="min-x min-y width height".
例如，viewBox="0 0 100 100" 表示左上角位於 (0, 0)，viewBox 寬 100 個單位，高 100 個單位。
這表示您必須在變更 viewBox 後調整圖示的 x 和 y 屬性，因為它們是根據其值設定的。
不同的圖示允許不同的填充。當然，它可以像添加顏色樣式一樣簡單，但這是菜鳥等級的程式碼。
真正的開發人員正在向主元素添加 fill-rule="evenodd" 並從標籤中刪除所有其他手動填充屬性？
你可能想知道為什麼。
我將對此提供盡可能簡短的答案。直接從我們的 IDE 中使用一行程式碼自由自訂圖示顏色。
你可能會問怎麼可能。
如果您正在處理公司設計系統中的一個簡單圖標，您應該只能匯入一個圖標。無需修改或重複大小或顏色。
從程式碼角度來看，您只需在 svg 元素上新增填充，就像通常使用顏色屬性一樣。
在繪製多邊形或路徑時，偶數值有一個問題。它只會填滿交叉路徑段的內部。
考慮分析這個例子，以防你遇到困難。
因此，對於我們的十字圖標，它會導致如下所示的結果：
在我們將圖示發佈到網路之前（或從 Figma 下載圖示之後），我們應該確保它得到了適當的最佳化。這一點非常重要。在最後一哩的程式碼審查過程中，我被抓到或被抓到的次數太多了。
SVGO（或反應的 SVGR）使其成為一個非常簡單的過程。在幕後，它主要刪除了我們所有不必要的東西。
總的來說，它是一個首選工具。您要么想將其與捆綁器集成，要么從 CLI 使用它。安裝後即可使用，因為我們已經配置了開箱即用的預設預設。
注意：如果您確實想要，您可以覆蓋預設預設。檢查項目README中的配置和文件中的插件清單
最終的圖示程式碼如下圖所示：
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 50 50"><g fill-rule="evenodd">
<p>我們將從 inkspace 匯出的原始圖示的大小從 871 位元組減少到僅 322 位元組。 </p>
<h2>
動畫帶來的痛苦
</h2>
<p>最後一個對我來說苦樂參半的話題。它也多次出現在調查答案中。除了使用 Lottie 或在 CSS 中手動設定 SVG 元素的動畫之外，我不知道更好的方法。當您要製作動畫的元素超過 5 個時，第二個選項絕對是折磨。 </p>
<p>當然，這是可能的，我們可以做到，但說實話，還有更多有趣的事情要做？ </p>
<p>假設您仍然好奇如何做到這一點。我在這裡留下一篇精彩文章的連結。它應該讓您相信這需要耐心並且需要 5 分鐘以上。我想知道人工智慧機器人是否可以幫助您！如果是的話，也許會減輕一點痛苦。 </p>
<p>現在就這樣。 <br>
希望您能從這篇文章中學到一些東西並度過愉快的一天？ </p>
</g></svg>以上是SVG 技巧為您服務的詳細內容。更多資訊請關注PHP中文網其他相關文章！
