創(chuàng)新互聯(lián)建站專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于做網(wǎng)站、成都網(wǎng)站建設(shè)、順昌網(wǎng)絡(luò)推廣、微信平臺小程序開發(fā)、順昌網(wǎng)絡(luò)營銷、順昌企業(yè)策劃、順昌品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們最大的嘉獎；創(chuàng)新互聯(lián)建站為所有大學(xué)生創(chuàng)業(yè)者提供順昌建站搭建服務(wù)，24小時服務(wù)熱線：18980820575，官方網(wǎng)址：www.cdcxhl.com

可縮放矢量圖形 (SVG) 是一種獨(dú)特的圖像格式。與其他品種不同，SVG不依賴于獨(dú)特的像素來構(gòu)成您看到的圖像。相反，他們使用“矢量”數(shù)據(jù)。

通過使用SVG，您可以獲得可以放大到任何分辨率的圖像，這在許多其他用例中對網(wǎng)頁設(shè)計非常有用。在本教程中，我們將問一個問題：什么是SVG 文件？然后我們將教您如何使用該格式。

什么是SVG文件？

SVG是使用矢量構(gòu)建的圖形。對于初學(xué)者來說，向量是具有特定大小和方向的元素。理論上，您可以使用矢量集合生成幾乎任何類型的圖形。以這張帶有黑色邊框和陰影的藍(lán)色矩形圖像為例：

這是另一種稱為便攜式網(wǎng)絡(luò)圖形 (PNG)的圖像文件，用于插圖和繪圖。如果您想使用矢量圖形復(fù)制類似的內(nèi)容，則需要使用XML代碼生成它（與用于站點(diǎn)地圖的代碼相同。）以下代碼可以獲得相同的結(jié)果：

理論上，如果您將這段代碼放入一個HTML文件中，您將看到一組與PNG相似的矩形——也就是說，只要您使用的瀏覽器支持SVG文件。盡管兩個圖像看起來相同，但SVG文件提供了其他格式所沒有的一大堆好處。例如，SVG能夠在放大或縮小時保持圖像質(zhì)量。

如果您繼續(xù)放大PNG矩形，您會注意到它的質(zhì)量在某個時候開始下降。對于更復(fù)雜的基于像素的圖形，退化會更快地變得明顯。然而，SVG在幾乎任何分辨率下看起來都不錯。

為什么要使用SVG文件？

許多網(wǎng)站幾乎可以互換使用PNG和JPEG等格式。不過，SVG并不是那么通用。如果您嘗試使用矢量重新創(chuàng)建復(fù)雜的照片，通常最終會得到大量且無法使用的SVG文件。

不過，SVG格式是一整套其他場景的絕佳選擇：

• Logo設(shè)計。由于您可能會在網(wǎng)站和社交媒體上重復(fù)使用Logo，因此使用SVG可以解決任何潛在的可擴(kuò)展性問題。
• 簡圖。SVG非常適合圖表和任何其他依賴于純線條的插畫。
• 動畫元素。您可以使用CSS為SVG設(shè)置動畫，這使它們成為網(wǎng)站設(shè)計中的有用組件，特別是對于微交互。
• 圖表和圖形。 您可以使用SVG創(chuàng)建支持動畫的可縮放圖形和圖表。

由于SVG使用XML格式，這也使它們既可搜索又可索引。只要您使用正確的輔助功能標(biāo)簽，屏幕閱讀器就可以解釋SVG文件。

最后，SVG文件往往比其他格式的高分辨率文件小得多。在紙面上，這意味著您可以縮小一些頁面大小并減少加載時間。但是，除非您計劃將大部分圖像轉(zhuǎn)換為 SVG，否則性能提升可能很小。

如何創(chuàng)建SVG文件

對于SVG文件，您可以采用兩種方法。您可以從頭開始創(chuàng)建它們或獲取現(xiàn)有圖像并進(jìn)行轉(zhuǎn)換。讓我們從手動方法開始。

1.手動創(chuàng)建SVG文件

創(chuàng)建SVG文件通常不需要像我們之前所做的那樣輸入矢量信息。那只是展示概念的一個例子。相反，您可以像創(chuàng)建任何其他圖形一樣創(chuàng)建SVG-通過使用設(shè)計程序并將文件另存為SVG。許多現(xiàn)代圖形設(shè)計工具都支持開箱即用的SVG。一些頂級選項(xiàng)包括：

• Adobe Illustrator、Photoshop、Animate和InDesign
• Microsoft Visio
• Inkscape
• GIMP

此列表中的最后兩個選項(xiàng)是開源解決方案。這使它們成為嘗試創(chuàng)建SVG的絕佳選擇，而無需支付高級軟件費(fèi)用。事實(shí)上，它們可能就是你所需要的。

如果您沒有任何圖形設(shè)計經(jīng)驗(yàn)，為您的網(wǎng)站創(chuàng)建自己的徽標(biāo)或其他元素將是一個挑戰(zhàn)。在這種情況下，最好的辦法是獲取現(xiàn)有圖像并將它們轉(zhuǎn)換為SVG。

2. 將現(xiàn)有圖像轉(zhuǎn)換為SVG

您可以使用許多免費(fèi)工具將其他格式的圖像轉(zhuǎn)換為SVG。我們在上一節(jié)中提到的大多數(shù)軟件都可以讓您打開圖像并將它們保存為SVG文件。

如果您不想下載任何軟件，也可以使用在線轉(zhuǎn)換工具——您可以使用大量 服務(wù)。一個例子是Vector Magic，您可以使用它來將各種文件類型轉(zhuǎn)換為SVG：

我們喜歡這個特殊的工具，因?yàn)樗鼤谀螺d之前顯示您的SVG文件的預(yù)覽。您還可以使用內(nèi)置編輯器在下載文件之前進(jìn)行小的更改和更正：

當(dāng)然，這只是一種選擇。其他PNG和JPG到SVG格式轉(zhuǎn)換服務(wù)包括Convertio和Img2Go。您需要進(jìn)行一些研究，以找到最適合您需求的解決方案。

根據(jù)我們的經(jīng)驗(yàn)，大多數(shù)SVG格式轉(zhuǎn)換工具提供類似質(zhì)量的結(jié)果。為了獲得最佳效果，您使用的格式轉(zhuǎn)換工具與您選擇的圖像無關(guān)。

根據(jù)經(jīng)驗(yàn)，僅將SVG格式用于“簡單”圖像——即具有明確邊界和清晰線條的圖像。圖像越復(fù)雜，你就越有可能最終得到一個巨大的SVG文件，這是一項(xiàng)手動編輯或動畫制作的苦差事。

如何使用SVG文件

SVG并不是那么難使用。將SVG文件添加到您的網(wǎng)站就像獲取其代碼并將其粘貼到HTML文檔中一樣簡單，只要您希望圖像可以放置。

如果您和您網(wǎng)站的訪問者使用支持SVG文件的瀏覽器（現(xiàn)在大多數(shù)都支持），他們將能夠看到該元素。當(dāng)然，動畫SVG更棘手，因?yàn)樗枰褂肅SS。

但是，如果您使用的是WordPress，則該過程會發(fā)生變化。內(nèi)容管理系統(tǒng) (CMS) 不支持開箱即用的SVG。如果您想啟用SVG支持以便可以將文件直接上傳到您的網(wǎng)站，您需要使用諸如Safe SVG之類的插件：

也可以在WordPress中手動啟用SVG支持，但這個過程要復(fù)雜得多。在這種情況下，使用插件是更安全的選擇。

小結(jié)

調(diào)整您的網(wǎng)站以使用SVG文件比您想象的要容易得多。真正的挑戰(zhàn)在于從頭開始設(shè)計SVG或選擇正確的圖像以轉(zhuǎn)換為格式。幸運(yùn)的是，您可以使用許多工具來完成這兩項(xiàng)工作。

一些不錯的選擇包括Adobe Illustrator、InDesign和GIMP。使用這些工具，您可以創(chuàng)建現(xiàn)有圖像并將其轉(zhuǎn)換為SVG。如果您使用的是WordPress，則可以使用Safe SVG插件上傳這些SVG，然后享受動畫制作的樂趣。

新聞名稱：什么是SVG及如何應(yīng)用到WordPress
瀏覽地址：http://uogjgqi.cn/article/cddodoj.html