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

看來

切入點(diǎn)

如果您根本不熟悉這些東西，我可以幫助您提供一些開始鏈接。之后，什么都不會(huì)改變，但你會(huì)更多地了解 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 教程：https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Getting_Started

Tl;DR

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

起點(diǎn)

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

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

文件語(yǔ)法

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

錯(cuò)誤示例：

<svg ...><image link:href="data:image/png;base64 .../>

預(yù)期語(yǔ)法：

<svg><g><path r=""/><circle /></g></svg>

在我的職業(yè)生涯中，我曾多次遇到過這種情況。值得記住這一點(diǎn)。當(dāng)您獲取光柵圖形，將它們導(dǎo)入矢量圖形程序并嘗試以 .svg 擴(kuò)展名導(dǎo)出它們時(shí)，就會(huì)發(fā)生這種情況。它不會(huì)神奇地將您的圖像轉(zhuǎn)換為矢量圖形。

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

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

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

尺寸和定位

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

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

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

從代碼的角度來看，都是關(guān)于屬性的。原始的 SVG 交叉文件如下所示：

<svg ...><image link:href="data:image/png;base64 .../>

結(jié)果：

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

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

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

<svg><g><path r=""/><circle /></g></svg>

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

那么為什么 viewBox 如此重要？

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

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

這意味著您必須在更改 viewBox 后調(diào)整圖標(biāo)的 x 和 y 屬性，因?yàn)樗鼈兪歉鶕?jù)其值設(shè)置的。

管理顏色和填充

不同的圖標(biāo)允許不同的填充。當(dāng)然，它可以像添加顏色樣式一樣簡(jiǎn)單，但這是菜鳥級(jí)別的代碼。

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

你可能想知道為什么。

我將對(duì)此提供盡可能簡(jiǎn)短的答案。直接從我們的 IDE 中使用一行代碼自由自定義圖標(biāo)顏色。

你可能會(huì)問這怎么可能。

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

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

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   width="93.582886"
   height="93.582893"
   viewBox="0 0 24.760471 24.760474"
   version="1.1"
  >



<p>This is our raw svg exported from Inkscape. There are a few other things to fix, bear with me so we can fix them.</p>

<p>We know that 200px image is our goal. Here we have some ugly width/height values on the main svg tag.</p>

<p>Simply:<br>
</p>

<pre class="brush:php;toolbar:false"><svg
-   width="93.582886"
+   width="200"
-   height="93.582893"
+   height="200"

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

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

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

優(yōu)化

在我們將圖標(biāo)發(fā)布到網(wǎng)絡(luò)之前（或從 Figma 下載圖標(biāo)之后），我們應(yīng)該確保它得到了適當(dāng)?shù)膬?yōu)化。這一點(diǎn)非常重要。在最后一英里的代碼審查過程中，我被抓到或被抓到的次數(shù)太多了。

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

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

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

結(jié)果

最終的圖標(biāo)代碼如下所示：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><g fill-rule="evenodd"><路徑 d= “M9 24h32v3H9z">



<p>我們已將從 inkspace 導(dǎo)出的原始圖標(biāo)的大小從 871 字節(jié)減少到僅 322 字節(jié)。</p>

<h2>
  
  
  動(dòng)畫帶來的痛苦
</h2>

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

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

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

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


          

            
        

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