本文首發於微信公眾號：大遷世界, 我的微信：qq449245884，我會第一時間和你分享前端行業趨勢，學習途徑等等。
更多開源作品請看 GitHub https://github.com/qq449245884/xiaozhi ，包含一線大廠面試完整考點、資料以及我的系列文章。
向量圖形是一種將一系列形狀、座標和路徑傳達給其渲染環境的方法。它們是一組關於如何繪製影像的指令。當該影像被放大或縮小時，該影像所代表的點和線的集合被按比例重新繪製。兩點之間的平滑曲線在任何尺寸下都會被重新繪製，這與HTML元素上的CSS定義的邊框在視口中被縮放時重新繪製的方式相似。
可擴充套件向量圖形（SVG）是一種基於XML的標記語言，由W3C開發。它是一種為現代 Web 設計的向量影像格式。
事例：https://codepen.io/web-dot-de...
任何專門用於編輯向量影像的設計軟體都可以將影像匯出為 SVG。但是，由於 SVG 是一種標準化的、可讀性強的標記語言，因此它也可以使用任何文字編輯軟體建立和編輯，而不管建立它的軟體是什麼，儘管對於實際複雜的影像來說這變得不現實。SVG 可以使用 CSS 進行樣式化，或者包含可以在影像中構建行為和互動的 JavaScript。
除了對設計者和開發者的明顯吸引力之外，SVG在終端使用者體驗方面也是一種令人難以置信的強大格式。與光柵影像格式基於畫素網格的描述性資訊相比，SVG源所包含的描述性資訊通常是非常緊湊的，就簡單的形狀而言--稍微簡化一點。
告訴瀏覽器 "在1x1和1x5之間畫一條1px的紅線 "和 "1x1是一個紅色的畫素。1x2是一個紅色畫素。1x3是一個紅色畫素。1x4是一個紅色畫素。1x5是紅色畫素"。反過來說，SVG的描述性要求瀏覽器進行更多的解釋--更多的 "思考"。由於這個原因，複雜的SVG在渲染時可能會更加費力。同樣的，一個高度複雜的影像可能意味著一組冗長的指令和較大的傳輸大小。
在能夠立即識別出影像資源是否更適合使用 SVG 而不是常規光柵格式之前，可能需要一些試驗和錯誤。但是，有幾個指導方針：像圖示這樣的介面元素幾乎總是適合使用 SVG。具有銳利線條、純色和清晰定義形狀的影像將可能是使用 SVG 的強烈候選。
SVG 的話題很大：一種與 HTML 共存的整個標記語言，具有獨特的樣式選項和功能。要了解更詳細的 SVG 介紹，請參閱 MDN SVG 教程。
程式碼部署後可能存在的BUG沒法實時知道，事後為了解決這些BUG，花了大量的時間進行log 除錯，這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。
原文：https://web.dev/learn/images/...
交流
有夢想，有乾貨，微信搜尋 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。
