前言
SVG 能玩這麼多花樣。今日前端早讀課文章由騰訊 @Yodonicc 授權，公號：智影造夢師。
1、騰訊 Web Assembly 工程師，擁有豐富的 Web 音視頻開發經驗，攻克了 WASM 在 Web 音視頻領域落地的一些難題。同時關注前端前沿技術，樂於翻譯分享2、點擊下方 「閱讀原文」 一鍵直達作者個人知乎首頁
正文從這開始～～
智能 SVG 技術，從生成性 SVG 網格到帶蒙版的 SVG 路徑、顆粒狀 SVG 梯度漸變、切割效果和 SVG 五星制打分效果。讓我們來看看一些神奇的 SVG 技術，你可以馬上使用。
在過去的幾年裡，SVG 已經變得越來越流行。這是有原因的。它們是可擴展的、靈活的，而且最重要的是，是輕量級的。而且，它們所提供的東西甚至比你想象的還要多。我們最近發現了一些神奇的 SVG 技術，我們很願意與你分享。從 SVG 網格、SVG 五星制打分效果到 SVG 蒙版、花哨的顆粒狀 SVG 梯度漸變，以及方便的 SVG 工具。我們希望你會在這裡找到有用的東西。
順便說一下，不久前，我們還研究了 SVG 生成器 -- 從形狀和背景到 SVG 路徑可視化工具、裁剪工具以及 SVG → JSX 生成器等所有東西。如果你正在處理 SVG，這些也可能會派上用場。
生成性 SVG 網格
自動生成藝術畫作對於每一個喜歡創造藝術畫作但又覺得在代碼中更自在的人來說是一個絕好的機會。比方說，你想創造幾何圖案，生成藝術畫作將解決你的選擇困難症。我使用什麼形狀？我把它們放在哪裡？以及我應該使用什麼顏色？如果你想嘗試一下，Alex Trost 寫了一篇關於用 SVG 網格創建生成藝術畫作的教程，它一定會激發你的創造力 -- 並讓你對 SVG 有更多了解。
Alex 創建的生成藝術是一個由行和列數量隨機的塊組成的網格。每個塊都有一個隨機選擇的設計和來自共享調色板的顏色。亞歷克斯帶你一步步走過這個作品的編碼過程：從設置網格和創建孤立的函數來繪製 SVG，到使用調色板，添加動畫，等等。一個有趣的小項目，作為你入門生成藝術和創意編碼的絕佳教程。
生成式景觀捲軸
一個令人敬畏的項目在一個世紀的傳統和最先進的編碼之間架起了橋樑，它就是 {山，水}。該項目由黃凌東創建，靈感來自於中國傳統的山水卷，它以 SVG 格式創建了程序生成的、無限滾動的中國風景。景觀中的山和樹都是用噪音和數學函數從頭開始建模的。令人着迷！
生成藝術項目 {山，水} 的靈感來自中國傳統山水畫。
現在，如果你問自己這麼複雜的東西是如何工作的，你並不第一個這麼想的人。維克多 - 謝佩列夫也想要了解 {山，水}* 背後的秘密，並將其作為自己的練手項目，以了解其如何工作。而且，確實，他花了 24 天時間來完全挖掘代碼。他在一系列的文章中總結了他的發現。
帶有紋理的 SVG 路徑
與光柵圖像相比，SVG 有很多好處。它們體積小、可擴展、可做動畫、可以用代碼編輯，還有很多其他的優點。不過，你無法獲得光柵圖像所能提供的紋理感覺。然而，我們可以結合矢量和光柵的優勢來創造一些迷人的效果。就像 Tom Miller 在他的 Silkscreen Squiggles 演示 demo 中做的那樣。
在 SVG 中添加畫筆效果？一個小技巧讓它成為可能。
Silkscreen Squiggles 是一個動畫，在這個動畫中，方塊字充滿了一個矩形的畫布。讓這些方塊字變得特別的是，它們看起來有一種畫筆的質感。秘訣是：一個帶有阿爾法層的遮罩，使簡單的方塊字路徑具有紋理。Alex Trost 剖析了它是如何工作的。鼓舞人心！
顆粒狀的梯度漸變
噪點是一種簡單的技術，可以為圖像添加紋理，使原本的純色或平滑的漸變更加逼真。但是，儘管設計師對質感情有獨鍾，噪點在網頁設計中卻很少使用。Jimmy Chion 探討了我們如何只用少量的 CSS 和 SVG 就能為漸變添加紋理。
用顆粒狀的 SVG 漸變實現了一個迷人的全息類型的效果。
訣竅是使用 SVG 濾鏡來創建噪點，然後將該噪點作為背景。在你的漸變下面分層，提高亮度和對比度，這樣就可以了。例如，潛在的用例可以是光影或全息箔效果。這種技術的核心是由所有現代瀏覽器支持的。總而言之，一個聰明的視覺效果，為設計增加深度和質感。
增加紋理和深度
像油漆和紙張這樣的 "模擬" 材料自然會給作品增加深度，但在數字工作時，我們經常為了精確和快速而犧牲它們提供的有機深度。讓我們把一些紋理帶回我們的工作中去吧！喬治 - 弗朗西斯分享了三種方法。
喬治 - 弗朗西斯探討了如何創造紋理和深度。
喬治探討的技術相當簡單，但很有效。在畫布的隨機點上添加微小的隨機形狀，用線條填充固體形狀，用算法均勻但隨機地分布非重疊的圓。這是一個很有啟發性的想法。
使用 CSS 和 SVG 的剪裁效果
在 Ahmad Shadeed 最近從事的一個前端項目中，其中一個組件包括一個切割效果，即從一個形狀中切出一個區域。因為有多種方法可以在 CSS 或 SVG 中創建這樣的效果，他決定探索每一種解決方案帶來的利弊。
如果你想創建一個切割效果，Ahmad Shadeed 會幫助你找到適合你使用情況的最佳技術。
在他的博文 "思考裁剪效果" 中，艾哈邁德看了裁剪效果的三個不同的用例：一個帶有裁剪狀態徽章的頭像，表示用戶當前在線；一個由重疊的圓形頭像組成的 "已見頭像"，表示在群聊中看到了一條信息；以及一個帶有圓形標誌後面裁剪區域的網站頭像。艾哈邁德為每個用例提出了不同的解決方案 -- 純 SVG、純 CSS 和兩者的混合 -- 並解釋了其中每一種的利弊，可以作為一個全面的概述。
SVG 五星制打分效果
你是否正在建立一個評級組件，並希望它支持小數值，如 4.2 或 3.7 星，但不使用圖像？好消息是，你可以只用 CSS 和內聯 SVG 來實現小數點的評級。Samuel Kraft 解釋了它是如何工作的。
塞繆爾 - 卡夫（Samuel Kraft）提出了一個巧妙的技巧，即只用 CSS 和 SVG 來創建 SVG 五星制打分效果。
這個組件基本上由兩部分組成：一個基於最大評級的星星圖標列表和一個 "覆蓋"div，它將負責改變下面星星的顏色。這就是使小數部分發揮作用的神奇之處。該技術在所有現代瀏覽器中都得到了支持；對於舊的瀏覽器，你可以退回到不透明性來代替。多聰明啊 2333!
生成式山脊分割線
當 Alistair Shepherd 建立他的個人網站時，他希望能有與網站的山地主題相匹配的分區。但不是任何山形分隔線，而是每個分隔線都有獨特的山脊。
Alistair Shepherd 創造了生成性 SVG 山脊分隔線。
Alistair 決定使用 SVG 和地形生成的組合（一種通常用於遊戲開發的技術）來自動生成分隔線，而不是手動創建各種不同的分隔線。在一篇博文中，他解釋了它是如何工作的。
如果你想獲得更多的水平分割線的靈感，也一定要看看 Sara Soueidan 的博文 "Not Your Typical Horizontal Rules"，其中她展示了她是如何在一些 CSS 和 SVG 的幫助下將一條無聊的水平線變成一個可愛的 "線上鳥" 分割線。
彈性、重複性 SVG 蒙版
有時是一個小想法，一個項目中的小細節，你在修補時不能放過，直到你想出一個量身定做的解決方案來實現它。乍一看沒什麼大不了的，但需要你跳出框框來思考。在泰勒 - 高的案例中，這個小細節是一個靈活的頁眉，底部有一個小方格，而不是一條直線。轉折點是：為了使這個組件面向未來，Tyler 想使用一個無縫的、水平重複的圖案，他可以用 CSS 來着色。
Tyler Gaw 的橫幅方塊圖是進行一些有趣的實驗的好基礎。
為了完成這項工作，Tyler 採用了彈性、重複性的 SVG 蒙版。SVG 提供了形狀，CSS 處理了顏色，而 mask-image 則通過隱藏底層 div 中與形狀不相交的東西來完成重任。這是一個聰明的方法，可以作為一些有趣實驗的基礎。
滑動圖像網格
當你想到 "SVG 動畫" 時，你想到的是什麼？插圖式的動畫？好吧，SVG 的用處遠不止於漂亮的圖形。正如 Cassie Evans 所指出的，一旦你不再把 SVG 單純地看作是一種插圖和圖標的格式，一個全新的 UI 造型世界就會打開。她最喜歡的 SVG 用例之一是：響應式的動畫圖像網格。
Cassie Evans 使用 SVG 的內部坐標系統來創建一個滑動的圖像網格。
Cassie 沒有在 CSS Grid 上建立她的圖像網格，而是使用 SVG 的內部坐標系統（它是響應式的設計）來設計網格布局。然後，她將圖片添加到網格中，並用 preserveAspectRatio 定位它們、clipPath 把圖片刷進去。最後的動畫依靠 GreenSock 來確保轉換在不同的瀏覽器上一致地工作。如果你想深入了解代碼，一定要看看 Cassie 的博文，她在其中詳細解釋了每個步驟。
動畫式 SVG 借記卡插圖
如果你能把借記卡設計成動畫，會怎麼樣？可能不是在實際的實體卡上，而是在一個登陸頁面上，你想讓人們對卡的設計或功能產生興趣？這是一個不尋常的挑戰，而湯姆 - 米勒決定接受這個挑戰。
Tom Miller 創作的 SVG 動畫插圖將借記卡帶入了生活。
在一系列的 SVG 借記卡動畫中，Tom 使用 GreenSock 對 SVG 路徑和形狀進行了流暢的動畫處理，因此每張卡實際上都是栩栩如生的，只需幾行 JavaScript 就可以進行轉換、旋轉和縮放，非常漂亮。這對你的下一個登陸頁面的設計是一個很好的啟發。
柵格圖像 to SVG 轉換器
你需要將光柵圖像快速轉換為 SVG 嗎？那麼 SVGcode就是為你準備的。這個漸進式網絡應用程序可以將 JPG、PNG、GIF、WebP 和 AVIF 等圖像格式轉換為 SVG 格式的矢量圖。
SVGcode 將光柵圖像轉換成矢量圖像。
要轉換圖像，將你的光柵圖像放入 SVGcode 應用程序，該應用程序將逐色追蹤圖像，直到出現輸入的矢量版本。你可以在彩色 SVG 和單色 SVG 之間進行選擇，還有一些自定義設置可以進一步改善輸出，例如，通過抑制斑點和調整顏色。如果你安裝了 PWA，你甚至可以把它作為你機器上的一個默認文件處理程序。毫不誇張地說，這是一個真正的省時機器。
從任何網站下載 SVG
SVG Gobbler 是一個方便的小工具，可以提高你的 SVG 工作流程。這個瀏覽器擴展可以找到你正在瀏覽的頁面上的矢量內容，並讓你選擇下載、優化、複製、查看代碼或將其導出為圖片。
SVG Gobbler 使你可以很容易地從任何網站下載 SVG。
當你點擊瀏覽器擴展時，它會向你顯示該網站上檢測到的所有 SVG。你可以快速下載你喜歡的那些，或將它們複製到你的剪貼板上。當你查看代碼時，你可以從 SVGO 中切換優化選項 -- 例如，美化標記或清理屬性或數字值。如果你需要一個 SVG 的 PNG 版本，你可以以任何你想要的尺寸導出它。這對任何開發人員的工具包來說都是一個絕妙的補充。
縮放 SVG 變得簡單
縮放 svg 元素可能是一項艱巨的任務，因為它們的作用與普通的圖像非常不同。Amelia Wattenberger 想出了一個巧妙的比較，幫助我們理解 SVG 及其特殊功能。"SVG 元素是一個進入另一個世界的望遠鏡"。
把 svg 元素想象成進入另一個世界的望遠鏡，那麼縮放就會變得容易得多。
基於望遠鏡的想法，Amelia 解釋了如何使用 viewBox 屬性來放大或縮小你的 "望遠鏡"，從而改變<svg>的大小。一個小竅門，卻有奇效。
收尾
我們希望這些技術能夠勾起你的好奇心，激勵你自己嘗試一些 SVG 的魔法。如果你遇到了一個有趣的 SVG 技術，讓你感到敬畏，請不要猶豫，在下面的評論中分享它。我們很樂意聽到它。祝你創作愉快！
更多關於 SVG 的信息
SVG 生成器
SVG 和設計工具的實用指南
SVG 圓環分解為路徑
無障礙 SVG：屏幕閱讀器用戶的完美模式
關於本文譯者：@Yodonicc譯文：https://zhuanlan.zhihu.com/p/523760126作者：@Cosima Mielke原文：https://www.smashingmagazine.com/2022/05/magical-svg-techniques/
點擊下方「閱讀原文」一鍵直達作者個人知乎首頁
留言列表