在網(wǎng)頁設(shè)計(jì)中使用SVG文件的四個(gè)好處
SVG代表 Scalable Vector Graphic，它是一種 2D 圖像或圖形文件類型。SVG文件使用數(shù)學(xué)方程式和關(guān)于形狀、線條和元素的規(guī)則集來生成圖形。SVG 本質(zhì)上是 XML 代碼，用于解釋應(yīng)該顯示的形狀、應(yīng)該顯示的顏色以及每個(gè)形狀相對于文件中其他形狀的顯示位置。
相關(guān)內(nèi)容：什么是SVG文件？
SVG 和其他矢量圖形從根本上不同于光柵圖形，例如 jpeg 或 png 文件，后者依靠像素來傳達(dá)視覺信息。特別是使用 SVG 文件有四個(gè)主要好處。
1. 清晰度
SVG 文件可以無限擴(kuò)展。您可以增加 SVG 文件的大小并根據(jù)需要多次調(diào)整它們的大小而不會失去清晰度 - 與光柵圖像相比，這是一個(gè)巨大的好處，如果它們的大小不合適，光柵圖像可能會變得模糊或看起來有顆粒感。
2. 多功能性
不僅可以在編輯階段多次調(diào)整 SVG 文件的大小而不會失去清晰度，而且生成在任何設(shè)備上看起來都不錯(cuò)的響應(yīng)式SVG 文件相對簡單，即使查看器放大網(wǎng)頁也是如此。SVG 文件的多功能性使其成為徽標(biāo)和簡單信息圖表的絕佳選擇。您還可以將 SVG 文件用于動畫，它們對于設(shè)計(jì)具有獨(dú)特配色方案和漸變的字體特別有用。
3.更小的文件大小
SVG 文件的大小可能比同一圖像的大 PNG 或 JPG 小得多，具體取決于圖形的復(fù)雜性或設(shè)計(jì)中的路徑數(shù)量。根據(jù) Vecta.io 的說法，SVG 文件可以比 PNG 文件小 60% 到 80%，這有助于將加載時(shí)間降至最低，從而幫助您提供更好的用戶體驗(yàn) (UX)。更快的頁面速度對于網(wǎng)站來說 SEO也更好。
上圖中的悲傷斑馬設(shè)計(jì)是在 Adobe illustrator 重新創(chuàng)建的，并首先導(dǎo)出為 SVG 文件，然后導(dǎo)出為 PNG（請注意，上面的并排圖像是 jpg）在網(wǎng)站上使用。生成的 PNG 文件為 82 KB（尺寸為 1911 x 1387 像素）。相比之下，SVG 文件只有 8 KB（并且沒有設(shè)置尺寸，因?yàn)?SVG 文件默認(rèn)是響應(yīng)式的）。
4. 可訪問性和包容性
SVG 文件在可訪問性和包容性方面提供了多種好處。設(shè)計(jì)人員可以在 SVG 文件本身的圖形中添加描述視覺元素的結(jié)構(gòu)數(shù)據(jù)，這可以幫助使用某些輔助技術(shù)的人更好地理解圖像中包含的內(nèi)容。或者，光柵文件僅依靠元數(shù)據(jù)（即替代文本）來向屏幕閱讀器和類似的輔助設(shè)備描述圖形的內(nèi)容。
可擴(kuò)展性對用戶和創(chuàng)作者都有好處。視力低下的人可以放大 SVG 文件，文件不會變得模糊。繼續(xù)嘗試放大下面的圖像（這是一個(gè) SVG 文件）。
SVG 文件還為設(shè)計(jì)人員和開發(fā)人員提供了可訪問性和包容性的好處，因?yàn)橛卸喾N創(chuàng)建和編輯它們的方法。您可以使用 Adobe Illustrator 設(shè)計(jì)工具在不知道如何編碼的情況下編輯 SVG 文件。您還可以直接在純文本編輯器中編輯 XML 代碼，并輕松地將 SVG 合并到您的HTML 或 CSS中。您可以在 W3C 網(wǎng)站上找到有關(guān) SVG 文件的輔助功能的更多信息。
何時(shí)使用 SVG 與其他圖像格式
Web 上使用了4 種常見的圖像文件格式，雖然 SVG 有很多好處，但它們并不是所有用例的最佳選擇。SVG 文件非常適合簡單的圖形和插圖，但不適用于高度詳細(xì)的圖像。如果您正在為專業(yè)攝影師設(shè)計(jì)網(wǎng)站，您不會想要上傳 SVG 格式的作品集。
對于非常詳細(xì)的照片或復(fù)雜的圖像，您可能需要使用 PNG、JPG 或 JPEG 文件。在動畫方面，GIF 和 SVG 非常棒。在 SVG、PNG 和 GIF 文件中包含的透明背景也相對簡單。
SVG 文件非常適合網(wǎng)頁設(shè)計(jì)，但某些文字處理器和電子表格軟件不支持。例如，在撰寫本文時(shí)，Google Docs 不支持 SVG 文件。
此外，雖然最新版本的領(lǐng)先網(wǎng)絡(luò)瀏覽器（如 Google Chrome、Microsoft Internet Explorer、Safari 和 Firefox）支持 SVG 文件，但從舊瀏覽器上網(wǎng)的人可能無法查看它們。SVG 文件也可能不是電子郵件活動的最佳選擇，因?yàn)橐恍╇娮余]件提供商僅部分支持 SVG 文件，或者根本不支持它們（截至 2022 年 3 月）。
SVG 圖形最近變得非常流行，這要?dú)w功于它們的多功能性和可訪問性。毫不奇怪，支持矢量圖像文件的圖形編輯器的范圍也在不斷擴(kuò)大。
SVG文件增強(qiáng)您的網(wǎng)站系統(tǒng)性能
專家正在不斷探索設(shè)計(jì)和提供真正靈活的網(wǎng)站展示的新方法。隨著我們加深對平面設(shè)計(jì)的了解，以制作與屏幕無關(guān)的現(xiàn)代網(wǎng)站系統(tǒng)，我們對SVG文件進(jìn)行樣式設(shè)置和編寫腳本，以獲取與分辨率無關(guān)的更多在線圖形。
什么是SVG？
可伸縮矢量圖形（Scalable Vector Graphics，SVG）使用XML格式在Web上定義基于矢量的圖形。矢量圖形是根據(jù)幾何特性來繪制的圖形，矢量（Vector）可以是一個(gè)點(diǎn)或一條線。矢量圖以幾何圖形居多，圖形可以無限放大，不變色、不模糊，常用于圖案、標(biāo)志、文字等方面的設(shè)計(jì)。
SVG的特點(diǎn)
與JPEG和GIF等格式的圖像相比，SVG圖像更主要具有如下優(yōu)勢：
- 1、SVG圖像可以使用任何文本編輯器創(chuàng)建和編輯，而JPEG和GIF等格式的圖像必須使用專用的圖像編輯軟件創(chuàng)建和編輯。
- 2、SVG圖像更易于壓縮、搜索（適用于制作地圖）、索引和腳本化。
- 3、縮放SVG圖像時(shí)，圖像不變形。
- 4、可以在任何分辨率下打印高質(zhì)量的SVG圖像。
SVG與Canvas相比的異同如下：
- 1、SVG是在XML中描述二維圖像的語言；Canvas則在JavaScript程序中繪制二維圖像。
- 2、在SVG中，每一個(gè)繪制的圖形都會被記錄為一個(gè)對象，當(dāng)SVG對象的屬性變化時(shí)，瀏覽器會自動重畫圖形。
- 3、Canvas圖像是逐像素繪制的，一旦圖像繪制完成，瀏覽器就會忘了它。如果圖像的位置變化了，那么場景都要重畫，包括被該圖像覆蓋的對象。
對于SVG我們該如何應(yīng)用？
可伸縮矢量圖形（SVG）使我的團(tuán)隊(duì)可以創(chuàng)建清晰，精確和動態(tài)的圖形以及徽標(biāo)，插圖，背景，圖標(biāo)和文字的圖形應(yīng)用程序。為什么？所有現(xiàn)代瀏覽器都支持其XML支持的文件格式。這樣一來，我的團(tuán)隊(duì)就可以呈現(xiàn)可訪問您的訪客的內(nèi)容，而不會出現(xiàn)難看的兼容性問題。
我們對SVG的使用對您和您的網(wǎng)站重新設(shè)計(jì)意味著什么？SVG在任何設(shè)備上都更易于查看，這意味著它是構(gòu)建響應(yīng)式網(wǎng)站系統(tǒng)的首選方式。您的訪客會看到更清晰的圖標(biāo)，生動的配色方案和輕松的動畫。我們的一部分客戶最近將其圖標(biāo)切換為SVG，以實(shí)現(xiàn)其內(nèi)置的響應(yīng)能力。
網(wǎng)頁設(shè)計(jì)和團(tuán)隊(duì)的傳統(tǒng)選擇是使用PNG / RAV文件創(chuàng)建通常暗淡，有損的圖標(biāo)，而使用SVG文件則可以為任何大小的高清屏幕創(chuàng)建清晰，平滑的圖像。與PNG / RAW相比，對SVG文件進(jìn)行樣式設(shè)置和編寫腳本的最大好處是清晰流暢的質(zhì)量，不會因?yàn)閺呐_式機(jī)到平板電腦再到智能手機(jī)的屏幕而丟失質(zhì)量，每個(gè)屏幕尺寸均顯示最佳圖形。
除了跨瀏覽器支持和內(nèi)置的響應(yīng)能力之外，SVG還可以幫助我們減少HTTP請求。這意味著我們可以充分減少帶寬，以確保更快地加載部分，從而減少嘗試下載背景，圖標(biāo)，字體甚至動畫的延遲。更快的加載時(shí)間意味著更人性化的體驗(yàn)和更好的SEO效果。
這只是為您的在線業(yè)務(wù)創(chuàng)建強(qiáng)大，動態(tài)和靈活的Web系統(tǒng)的另一難題。在著手設(shè)計(jì)和開發(fā)響應(yīng)式時(shí)，請考慮徽標(biāo)，街道地圖，圖形，復(fù)雜界面甚至簡單的在線游戲采用對SEO友好且可擴(kuò)展的SVG文件格式。
步驚云