建站
咨詢
售后
建站咨詢
新聞中心
創(chuàng)新互聯(lián)建站專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于做網(wǎng)站、成都網(wǎng)站建設(shè)、順昌網(wǎng)絡(luò)推廣、微信平臺(tái)小程序開發(fā)、順昌網(wǎng)絡(luò)營(yíng)銷、順昌企業(yè)策劃、順昌品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；創(chuàng)新互聯(lián)建站為所有大學(xué)生創(chuàng)業(yè)者提供順昌建站搭建服務(wù)，24小時(shí)服務(wù)熱線：18980820575，官方網(wǎng)址：www.cdcxhl.com
可縮放矢量圖形 (SVG) 是一種獨(dú)特的圖像格式。與其他品種不同，SVG不依賴于獨(dú)特的像素來(lái)構(gòu)成您看到的圖像。相反，他們使用“矢量”數(shù)據(jù)。
通過(guò)使用SVG，您可以獲得可以放大到任何分辨率的圖像，這在許多其他用例中對(duì)網(wǎng)頁(yè)設(shè)計(jì)非常有用。在本教程中，我們將問(wèn)一個(gè)問(wèn)題：什么是SVG 文件？然后我們將教您如何使用該格式。
什么是SVG文件？
SVG是使用矢量構(gòu)建的圖形。對(duì)于初學(xué)者來(lái)說(shuō)，向量是具有特定大小和方向的元素。理論上，您可以使用矢量集合生成幾乎任何類型的圖形。以這張帶有黑色邊框和陰影的藍(lán)色矩形圖像為例：
這是另一種稱為便攜式網(wǎng)絡(luò)圖形 (PNG)的圖像文件，用于插圖和繪圖。如果您想使用矢量圖形復(fù)制類似的內(nèi)容，則需要使用XML代碼生成它（與用于站點(diǎn)地圖的代碼相同。）以下代碼可以獲得相同的結(jié)果：
理論上，如果您將這段代碼放入一個(gè)HTML文件中，您將看到一組與PNG相似的矩形——也就是說(shuō)，只要您使用的瀏覽器支持SVG文件。盡管兩個(gè)圖像看起來(lái)相同，但SVG文件提供了其他格式所沒(méi)有的一大堆好處。例如，SVG能夠在放大或縮小時(shí)保持圖像質(zhì)量。
如果您繼續(xù)放大PNG矩形，您會(huì)注意到它的質(zhì)量在某個(gè)時(shí)候開始下降。對(duì)于更復(fù)雜的基于像素的圖形，退化會(huì)更快地變得明顯。然而，SVG在幾乎任何分辨率下看起來(lái)都不錯(cuò)。
為什么要使用SVG文件？
許多網(wǎng)站幾乎可以互換使用PNG和JPEG等格式。不過(guò)，SVG并不是那么通用。如果您嘗試使用矢量重新創(chuàng)建復(fù)雜的照片，通常最終會(huì)得到大量且無(wú)法使用的SVG文件。
不過(guò)，SVG格式是一整套其他場(chǎng)景的絕佳選擇：
- Logo設(shè)計(jì)。由于您可能會(huì)在網(wǎng)站和社交媒體上重復(fù)使用Logo，因此使用SVG可以解決任何潛在的可擴(kuò)展性問(wèn)題。
- 簡(jiǎn)圖。SVG非常適合圖表和任何其他依賴于純線條的插畫。
- 動(dòng)畫元素。您可以使用CSS為SVG設(shè)置動(dòng)畫，這使它們成為網(wǎng)站設(shè)計(jì)中的有用組件，特別是對(duì)于微交互。
- 圖表和圖形。 您可以使用SVG創(chuàng)建支持動(dòng)畫的可縮放圖形和圖表。
由于SVG使用XML格式，這也使它們既可搜索又可索引。只要您使用正確的輔助功能標(biāo)簽，屏幕閱讀器就可以解釋SVG文件。
最后，SVG文件往往比其他格式的高分辨率文件小得多。在紙面上，這意味著您可以縮小一些頁(yè)面大小并減少加載時(shí)間。但是，除非您計(jì)劃將大部分圖像轉(zhuǎn)換為 SVG，否則性能提升可能很小。
如何創(chuàng)建SVG文件
對(duì)于SVG文件，您可以采用兩種方法。您可以從頭開始創(chuàng)建它們或獲取現(xiàn)有圖像并進(jìn)行轉(zhuǎn)換。讓我們從手動(dòng)方法開始。
1.手動(dòng)創(chuàng)建SVG文件
創(chuàng)建SVG文件通常不需要像我們之前所做的那樣輸入矢量信息。那只是展示概念的一個(gè)例子。相反，您可以像創(chuàng)建任何其他圖形一樣創(chuàng)建SVG-通過(guò)使用設(shè)計(jì)程序并將文件另存為SVG。許多現(xiàn)代圖形設(shè)計(jì)工具都支持開箱即用的SVG。一些頂級(jí)選項(xiàng)包括：
- Adobe Illustrator、Photoshop、Animate和InDesign
- Microsoft Visio
- Inkscape
- GIMP
此列表中的最后兩個(gè)選項(xiàng)是開源解決方案。這使它們成為嘗試創(chuàng)建SVG的絕佳選擇，而無(wú)需支付高級(jí)軟件費(fèi)用。事實(shí)上，它們可能就是你所需要的。
如果您沒(méi)有任何圖形設(shè)計(jì)經(jīng)驗(yàn)，為您的網(wǎng)站創(chuàng)建自己的徽標(biāo)或其他元素將是一個(gè)挑戰(zhàn)。在這種情況下，最好的辦法是獲取現(xiàn)有圖像并將它們轉(zhuǎn)換為SVG。
2. 將現(xiàn)有圖像轉(zhuǎn)換為SVG
您可以使用許多免費(fèi)工具將其他格式的圖像轉(zhuǎn)換為SVG。我們?cè)谏弦还?jié)中提到的大多數(shù)軟件都可以讓您打開圖像并將它們保存為SVG文件。
如果您不想下載任何軟件，也可以使用在線轉(zhuǎn)換工具——您可以使用大量 服務(wù)。一個(gè)例子是Vector Magic，您可以使用它來(lái)將各種文件類型轉(zhuǎn)換為SVG：
我們喜歡這個(gè)特殊的工具，因?yàn)樗鼤?huì)在您下載之前顯示您的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)換工具與您選擇的圖像無(wú)關(guān)。
根據(jù)經(jīng)驗(yàn)，僅將SVG格式用于“簡(jiǎn)單”圖像——即具有明確邊界和清晰線條的圖像。圖像越復(fù)雜，你就越有可能最終得到一個(gè)巨大的SVG文件，這是一項(xiàng)手動(dòng)編輯或動(dòng)畫制作的苦差事。
如何使用SVG文件
SVG并不是那么難使用。將SVG文件添加到您的網(wǎng)站就像獲取其代碼并將其粘貼到HTML文檔中一樣簡(jiǎn)單，只要您希望圖像可以放置。
如果您和您網(wǎng)站的訪問(wèn)者使用支持SVG文件的瀏覽器（現(xiàn)在大多數(shù)都支持），他們將能夠看到該元素。當(dāng)然，動(dòng)畫SVG更棘手，因?yàn)樗枰褂肅SS。
但是，如果您使用的是WordPress，則該過(guò)程會(huì)發(fā)生變化。內(nèi)容管理系統(tǒng) (CMS) 不支持開箱即用的SVG。如果您想啟用SVG支持以便可以將文件直接上傳到您的網(wǎng)站，您需要使用諸如Safe SVG之類的插件：
也可以在WordPress中手動(dòng)啟用SVG支持，但這個(gè)過(guò)程要復(fù)雜得多。在這種情況下，使用插件是更安全的選擇。
小結(jié)
調(diào)整您的網(wǎng)站以使用SVG文件比您想象的要容易得多。真正的挑戰(zhàn)在于從頭開始設(shè)計(jì)SVG或選擇正確的圖像以轉(zhuǎn)換為格式。幸運(yùn)的是，您可以使用許多工具來(lái)完成這兩項(xiàng)工作。
一些不錯(cuò)的選擇包括Adobe Illustrator、InDesign和GIMP。使用這些工具，您可以創(chuàng)建現(xiàn)有圖像并將其轉(zhuǎn)換為SVG。如果您使用的是WordPress，則可以使用Safe SVG插件上傳這些SVG，然后享受動(dòng)畫制作的樂(lè)趣。
本文名稱：什么是SVG及如何應(yīng)用到WordPress
本文地址：http://www.5511xx.com/article/cddodoj.html
