【學習圖片】03:向量影像

前端小智發表於2023-02-21
本文首發於微信公眾號:大遷世界, 我的微信: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 已收錄,有一線大廠面試完整考點、資料以及我的系列文章。

相關文章