這篇文章是一個(gè)名為Web和界面設(shè)計(jì)與矢量系列的一部分却邓。

創(chuàng)建一組光面標(biāo)簽并將其保存為Web

快速提示：如何使用外觀面板創(chuàng)建一個(gè)簡(jiǎn)單的Web按鈕設(shè)置

可縮放矢量圖形（SVG）是1998年開始生活的一種矢量圖像格式。它始終是以網(wǎng)絡(luò)為基礎(chǔ)開發(fā)的爽撒，但現(xiàn)在才真正開始追趕網(wǎng)絡(luò)。今天不能否認(rèn)它的相關(guān)性拦惋，所以我們來看看從Illustrator到Web瀏覽器的基礎(chǔ)知識(shí)匆浙。

注意：我使用Adobe Illustrator CC來演示這里的東西，但是其他版本也有類似的（如果不是相同的）選項(xiàng)和工具厕妖。

為什么SVG有用首尼？

SVG格式是由萬維網(wǎng)聯(lián)盟（W3C）開發(fā)并繼續(xù)維護(hù)的。W3C由一群聰明的民間人士組成言秸，他們致力于將網(wǎng)絡(luò)標(biāo)準(zhǔn)化软能，使其成為每個(gè)人都可以使用的開放的地方。

SVG對(duì)于網(wǎng)絡(luò)來說是好事举畸，特別是現(xiàn)在查排，它繞過了屏幕分辨率的問題。無論您的新智能手機(jī)像素的密集程度如何抄沮，矢量將始終顯示為像新鮮下降的雪一樣清晰跋核，而光柵化圖像并非總是如此。

文件大小始終是Web的問題（沒有人希望通過移動(dòng)連接等待5Tb圖像加載到瀏覽器中）叛买，所以SVG是一種簡(jiǎn)化的矢量格式砂代。它是用XML構(gòu)建的，并且刪除了大量不必要的“東西”率挣，從而得到相對(duì)較輕的文件刻伊。

最后，考慮到這些XML構(gòu)建塊椒功，SVG文件的內(nèi)容可以像網(wǎng)頁上的任何其他元素一樣進(jìn)行操作和設(shè)置捶箱。SVG中的部分可以被隔離，顏色可以改變动漾，筆畫重量可以改變丁屎，透明度，我們甚至可以應(yīng)用某些過濾器（如模糊）旱眯，甚至動(dòng)畫- 所有通過CSS和JavaScript悦屏。

我什么時(shí)候會(huì)使用SVG节沦？

清晰的線條質(zhì)量和能夠操縱圖形元素的優(yōu)點(diǎn)是不言自明的键思，但是哪里可以利用這一點(diǎn)呢础爬？下面是SVG進(jìn)入其中的一個(gè)快速列表：

每天圖形：如果您在網(wǎng)站上使用圖形，請(qǐng)考慮它是否可以作為SVG格式吼鳞。如果是這樣看蚜，為什么不使用它？攝影將是一個(gè)SVG沒有意義的例子赔桌，但對(duì)于其他所有的東西供炎，請(qǐng)仔細(xì)考慮一下。

展示清脆的字體樣本疾党。為什么還要使用模糊的光柵格式呢音诫？

圖標(biāo)：世界各地的網(wǎng)站都掛著圖標(biāo);他們被普遍理解（正確使用時(shí)），并縮短用戶處理界面所需的時(shí)間雪位。這些日子的圖標(biāo)經(jīng)常通過網(wǎng)頁字體應(yīng)用到網(wǎng)站竭钝，但也可以作為SVG注入頁面。為每個(gè)人完美清潔和清爽的圖標(biāo)雹洗，可愛香罐。

我還沒有完成這套SVG圖標(biāo)，

標(biāo)志：如果公司應(yīng)該珍惜一件事时肿，那就是它的身份庇茫。SVG提供了在網(wǎng)絡(luò)上顯示品牌的最佳方式，簡(jiǎn)單明了螃成。顏色可以是精確的旦签，線條質(zhì)量是完美無暇的，同一個(gè)文件可以在一個(gè)網(wǎng)站上重復(fù)使用寸宏，但根據(jù)具體情況而改變宁炫。完善。

認(rèn)識(shí)這個(gè)標(biāo)志击吱？

裝飾：我不需要把這個(gè)想法賣給矢量藝術(shù)家淋淀，是嗎？

SVG裝飾禮貌fixate.it

動(dòng)畫：通過CSS3和JavaScript覆醇，整個(gè)動(dòng)畫世界已經(jīng)向網(wǎng)絡(luò)開放朵纷。由于我列出的所有原因，SVG也是完美的車輛永脓。你能想象一下當(dāng)你翻轉(zhuǎn)它們的時(shí)候哪個(gè)按鈕有動(dòng)畫嗎袍辞？給你直接個(gè)性化反饋的圖標(biāo)？天空真的是極限常摧。

標(biāo)志性的展示SVG反饋

所以這就是SVG搅吁。矢量格式威创，在網(wǎng)絡(luò)中開發(fā)。讓我們看看我們?nèi)绾问褂盟?/p>

將文件保存為SVG

我們將使用一個(gè)非郴雅常基本的圖像來展示SVG的功能肚豺。

新文件

打開Illustrator，開始一個(gè)新的文檔（文件>新建文檔）界拦，如果你愿意吸申，給它一個(gè)名字，并設(shè)置在300×300px的畫板享甸。

選擇一個(gè)圖像

在這一點(diǎn)上截碴，你用作演示向量的東西幾乎沒什么區(qū)別，但是去做一些相對(duì)簡(jiǎn)單的事情蛉威。我使用了“No Pirates Allowed”字形日丹，可以用“Webdings”字體免費(fèi)獲得（我從來沒有想過我會(huì)用這個(gè)字體）

進(jìn)入字形面板（Type> Glyphs），然后選擇“Webdings”字體來瀏覽各種可用的字符蚯嫌。

隨著文字工具選擇哲虾，單擊畫板，然后雙擊您選擇的字形來使用它齐帚。

轉(zhuǎn)換為輪廓

我們現(xiàn)在要把這個(gè)字型轉(zhuǎn)換成輪廓妒牙。

注意：SVG實(shí)際上支持文本對(duì)象，但為了在基本層面上展示事物对妄，我們將選擇路徑湘今。

使用選擇工具（V）選擇字形：

然后去Type> Create Outlines。

超剪菱！我們現(xiàn)在有一個(gè)基于路徑的矢量對(duì)象摩瞎。

保存

要將這個(gè)文檔保存為SVG，請(qǐng)轉(zhuǎn)到文件>保存或文件>另存為孝常。在彈出的對(duì)話框中旗们，選擇一個(gè)位置，給它一個(gè)文件名（如果還沒有的話）构灸，最重要的是選擇SVG作為格式：

然后您會(huì)看到另一個(gè)對(duì)話框上渴，這次有一些SVG選項(xiàng)。

事實(shí)上喜颁，在這一點(diǎn)上忽略這些選項(xiàng)將會(huì)很好地為您服務(wù)稠氮。在正常情況下，默認(rèn)值都是你想要的半开。

稍后我們將介紹其中的一些選項(xiàng)隔披，但現(xiàn)在，請(qǐng)點(diǎn)擊“確定”寂拆。

我們有一個(gè)SVG文件奢米！

那么抓韩，那些SVG選項(xiàng)

我們跳過了SVG選項(xiàng)，因?yàn)槟悴⒉恍枰嗟年P(guān)注鬓长。不過谒拴，為了徹底，讓我們來看看痢士。

SVG與SVGZ

首先彪薛，我們可以在保存對(duì)話框中選擇兩種潛在的SVG格式。

SVGZ是一個(gè)嚴(yán)重壓縮（壓縮怠蹂，我想）版本的SVG。它提供了一個(gè)較小的文件大小少态，但是將文件內(nèi)部的XML轉(zhuǎn)化為亂碼城侧，使我們無法通過CSS和JavaScript來操縱矢量。

SVG配置文件

網(wǎng)絡(luò)不斷變化的形勢(shì)以及網(wǎng)絡(luò)標(biāo)準(zhǔn)的不斷發(fā)展彼妻，意味著SVG一直在不斷發(fā)展嫌佑。您可以在保存SVG文件時(shí)看到第一個(gè)選項(xiàng)：SVG配置文件。配置文件選擇目前看起來像這樣：

他們的意思是（或多或少）如下：

SVG 1.0：SVG的第一個(gè)（2001）化身

SVG 1.1：與SVG 1.0幾乎相同侨歉，不同之處在于SVG 1.1可以分成更多的子類型屋摇，

SVG Tiny 1.1：這是SVG 1.1的第一個(gè)子類型，針對(duì)移動(dòng)web進(jìn)行了優(yōu)化幽邓。這是一個(gè)非常簡(jiǎn)單的SVG形式炮温，專為“高度受限的移動(dòng)設(shè)備”而設(shè)計(jì)。微小不支持漸變牵舵，透明度柒啤，剪裁，蒙版畸颅，符號(hào)担巩，圖案，下劃線文本没炒，穿透文本涛癌，垂直文本或SVG濾鏡效果。

SVG Tiny 1.1+：SVG Tony 1.1的輕微發(fā)展送火，增加了對(duì)漸變和透明度的支持拳话。

SVG Basic 1.1：這是SVG 1.1的第二個(gè)子類型，允許功能更強(qiáng)大的移動(dòng)設(shè)備漾脂，如智能手機(jī)假颇。基本不支持非矩形剪裁和一些SVG濾鏡效果骨稿。

SVG Tiny 1.2：這最初是為了SVG的下一個(gè)完整的規(guī)范笨鸡，但最終成為了Tiny子類型的開發(fā)姜钳。不要問我到底是什么區(qū)別。

很快形耗，我們就可以將SVG 2.0添加到這個(gè)列表中哥桥。實(shí)際上，這些配置文件的細(xì)微差別在很大程度上與我們無關(guān)激涤。SVG能夠處理各種各樣的東西拟糕，但是對(duì)于簡(jiǎn)單的矢量來說，堅(jiān)持使用SVG 1.1的當(dāng)前默認(rèn)設(shè)置倦踢，并且只要有可能送滞，網(wǎng)頁上的圖形就會(huì)很好。

字體

SVG文件可以包含的不僅僅是矢量路徑辱挥。文本對(duì)象就是這樣的一個(gè)例子犁嗅，字體選項(xiàng)允許你決定如何處理文本對(duì)象。

Adobe CEF：這使用字體提示顯示更精煉的印刷術(shù)晤碘。但是褂微，所有SVG查看器都不支持。

SVG：所有SVG觀眾都認(rèn)可的最大支持园爷，但缺乏Adobe CEF的細(xì)化宠蚂。

轉(zhuǎn)換為大綱：刪除所有的編輯功能，但保留文本的方式完全相同童社，無論在哪里查看求厕。導(dǎo)致一個(gè)稍大的文件，因?yàn)槁窂叫枰幻枋龅矗皇侵徽f明哪些字符存在甘改。

部分字體選項(xiàng)涉及子集。只有當(dāng)您選擇不將文本轉(zhuǎn)換為輪廓時(shí)灭抑，這才是相關(guān)的十艾。

子集將字符細(xì)節(jié)嵌入到SVG文件中，允許文件顯示用戶系統(tǒng)中可能不存在的字體腾节。嵌入整個(gè)字體（顯然）會(huì)導(dǎo)致更重的文件忘嫉，但您可以選擇包含多少個(gè)字形。

選項(xiàng)

雖然我們?cè)谇度氲闹黝}案腺，這里最后剩下的選項(xiàng)也可以影響文件大小庆冕。

與使用字體的方式大致相同，SVG文件可以保存位圖圖像劈榨。你在哪里看到圖像位置選擇“嵌入”访递，使圖像包含在代碼形式的文件中，或選擇“鏈接”同辣，以簡(jiǎn)單地引用圖像拷姿。這與在Illustrator中放置圖像的方式大致相同惭载，并且極大地影響了最終文件的大小。

最后一個(gè)復(fù)選框允許您在需要時(shí)保留Illustrator編輯功能响巢。這意味著將保留所有圖層描滔，過濾器和效果，符號(hào)等的細(xì)節(jié)踪古。同樣含长，如果你的SVG已準(zhǔn)備好生產(chǎn)，并且文件大小很重要伏穆，請(qǐng)不要選中此項(xiàng)拘泞。

注意：建議您保留一個(gè)可用的.AI文件進(jìn)行編輯。

幾個(gè)按鈕

最后蜈出，選項(xiàng)對(duì)話框底部的三個(gè)按鈕將執(zhí)行以下操作：

更多的選擇：現(xiàn)在讓我們離開這些田弥，我們？

SVG代碼..：直接在文本編輯器中啟動(dòng)包含在SVG文件中的XML代碼铡原。

Globe：直接在Web瀏覽器中啟動(dòng)SVG文件。只是這樣你可以檢查商叹。

在Web上使用SVG

如果您不習(xí)慣直接使用網(wǎng)絡(luò)燕刻，HTML，瀏覽器等等剖笙，那么在這一點(diǎn)上有幾件事情需要考慮卵洗。

網(wǎng)頁瀏覽器

首先，讓我們證明你的瀏覽器可以很好地處理這種格式弥咪。右鍵單擊您的新的有光澤的SVG文件过蹂，并選擇使用標(biāo)準(zhǔn)Web瀏覽器打開它：

較老的瀏覽器，如Internet Explorer 8和更早的版本聚至，不支持SVG格式酷勺，并且可悲的是不會(huì)播放。

有關(guān)SVG和瀏覽器支持的更多詳細(xì)信息扳躬，請(qǐng)?jiān)L問caniuse.com脆诉。

但只要您使用的是現(xiàn)代瀏覽器，SVG文件將會(huì)打開并顯示贷币，不會(huì)有任何問題击胜。

首先要注意的是，SVG文件保留了我們?cè)瓉斫o它的尺寸役纹。我們的SVG已經(jīng)打開了300 x 300px偶摔，Artboard已經(jīng)規(guī)定了外部界限，而且盜版圖標(biāo)應(yīng)該放置在中心位置促脉。

廣告

在Web頁面中嵌入SVG

到目前為止辰斋，我們已經(jīng)創(chuàng)建了一個(gè)SVG文件策州，我們已經(jīng)在瀏覽器中打開它來檢查它的工作。現(xiàn)在是在網(wǎng)頁中正確使用我們的文件的時(shí)候了亡呵。

首先抽活，我們需要一個(gè)網(wǎng)頁。這不需要比空文件更復(fù)雜锰什，.html文件擴(kuò)展名可以在普通的文本編輯器中保存下硕。我們不需要擔(dān)心在這個(gè)文件中有任何代碼，但是如果你對(duì)HTML的基礎(chǔ)知識(shí)感興趣的話汁胆，可以看看在某些時(shí)候學(xué)習(xí)HTML的最佳途徑梭姓。

這是我的文件，在Mac OS X的TextEdit中打開嫩码，但是您可以使用任何文本或代碼編輯器誉尖。

這個(gè)文件將在Web瀏覽器中打開，但是我們需要添加一些HTML“標(biāo)記”代碼來嵌入SVG铸题。有幾種方法可以做到這一點(diǎn)铡恕。

該

標(biāo)簽法

need-to-insert-img

首先，我們可以使用圖像標(biāo)簽（您可能會(huì)習(xí)慣使用JPG丢间，PNG文件等）指向src=""屬性中的確切文件路徑探熔。將這段代碼粘貼到您的HTML文件中：

1

假設(shè)文件路徑是正確的，你的HTML頁面將在瀏覽器中打開烘挫，就像這樣：

是的诀艰，我知道現(xiàn)階段的普遍效果與我們直接在網(wǎng)頁瀏覽器中打開SVG的效果是一樣的，但現(xiàn)在我們擁有更多的力量饮六！例如其垄，我們可以通過使用width=""屬性立即使SVG變大：

1

一個(gè)美麗，清脆的SVG卤橄，無限擴(kuò)展绿满！

這種方法可能是最簡(jiǎn)單的，但確實(shí)存在問題虽风。一些瀏覽器棒口，出于安全的原因，將限制你能夠做的SVG（例如JavaScript）辜膝。讓我們看看替代品无牵。

該標(biāo)簽法

使用標(biāo)簽是相似的，但你指向這樣的文件路徑：

1

結(jié)果是完全一樣的：

對(duì)于不支持SVG的瀏覽器厂抖，如果SVG不能顯示茎毁，甚至可以在SVG內(nèi)容中放置警告：

1This browser sucks

許多網(wǎng)頁設(shè)計(jì)師認(rèn)為這種方法是目前在網(wǎng)頁中使用SVG最可靠和最靈活的方式。

內(nèi)聯(lián)方法

我們已經(jīng)談到了SVG的XML起源，如果你用你的文本編輯器打開SVG文件七蜘，你會(huì)看到類似這樣的東西：

哇谭溉，多廢話！事實(shí)上橡卤，一旦你完成了最初的沖擊扮念，你應(yīng)該能夠看到其中的某種意義。我們可以利用這個(gè)XML代碼嵌入碧库，粘貼內(nèi)容直接到我們的HTML文件柜与。

當(dāng)你對(duì)SVG XML結(jié)構(gòu)更加熟悉的時(shí)候，你將能夠修剪出文件中的位嵌灰，這些都有助于文件的大小弄匕。

如果您喜歡，請(qǐng)隨意刪除該行沽瞭，

您真正需要的只是一個(gè)簡(jiǎn)化的版本迁匠，只包含幾個(gè)XML標(biāo)簽：

CSS背景方法

使用CSS（與HTML結(jié)合使用的樣式語法），我們也可以指定我們的SVG文件作為網(wǎng)頁元素的背景圖像驹溃。

現(xiàn)在我們正在推進(jìn)本教程的界限城丧，但是如果您有興趣學(xué)習(xí)CSS的基礎(chǔ)知識(shí)，

我們可以使用一個(gè)單獨(dú)的CSS文件豌鹤，從我們的HTML文檔鏈接到它芙贫，或者我們可以

1html {background-image:url(SVG-Test.svg); }

這個(gè)樣式規(guī)則指出我們的SVG文件應(yīng)該顯示為我們HTML元素的背景。

總結(jié)

那關(guān)于包裝的基礎(chǔ)傍药！在本教程中，我們介紹了SVG的創(chuàng)建魂仍，以及Web上基本的SVG使用拐辽。

如果你一直想知道SVG是什么，但從來不知道為什么你要使用它擦酌，我希望這個(gè)教程已經(jīng)打開你的眼睛俱诸。這種格式的潛力是巨大的，并且由于網(wǎng)絡(luò)和圖形行業(yè)人們的想象力和技術(shù)魔力而一直在增長(zhǎng)赊舶。

這期分享到這里了睁搭，學(xué)習(xí)更多干貨的朋友可關(guān)注UI設(shè)計(jì)威信公共賬號(hào)：liangyuansi1每天更新最實(shí)用技巧技能教程。歡迎加入社群605464266笼平，一起進(jìn)步园骆。