我受到 Bytes #293 HTML 主要內(nèi)容的激勵。他們的動機(jī)來自 HTML 2023 現(xiàn)狀調(diào)查（以及金錢......但讓我們從郵件中保留贊助部分）。

看來

切入點(diǎn)

如果您根本不熟悉這些東西，我可以幫助您提供一些開始連結(jié)。之後，什麼都不會改變，但你會更了解 svg
?_(ツ)_/?

• https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web
• https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Introduction
• 來自 MDN 的 SVG 教學(xué)：https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Getting_Started

Tl;DR

SVG 元素是向量圖形元素。這可以理解為一堆用字元表示的幾何圖形。您可以使用 Adob??e Illustrator 或 Inkscape 作為免費(fèi)替代方案來建立一個。

起點(diǎn)

從人們的回答中，我們可以看到一些規(guī)律。我不會選擇任何特定的主題，但我會嘗試分享一些圍繞這些主題的知識，以便您可以在這裡找到一些提示和技巧、分享經(jīng)驗(yàn)和圍繞該主題的其他常識。

我將跳過 SVG 精靈主題，就像這個例子一樣。這是一個單獨(dú)的主題，與 svg 標(biāo)籤關(guān)係不大。我只能同意，您仍然可以為它們找到一些罕見的用例。

文件語法

正確的 SVG 檔案應(yīng)該是上述幾何圖形的表示。很容易檢查我們的圖標(biāo)是否由設(shè)計(jì)師或您使用它的網(wǎng)站以正確的格式準(zhǔn)備。

錯誤範(fàn)例：

預(yù)期語法：

在我的職業(yè)生涯中，我曾多次遇到這種情況。值得記住這一點(diǎn)。當(dāng)您取得光柵圖形，將它們匯入向量圖形程式並嘗試以 .svg 副檔名匯出它們時，就會發(fā)生這種情況。它不會神奇地將您的圖像轉(zhuǎn)換為向量圖形。

值得注意的 SVG 標(biāo)籤

我可以提供您大多數(shù)通用 svg 元素的備忘單。

請注意，這些只是一些選定的 SVG 元素。我剛剛描述了最常見的。還有很多可供您使用。完整列表可以在這裡找到。

尺寸和定位

由於我們現(xiàn)在熟悉了一些常見的 svg 標(biāo)籤，我們可以進(jìn)入下一段修改圖示的基本參數(shù)。

假設(shè)我們與一位年輕設(shè)計(jì)師合作。他/她並不像您一樣完全知道如何為網(wǎng)路做好準(zhǔn)備。因此，有時您會看到圖示大小略有不同，且兩側(cè)缺少剪切填充。

經(jīng)典案例。我知道我們應(yīng)該與設(shè)計(jì)師進(jìn)行快速通話並澄清這一點(diǎn)，但我們想在這裡學(xué)習(xí)一些 svg。在這種情況下我們不會這樣做。我們可以自己修復(fù)。

從程式碼的角度來看，都是關(guān)於屬性的。原始的 SVG 交叉檔案如下所示：

結(jié)果：

幾乎就是我們想要的！讓我們進(jìn)一步深入研究如何保留第一個圖標(biāo)中的填充。

我們有2個選擇。我們可以保持相同的 viewBox 值，也可以調(diào)整每個巢狀標(biāo)籤上的每個寬度、高度、x 和 y 值。

第一個選項(xiàng)看起來很簡單，對我們來說效果很好，但可能有一個問題。就我而言，我的群組標(biāo)籤上有這個奇怪的轉(zhuǎn)換屬性。

現(xiàn)在我們的圖示大小是可以調(diào)整的。請注意，它是向量圖形，因此調(diào)整大小後我們不會失去圖標(biāo)品質(zhì)。

那為什麼 viewBox 如此重要？

當(dāng)我們想要正確縮放或設(shè)定圖示的某個位置時，這是關(guān)鍵。它有 4 個參數(shù) viewBox="min-x min-y width height".

例如，viewBox="0 0 100 100" 表示左上角位於 (0, 0)，viewBox 寬 100 個單位，高 100 個單位。

這表示您必須在變更 viewBox 後調(diào)整圖示的 x 和 y 屬性，因?yàn)樗鼈兪歉鶕?jù)其值設(shè)定的。

管理顏色和填充

不同的圖示允許不同的填充。當(dāng)然，它可以像添加顏色樣式一樣簡單，但這是菜鳥等級的程式碼。

真正的開發(fā)人員正在向主元素添加 fill-rule="evenodd" 並從標(biāo)籤中刪除所有其他手動填充屬性？

你可能想知道為什麼。

我將對此提供盡可能簡短的答案。直接從我們的 IDE 中使用一行程式碼自由自訂圖示顏色。

你可能會問怎麼可能。

如果您正在處理公司設(shè)計(jì)系統(tǒng)中的一個簡單圖標(biāo)，您應(yīng)該只能匯入一個圖標(biāo)。無需修改或重複大小或顏色。

從程式碼角度來看，您只需在 svg 元素上新增填充，就像通常使用顏色屬性一樣。

在繪製多邊形或路徑時，偶數(shù)值有一個問題。它只會填滿交叉路徑段的內(nèi)部。

考慮分析這個例子，以防你遇到困難。

因此，對於我們的十字圖標(biāo)，它會導(dǎo)致如下所示的結(jié)果：

最佳化

在我們將圖示發(fā)佈到網(wǎng)路之前（或從 Figma 下載圖示之後），我們應(yīng)該確保它得到了適當(dāng)?shù)淖罴鸦?。這一點(diǎn)非常重要。在最後一哩的程式碼審查過程中，我被抓到或被抓到的次數(shù)太多了。

SVGO（或反應(yīng)的 SVGR）使其成為一個非常簡單的過程。在幕後，它主要刪除了我們所有不必要的東西。

總的來說，它是一個首選工具。您要么想將其與捆綁器集成，要么從 CLI 使用它。安裝後即可使用，因?yàn)槲覀円呀?jīng)配置了開箱即用的預(yù)設(shè)預(yù)設(shè)。

注意：如果您確實(shí)想要，您可以覆蓋預(yù)設(shè)預(yù)設(shè)。檢查項(xiàng)目README中的配置和文件中的插件清單

結(jié)果

最終的圖示程式碼如下圖所示：

<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>最後一個對我來說苦樂參半的話題。它也多次出現(xiàn)在調(diào)查答案中。除了使用 Lottie 或在 CSS 中手動設(shè)定 SVG 元素的動畫之外，我不知道更好的方法。當(dāng)您要製作動畫的元素超過 5 個時，第二個選項(xiàng)絕對是折磨。 </p>

<p>當(dāng)然，這是可能的，我們可以做到，但說實(shí)話，還有更多有趣的事情要做？ </p>

<p>假設(shè)您仍然好奇如何做到這一點(diǎn)。我在這裡留下一篇精彩文章的連結(jié)。它應(yīng)該讓您相信這需要耐心並且需要 5 分鐘以上。我想知道人工智慧機(jī)器人是否可以幫助您！如果是的話，也許會減輕一點(diǎn)痛苦。 </p>

<p>現(xiàn)在就這樣。 <br>
希望您能從這篇文章中學(xué)到一些東西並度過愉快的一天？ </p>


          

            
        </g></svg>

以上是SVG 技巧為您服務(wù)的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！