可縮放矢量圖形（SVG）是早在1998年就已經有的一種矢量圖像格式。它總是和Web一起發展，但是直到現在才開始趕上Web發展的步伐。如今我們已經不能否認SVG和Web的相關性，所以讓我們來學習一下從Illustrator導出SVG文件到Web瀏覽器的基礎知識。
注意：我這里的示例使用的都是Adobe Illustrator CC，但是其他版本的AI也有類似的（但不完全相同的）選項和工具。
為什么使用SVG？
SVG格式是由萬維網聯盟(W3C)開發並進行維護的。W3C是由一群努力規范網絡，使得它成為一個更開放以及可訪問的民間組織。
SVG對於Web來說是很棒的，尤其是現在，因為它不必考慮屏幕分辨率的問題。不論你新入手的智能手機的像素如何密集（分辨率有多高），矢量始終顯示得如同剛下的雪一樣清晰，而不是柵格化的圖像。
文件大小對於Web來說永遠是一個不可忽視的問題（沒有人會願意等一個通過移動連接緩慢地加載5Tb的圖像到瀏覽器中），而SVG是一個簡化的矢量格式。它基於XML，又刪掉了很多不必要的“內容”，提供了一個相對輕量級的文件。
最后，基於這些XML的構建模塊，SVG文件的內容可以被制作得同Web頁面上的其他元素一樣。SVG中的內容是可以被分離的，顏色可以變換，描邊寬度、透明度也都可以改變，我們甚至可以使用濾鏡（如高斯模糊），甚至可以通過CSS和JavaScript創建動畫。
何時使用SVG？
清晰的高質量線條，並能夠處理圖形元素的好處是不言自明的，但是你可以在哪里利用這些優勢呢？這里有一個適合使用SVG的列表：
日常的圖形：如果你在使用網站上的圖形，考慮一下是否可能是SVG格式。如果是的話，為什么不使用它呢？攝影是一個無法使用SVG的例子，但是對於其它的圖片，可以考慮一下。
如此清晰的字體樣本，何必使用模糊的位圖格式呢？
圖標：網站是一個充滿圖標的世界。它們不僅通俗易懂（如果使用得當），還縮短了用戶加載界面的進程。近年來，圖標經常是通過網頁字體的方式應用到網站中，但它也可以作為SVG注入到頁面中。大家都會喜歡非常簡潔、清晰的圖標的，so lovely!
我還沒有完成這組圖標的制作，但歡迎你下載和使用它們…
Logo：如果有什么東西是一家企業需要保持珍視的，那就是它的身份標識——Logo了。SVG提供了在網頁上展示品牌的最好的方式，而且簡單朴素。顏色可以精確，線條質量完美無瑕，而且同一個文件可以在網站上重復使用，但會根據情況有所改變。Perfect！
認得這個Logo嗎？
裝飾：我不需要向矢量藝術家們出售這個idea，是吧？
fixate.it的SVG裝飾
動畫：通過CSS3和JavaScript，Web動畫世界的大門已經正式打開。就目前我列出的各種原因，SVG就是完美的駕車！你能想象當你鼠標滑過一個按鈕時的動畫嗎？圖標，給你直接的而且個性化的反饋了嗎？完全沒有極限！
Iconic網站的SVG反饋示例
這就是SVG，一種矢量格式，和Web一起發展！現在讓我們看看如何使用它。
將文件另存為SVG
我們將使用一個非常簡單的圖像，來說明SVG是干什么的。
新建文檔
打開Illustrator，新建一個文檔（文件(File) > 新建(New Document)），設置文件名稱，把畫板設置為300 x 300px。
選擇一個圖像
在這點上，你使用的示例矢量圖形會導致一些差別，但是都是相對簡單的。我使用了由“Webdings”字體免費提供的“No Pirates Allowed”的符號（我從來沒有想過我會用這東西！）
去字形(Glyphs)面板（文字(Type) > 字形(Glyphs)），選擇“Webdings”字體，瀏覽一下可用的各種字符。
選中文本工具(Text Tool)，點擊畫板，然后雙擊你選擇的字形來使用它。
轉換為輪廓
我們現在要把這個字形轉換為輪廓。
注意：SVG確實支持文本對象，但是為了在根本的層面上展示東西，我們還是會選擇路徑。
選中字形，使用選擇工具(V)(Selection Tool(V))：
然后，選擇文字(Type) > 創建輪廓(Create Outlines)。
So good!現在我們就有一個基於路徑的矢量對象了。
保存
把這個文檔保存成SVG格式，去文件(File) > 存儲(Save)，或者文件(File) > 存儲為(Save As...)。在彈出的對話框中選擇一個存儲位置，給它一個文件名（如果你還沒命名的話），然后最重要的是，選擇SVG作為存儲格式。
你點擊之后會彈出另一個對話框，是一些SVG的選項。
事實上，目前忽略這些選項是沒有問題的，全部保持默認即可。
晚點我們會講解一下這些選項，現在我們就先點擊確定(OK)吧。
這樣SVG文件就生成啦！
關於SVG選項
之前我們跳過了SVG選項，因為確實沒有太多關系。但是，為了全面了解，我們還是來看一下吧。
SVG vs. SVGZ
首先，我們可以在保存的對話框中選擇兩種潛在的SVG格式。
SVGZ是一種高度壓縮（Zipped，我猜想）版本的SVG，它給出了一個更小的文件，但是把它自身的XML變成了亂碼，導致我們沒辦法使用CSS和JavaScript來操縱矢量。
SVG配置文件
由於Web以及Web標准的持續發展不斷變化，意味着SVG也是不斷發展的。如下你可以看到我們在保存SVG文件時的第一個選項：SVG配置文件(SVG Profiles)。配置文件有如下這幾個選項：
它們分別的意義（或多或少）如下：
- SVG 1.0: SVG的第一個版本(2001年)
- SVG 1.1: 和SVG 1.0基本一樣，不過SVG 1.1可以被分成更進一步的子類型
- SVG Tiny 1.1: 這是SVG 1.1的第一個子類型，對移動Web做了優化。這是一種非常簡單的SVG格式，是為“高度受限的移動設備”設計的。Tiny不支持漸變、透明度、剪裁、掩蔽、標志、圖案、下划線文本、貫穿線文本、垂直文本以及SVG的濾鏡效果。
- SVG Tiny 1.1+: 這是SVG Tiny 1.1的進一步發展，加入了對漸變和透明度的支持。
- SVG Basic 1.1: 這是SVG 1.1的第二個子類型，為移動設備（如智能手機）提供了更多的功能。基本上不支持非矩形裁剪和一些SVG濾鏡效果。
- SVG Tiny 1.2: 這最初是打算作為SVG的下一套完整的規范的，但是最后卻開發成了一個Tiny子類型。不要問我究竟有什么區別orz
很快，SVG 2.0就可以添加到這個列表中。這些配置的細微差別對我們來說，在很大程度上是無關緊要的。SVG能夠處理各種各樣的事情，但對於簡單的矢量保留SVG 1.1以及圖形當前的默認設置即可，在Web上的任何可能的地方顯示都是沒有問題的。
字體
SVG 文件並不僅僅可以包含矢量路徑。文本對象就是一個這樣的例子，它的字體(Font)選項可以讓你來決定如何處理文本對象。
- Adobe CEF: 它會使用字體提示來顯示出更精致的排版。但是它並不能被所有的SVG查看器支持。
- SVG: 被所有SVG查看器支持，但是缺乏Adobe CEF的精細。
- 轉換為輪廓: 刪除所有的編輯功能，但是無論在什么查看器中查看，都保留了一樣的文本。導出一個稍大的文件，作為路徑需要進行說明，而不僅僅是指出都存在哪些字符。
字體選項中還包含子集化(Subsetting)，這只在你沒有把文本轉換成輪廓是才是有關系的。
子集化在SVG文件中嵌入字符信息，可以讓文件顯示那些在用戶的系統中沒有安裝的字體。嵌入整套字體（顯然）會導致文件變得很大，但是你可以選擇要把多少字形包含進去。
選項
雖然我們已經選擇了嵌入對象，但是這里的最后一個選項也會影響文件的大小。
使用大致相同的方式，SVG文件（包含字體）可以保存位圖圖像。在圖像位置(Image location)這里選擇“嵌入”，讓圖像可以通過代碼的形式包含進文件里，或者選擇“鏈接”讓圖像被簡單引用。這和在Illustrator中放入圖像是一樣的，極大地影響了最終文件的大小。
這里的最后一個復選框，可以讓你保留Illustrator的編輯功能，如果有需要的話。這意味着所有的圖層、濾鏡效果、符號等，都將被保留。但是，如果你的SVG已經准備生成了，而且文件的大小很重要，那么就不要選中了。
注意：推薦你保存為.ai后綴的文件，方便再次編輯。
Couple o' buttons
最后，在選項對話框的底部的這三個按鈕的功能分別是：
- 更多選項(More Options): 顯示完整SVG對話框
- SVG代碼..(SVG Code...): 啟動Web瀏覽器以顯示SVG代碼
- Globe: 啟動Web瀏覽器以查看SVG文檔
在Web中使用SVG
如果你不習慣直接使用Web、HTML、瀏覽器工作，這一整套東西，有幾點事情需要考慮一下。
Web瀏覽器
首先，瀏覽器可以非常好地處理這種文件格式。右鍵點擊你的SVG文件，選擇你的默認瀏覽器打開：
舊版的瀏覽器，比如IE8或者更早的版本，不支持SVG格式，所以就沒辦法在里邊顯示了。
關於SVG和瀏覽器支持的更詳細的內容，可以在caniuse.com找到。
但是只要你使用的是現代瀏覽器，SVG文件的打開和顯示都是沒有任何問題的。
首先要注意的事情是，SVG文件保留了我們最初定義的尺寸。我們設定了300 x 300px的大小，畫板的外邊界已經確定，而海盜圖標也被放在了中心。
在Web頁面中嵌入SVG
到目前為止，我們已經創建了一個SVG文件，並已經在瀏覽器中查看。現在該了解如何在Web頁面中顯示這個文件了。
首先，我們需要一個Web頁面。不需要任何復雜的東西，一個空頁面帶有 .html 的文件擴展名，再用一個普通的文本編輯器保存即可。我們不需要糾結這個文件中的代碼，但是如果你對HTML的基礎知識有興趣，可以看看這個，The Best Way to Learn HTML。
這是我的文件，使用Mac OS X自帶的文本編輯器打開，你也可以使用其它的文本或代碼編輯器。
這個文件可以在Web瀏覽器中打開，但是我們需要添加一些HTML“標記”的代碼，以便嵌入SVG。有以下幾種方法。
<img> 標簽方法
首先我們使用一個<img>標簽（你可能習慣於使用JPG, PNG文件等等），將文件路徑放入 src="" 屬性中。把這個片段粘貼到你的HTML文件中：
<img src="SVG-Test.svg" /> 假設文件路徑是正確的，你的HTML頁面在瀏覽器中打開應該是這樣的：
我知道這和在Web瀏覽器中直接打開SVG文件是一樣的效果，但現在我們可以做的更好！例如，我們可以使用 width="" 屬性將SVG放大：
<img src="SVG-Test.svg" width="900" /> 
一個漂亮的、清晰的SVG，可以無限擴展！
這個方法也許是最簡單的，但是它也存在問題。有一些瀏覽器，出於安全考慮，會限制你能使用SVG來完成的東西（比如：JavaScript）。我們來看看其他的方法。
<object> 標簽方法
使用 <object> 標簽，但是你要這樣指定文件路徑：
<object type="image/svg+xml" data="SVG-Test.svg"></object> 結果完全相同：
對於不支持SVG的瀏覽器，你可以在 <object> 的內容中放置一個warning，在SVG不能加載的時候顯示：
<object type="image/svg+xml" data="SVG-Test.svg">This browser sucks</object> 很多網頁設計師都認為這種方法是目前在Web頁面中使用SVG的最可靠、最靈活的方法。
內聯方法
我們之前說到SVG源於XML，你過你在你的文本編輯器中打開SVG文件，你會看到如下的代碼：
這么大的負載！事實上，在你最初的震驚之后，你應該是能夠看懂一些的了。我們可以把這些XML代碼嵌入，即把內容直接粘貼到HTML文件中。
當你對SVG XML文檔的結構熟悉了之后，你就可以直接修改文件了，這有助於精簡文件大小。
只要你想要，可以刪除 <!DOCTYPE> 這一行，還有 <!-- Generator: Adobe Illustrator 的注釋，甚至是 <?xml 的聲明。
你真正需要的是一個簡化的版本，只包括幾個XML標簽：
<svg> <path/> </svg> 我們的SVG：
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve"> <path d="M220.784,150c0,19.533-6.914,36.214-20.742,50.042c-13.828,13.829-30.51,20.743-50.042,20.743 c-19.533,0-36.213-6.914-50.042-20.743C86.13,186.214,79.216,169.533,79.216,150 c0-19.533,6.914-36.213,20.743-50.042 C113.787,86.129,130.468,79.215,150,79.215c19.532,0,36.214,6.914,50.042,20.742 C213.87,113.786,220.784,130.467,220.784,150z M209.463,150c0-16.421-5.806-30.436-17.416-42.047C180.437,96.343,166.421,90.53 7,150,90.537c-14.693,0-27.6,4.753-38.72,14.261 l11.149,11.148l-7.865,8.644l-11.322-11.409c-8.47,10.775-12.705,23.048-12.705, 36.819c0,16.422,5.804,30.438,17.415,42.048 c11.61,11.609,25.626,17.415,42.047,17.415c13.712,0,25.957-4.265,36.732-12.791 l-10.199-10.112l7.778-8.643l10.804,10.717 C204.68,177.514,209.463,164.636,209.463,150z M175.756,177.744c0,7.145-2.521,13.224-7.562,18.236 c-5.043,5.013-11.106,7.52-18.193,7.52c-7.145,0-13.253-2.507-18.323-7.52c-5.07 1-5.013-7.605-11.092-7.605-18.236v-15.212 c-2.882-0.114-5.315-1.18-7.303-3.197c-1.988-2.017-2.982-4.408-2.982-7.174c0-2 .708,0.994-5.069,2.982-7.087 c1.988-2.017,4.421-3.082,7.303-3.198v-38.114c17.861,0,31.315,3.197,40.362,9.5 93c7.548,5.302,11.322,12.044,11.322,20.225 V177.744z M124.072,158.729v-13.051c-4.207,0.346-6.31,2.507-6.31,6.483C117.762,156.195,119.865,158.384,124.072,158.729z M152.333,111.28l-17.977-4.148h-5.963v6.31L152.333,111.28z M165.384,119.663l-7-5.186l-29.991,3.284v6.31L165.384,119.663z M170.311,128.824l-2.247-4.84l-39.67,4.754v5.186L170.311,128.824z M171.435,138.418v-4.84l-43.042,4.84H171.435z M171.435,177.744v-35.869h-3.458c0,6.167-0.691,10.473-2.074,12.921c-1.383,2.45 -3.774,3.674-7.173,3.674 c-6.108,0-9.162-5.532-9.162-16.595h-21.175v35.869H171.435z M146.802,173.681h-3.198v-24.027h-12.187v-2.938h15.384V173.681z M138.678,151.728l-2.939,3.112l-2.506-3.112H138.678z M159.68,186.559v-3.371h-19.532v3.371H159.68z"/> </svg> CSS背景方法
使用CSS（與HTML結合使用的樣式語法）我們也可以讓SVG文件作為一個背景圖像元素加載到Web頁面中。
這是這個教程之外的內容了，如果你對學習CSS有興趣的話，可以看一下這個頁面，The Best Way to Learn CSS。
我們可以用一個單獨的CSS文件，把它鏈接到我們的HTML文檔，或者在我們的HTML文章中直接使用<style>標簽。樣式定義如下：
html { background-image: url(SVG-Test.svg); }這種樣式規則指定了我們的SVG文件會顯示為我們的HTML元素的背景。
總結
以上就是大概的基礎內容！在這個教程中我們講解了SVG的創建，還有SVG在Web中的基本使用。
如果你還不清楚SVG是什么，而且不知道為何要使用它，我希望這個教程已經讓你明白了這兩個問題。這種文件格式的潛力是巨大的，並且接下來的時間里都會不斷發展，歸功於大家在Web以及圖形這一方面的想象力還有技術魔力。
原文鏈接：http://www.w3cplus.com/svg/svg-files-from-illustrator-to-the-web.html