在網(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è)形狀相對(duì)于文件中其他形狀的顯示位置。

　　相關(guān)內(nèi)容：什么是SVG文件?

　　SVG 和其他矢量圖形從根本上不同于光柵圖形，例如 jpeg 或 png 文件，后者依靠像素來傳達(dá)視覺信息。特別是使用 SVG 文件有四個(gè)主要好處。

　　1. 清晰度

　　SVG 文件可以無限擴(kuò)展。您可以增加 SVG 文件的大小并根據(jù)需要多次調(diào)整它們的大小而不會(huì)失去清晰度 - 與光柵圖像相比，這是一個(gè)巨大的好處，如果它們的大小不合適，光柵圖像可能會(huì)變得模糊或看起來有顆粒感。

　　2. 多功能性

　　不僅可以在編輯階段多次調(diào)整 SVG 文件的大小而不會(huì)失去清晰度，而且生成在任何設(shè)備上看起來都不錯(cuò)的響應(yīng)式SVG 文件相對(duì)簡單，即使查看器放大網(wǎng)頁也是如此。SVG 文件的多功能性使其成為徽標(biāo)和簡單信息圖表的絕佳選擇。您還可以將 SVG 文件用于動(dòng)畫，它們對(duì)于設(shè)計(jì)具有獨(dú)特配色方案和漸變的字體特別有用。

　　3.更小的文件大小

　　SVG 文件的大小可能比同一圖像的 PNG 或 JPG 小得多，具體取決于圖形的復(fù)雜性或設(shè)計(jì)中的路徑數(shù)量。根據(jù) Vecta.io 的說法，SVG 文件可以比 PNG 文件小 60% 到 80%，這有助于將加載時(shí)間降至最低，從而幫助您提供更好的用戶體驗(yàn) (UX)。更快的頁面速度對(duì)于網(wǎng)站 SEO也更好。

　　上圖中的悲傷斑馬設(shè)計(jì)是在 Adobe illustrator 中創(chuàng)建的，并首先導(dǎo)出為 SVG 文件，然后導(dǎo)出為 PNG(請(qǐng)注意，上面的并排圖像是 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ò)展性對(duì)用戶和創(chuàng)作者都有好處。視力低下的人可以放大 SVG 文件，而文件不會(huì)變得模糊。繼續(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)站，您不會(huì)想要上傳 SVG 格式的作品集。

　　對(duì)于非常詳細(xì)的照片或復(fù)雜的圖像，您可能需要使用 PNG、JPG 或 JPEG 文件。在動(dòng)畫方面，GIF 和 SVG 非常棒。在 SVG、PNG 和 GIF 文件中包含透明背景也相對(duì)簡單。

　　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 文件也可能不是電子郵件活動(dòng)的最佳選擇，因?yàn)橐恍╇娮余]件提供商僅部分支持 SVG 文件，或者根本不支持它們(截至 2022 年 3 月)。

　　哪些程序可以打開和編輯 SVG 文件?

　　您可以使用許多免費(fèi)和付費(fèi)程序來打開、編輯和轉(zhuǎn)換 SVG 文件。這里僅僅是少數(shù)：

　　免費(fèi)的 SVG 文件轉(zhuǎn)換器、設(shè)計(jì)和動(dòng)畫軟件

　　inkscape.org

　　github.com/SVG-Edit

　　vectr.com

　　www.haikuanimator.com

　　www.gimp.org

　　支持矢量文件的付費(fèi)軟件

　　www.adobe.com/products/illustrator.html

　　www.adobe.com/products/photoshop.html

　　www.coreldraw.com

　　www.svgator.com

　　SVG 圖形最近變得非常流行，這要?dú)w功于它們的多功能性和可訪問性。毫不奇怪，支持矢量圖像文件的圖形編輯器的范圍也在不斷擴(kuò)大。