卡卡網(wǎng)

越來越多的網(wǎng)站小圖標，尤其是網(wǎng)站Logo，都使用了SVG圖像代替?zhèn)鹘y(tǒng)的PNG圖片，它的優(yōu)勢是體積非常小，并且使用內聯(lián)SVG不需要HTTP請求來加載圖像文件，提高了網(wǎng)站的性能，你可以看看以下文章：

• 圖片SVG、PNG、JPEG、GIF有什么不同？
• SVG圖片對比PNG、JPEG的5大優(yōu)點

很多人不明白使用什么工具和如何去創(chuàng)建以及在網(wǎng)頁上使用SVG圖像，今天我將詳細介紹如何用illustrator創(chuàng)建SVG圖像并在網(wǎng)頁上使用。

文章內容目錄

• 安裝illustrator
• 新建文檔
• 文字創(chuàng)建輪廓
• 文字轉換為形狀
• 導出SVG文件
• SVG文件成品
• 網(wǎng)頁添加SVG圖標
• 總結

1、安裝illustrator

你得先安裝illustrator軟件，這是個收費軟件，但你可以在網(wǎng)上找到免費版來安裝使用。

Adobe illustrator，簡稱AI，是一個矢量圖形處理工具，該軟件主要應用于印刷出版、海報書籍排版、專業(yè)插畫、多媒體圖像處理和互聯(lián)網(wǎng)頁面的制作等。

2、新建文檔

在空白文檔里用“文字”工具寫上文字，假設這個文字就是你將要創(chuàng)建的Logo圖標。

3、文字創(chuàng)建輪廓

為你的文字“創(chuàng)建輪廓”。鼠標右鍵點擊你的文字，然后在菜單里點擊“創(chuàng)建輪廓”。

4、文字轉換為形狀

把文字“轉換為形狀”。選中文字，然后點擊菜單的“對象”-“形狀”-“轉換為形狀”。

5、導出SVG文件

可以通過以下兩種方法導出SVG文件。

方法1：點擊菜單“文件”-“導出”-“導出為...”。

方法2：點擊菜單“文件”-“腳本”-“將文檔存儲為SVG”。

6、SVG圖標創(chuàng)建完畢

至此，SVG圖標創(chuàng)建完畢。這時我們會得到一個SVG文檔文件，它包含一堆腳本代碼，而這個SVG文檔文件用瀏覽器打開便是一個矢量圖標，可縮小放大不失真。

我們看看剛創(chuàng)建的SVG文檔的腳本。

webkaka.svg

<svg id="圖層_1" data-name="圖層 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 46.4 8.41">
<title>未標題-1c</title>
<path d="M119.33,285c-.8,2.18-1.52,4.19-2.23,6.17H117c-.6-2.08-1.31-4.21-1.93-6.28-.26-.9-.45-1.09-1.19-1.19v-.17h2.6v.17c-.62.11-.91.18-.91.52a.93.93,0,0,0,.07.33c.49,1.67,1.07,3.49,1.63,5.34h0c.74-2.16,1.52-4.21,2.25-6.21h.13c.65,2,1.35,4,2.08,6.2h0c.61-1.69,1.51-4.36,1.68-5.21a1.9,1.9,0,0,0,0-.37c0-.38-.25-.48-.88-.6v-.17h2.51v.17c-.76.12-.88.29-1.24,1.16-.43,1.11-1.12,3.09-2.2,6.31h-.17c-.64-2-1.66-4.91-2.12-6.17Z" transform="translate(-113.83 -282.79)"/>
<path d="M129.86,290.15a2.86,2.86,0,0,1-1.8,1,2.28,2.28,0,0,1-2.29-2.4,2.79,2.79,0,0,1,2.41-2.85,1.75,1.75,0,0,1,1.77,1.69c0,.24,0,.28-.2.31s-1.73.17-3.38.22c0,1.82,1.08,2.47,1.9,2.47a2,2,0,0,0,1.46-.66Zm-3.42-2.38,2.48,0c.3,0,.3-.12.3-.19a1.27,1.27,0,0,0-1.37-1.27C127.25,286.28,126.62,286.8,126.44,287.77Z" transform="translate(-113.83 -282.79)"/>
<path d="M133.21,286a1.37,1.37,0,0,1,.31,0,2.31,2.31,0,0,1,2.32,2.4,2.91,2.91,0,0,1-3,2.85,4,4,0,0,1-1.69-.33v-6.55c0-.77,0-.85-.86-1v-.14a5,5,0,0,0,1.44-.4v3.71Zm-1.49,3.6a1.32,1.32,0,0,0,.07.49,1.54,1.54,0,0,0,1.48.79c1.15,0,1.88-.91,1.88-2.24a2,2,0,0,0-2-2.16,3.15,3.15,0,0,0-1.39.3Z" transform="translate(-113.83 -282.79)"/>
<path d="M136.82,290.89c1-.05,1.09-.27,1.09-1.32V285c0-1-.1-1.25-1.17-1.31v-.17h3v.17c-1,.06-1.14.29-1.14,1.31v2.07a2.13,2.13,0,0,0,.81-.39,10.92,10.92,0,0,0,2.42-2.68c0-.17-.2-.2-.82-.31v-.17h2.94v.17a3.11,3.11,0,0,0-1.87.89c-.37.31-1.53,1.35-2.46,2.29.92,1,2.54,2.71,3,3.08.74.67,1,.84,1.57.91v.17h-1.49c-1.21-1.23-2.08-2.1-3.28-3.44a.81.81,0,0,0-.59-.31l-.19,0v2.24c0,1.05.09,1.27,1.19,1.32v.17h-2.93Z" transform="translate(-113.83 -282.79)"/>
<path d="M148.27,291.19a1,1,0,0,1-.39-.21,1.21,1.21,0,0,1-.26-.57,3,3,0,0,1-1.45.78,1.34,1.34,0,0,1-1.39-1.36c0-.54.37-.93,1.19-1.18a9,9,0,0,0,1.65-.64c0-.58,0-1.63-1.09-1.63-.2,0-.84.06-1.05,1a.25.25,0,0,1-.26.21.4.4,0,0,1-.36-.41c0-.18.14-.32.34-.43a5.91,5.91,0,0,1,1.69-.83,1.32,1.32,0,0,1,1.33,1.44V290c0,.49.18.68.43.68a1,1,0,0,0,.53-.16l.11.21Zm-.65-2.88a12.72,12.72,0,0,1-1.27.54c-.54.21-.87.44-.87.88a.94.94,0,0,0,.94.95,1.8,1.8,0,0,0,1.2-.61Z" transform="translate(-113.83 -282.79)"/>
<path d="M149.44,290.89c.83-.05.95-.21.95-1v-5.56c0-.8-.08-.92-.89-1v-.15a5.89,5.89,0,0,0,1.47-.4v5.55a1.91,1.91,0,0,0,.84-.36A5.2,5.2,0,0,0,153,286.5c0-.12-.16-.17-.51-.21v-.18l2.35-.11v.19c-.88.14-1.21.24-2.73,2a26.07,26.07,0,0,0,2,2.1c.54.46.79.67,1.15.63v.17l-1.24,0c-.7-.64-1.53-1.63-2.21-2.29a.77.77,0,0,0-.52-.3.81.81,0,0,0-.28.08v1.33c0,.78.12.94.93,1v.17h-2.46Z" transform="translate(-113.83 -282.79)"/>
<path d="M159.21,291.19a1.05,1.05,0,0,1-.38-.21,1.13,1.13,0,0,1-.27-.57,3,3,0,0,1-1.45.78,1.34,1.34,0,0,1-1.39-1.36c0-.54.37-.93,1.2-1.18a8.89,8.89,0,0,0,1.64-.64c0-.58,0-1.63-1.09-1.63-.19,0-.84.06-1,1a.27.27,0,0,1-.27.21.41.41,0,0,1-.36-.41c0-.18.15-.32.34-.43a5.91,5.91,0,0,1,1.69-.83,1.31,1.31,0,0,1,1.33,1.44V290c0,.49.18.68.43.68a1,1,0,0,0,.53-.16l.11.21Zm-.65-2.88a12.72,12.72,0,0,1-1.27.54c-.54.21-.86.44-.86.88a.93.93,0,0,0,.93.95,1.8,1.8,0,0,0,1.2-.61Z" transform="translate(-113.83 -282.79)"/>
</svg>

demodownload

用瀏覽器打開該SVG文檔文件，看到的是剛創(chuàng)建的文字圖標。

 慢著！上面文檔包含很多無用的腳本，我們可以優(yōu)化它，把其體積減少60%。請參閱文章：

• SVG代碼優(yōu)化工具，優(yōu)化后體積減少60%

好了！我們下一步要做的是在網(wǎng)頁上使用這個SVG圖標。 

7、把SVG Logo添加到你的網(wǎng)頁上

創(chuàng)建一個空的 HTML 頁面，并在我們的 HTML 正文標簽內的頂部包含一段代碼，或將其包含在現(xiàn)有的 HTML 頁面中。我們正在做的是創(chuàng)建一個 SVG 元素，它將成為我們新圖標的主要容器。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>index.html</title>
</head>
<body>

<!-- SVG 腳本 -->
<svg xmlns="http://www.w3.org/2000/svg" style="display:none">

</svg>

</body>
</html>

在該標簽內，讓我們添加圖標代碼。使用文本編輯器打開生成的SVG文檔，復制所有代碼并將代碼粘貼到我們的<svg>標簽中。把復制的代碼<svg替換為<symbol，并刪除xmlns="http://www.w3.org/2000/svg"，最后讓我們給symbol標簽一個 id。最終應該得到如下所示的內容：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>index.html</title>
</head>
<body>
<svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#logo"></use></svg>


<!-- SVG 腳本 -->
<svg xmlns="http://www.w3.org/2000/svg" style="display:none">

<symbol id="logo" viewBox="0 0 46.4 8.41">
<path d="M107.82 281.38c-.81 2.18-1.53 4.2-2.23 6.18h-.16c-.6-2.09-1.31-4.21-1.93-6.29-.25-.9-.44-1.09-1.19-1.19v-.16h2.61v.16c-.63.11-.92.18-.92.52a1 1 0 0 0 .08.34c.49 1.66 1.06 3.49 1.63 5.33.74-2.16 1.52-4.21 2.26-6.21h.13c.65 2 1.34 4 2.07 6.2.61-1.69 1.51-4.35 1.68-5.2a3.29 3.29 0 0 0 0-.38c0-.38-.25-.48-.87-.6v-.16h2.5v.16c-.75.12-.87.29-1.23 1.17-.43 1.1-1.13 3.08-2.21 6.31h-.04c-.63-2-1.65-4.92-2.12-6.18zM118.34 286.51a2.82 2.82 0 0 1-1.8 1.05 2.29 2.29 0 0 1-2.29-2.4 2.79 2.79 0 0 1 2.41-2.86 1.76 1.76 0 0 1 1.78 1.69c0 .24 0 .28-.21.32s-1.72.16-3.38.21c0 1.82 1.08 2.47 1.91 2.47a1.92 1.92 0 0 0 1.45-.66zm-3.42-2.37h2.49c.3 0 .3-.12.3-.19a1.28 1.28 0 0 0-1.37-1.27 1.62 1.62 0 0 0-1.42 1.46zM121.69 282.33a.93.93 0 0 1 .31 0 2.32 2.32 0 0 1 2.33 2.4 2.91 2.91 0 0 1-3 2.86 3.86 3.86 0 0 1-1.69-.34v-6.55c0-.77 0-.85-.87-1v-.13a4.84 4.84 0 0 0 1.44-.41v3.72zm-1.49 3.59a1.42 1.42 0 0 0 .08.5 1.54 1.54 0 0 0 1.47.79c1.15 0 1.88-.91 1.88-2.25a2 2 0 0 0-2-2.15 3 3 0 0 0-1.4.3zM125.3 287.26c1-.05 1.1-.28 1.1-1.32v-4.55c0-1-.1-1.25-1.18-1.31v-.16h3v.16c-1 .06-1.14.29-1.14 1.31v2.08a2.12 2.12 0 0 0 .82-.4 10.82 10.82 0 0 0 2.41-2.67c0-.17-.19-.21-.82-.32v-.16h2.94v.16a3.11 3.11 0 0 0-1.87.89c-.37.31-1.52 1.36-2.46 2.29.93 1 2.55 2.71 3 3.08.74.68.94.84 1.57.92v.16h-1.49c-1.21-1.23-2.09-2.09-3.29-3.44a.82.82 0 0 0-.58-.31h-.2v2.25c0 1 .1 1.27 1.19 1.32v.16h-3zM136.75 287.56a.9.9 0 0 1-.65-.78 3 3 0 0 1-1.45.78 1.35 1.35 0 0 1-1.39-1.37c0-.54.37-.93 1.2-1.18a9.79 9.79 0 0 0 1.64-.63c0-.59 0-1.63-1.09-1.63-.19 0-.84.06-1 1a.28.28 0 0 1-.27.2.41.41 0 0 1-.36-.41c0-.18.15-.32.34-.43a6.18 6.18 0 0 1 1.69-.83 1.32 1.32 0 0 1 1.33 1.44v2.58c0 .49.18.68.43.68a1 1 0 0 0 .53-.15l.11.2zm-.65-2.88c-.25.14-1 .43-1.27.54-.54.2-.86.43-.86.87a.92.92 0 0 0 .93 1 1.8 1.8 0 0 0 1.2-.61zM137.93 287.26c.83-.05.95-.22.95-1v-5.55c0-.81-.09-.93-.89-1v-.14a6.15 6.15 0 0 0 1.46-.41v5.55a1.75 1.75 0 0 0 .84-.36 5.19 5.19 0 0 0 1.15-1.47c0-.12-.15-.17-.5-.22v-.18l2.35-.11v.19c-.89.15-1.21.24-2.74 2a24.65 24.65 0 0 0 2 2.1c.54.47.79.67 1.15.64v.16h-1.25c-.69-.65-1.52-1.63-2.21-2.29a.72.72 0 0 0-.51-.3.79.79 0 0 0-.29.07v1.33c0 .78.12.95.94 1v.16h-2.46zM147.69 287.56a1.13 1.13 0 0 1-.38-.22 1.22 1.22 0 0 1-.26-.56 3 3 0 0 1-1.45.78 1.36 1.36 0 0 1-1.4-1.37c0-.54.38-.93 1.2-1.18a10 10 0 0 0 1.65-.63c0-.59 0-1.63-1.09-1.63-.2 0-.84.06-1.05 1a.26.26 0 0 1-.26.2.4.4 0 0 1-.36-.41.54.54 0 0 1 .33-.43 6.26 6.26 0 0 1 1.7-.83 1.32 1.32 0 0 1 1.33 1.44v2.58c0 .49.18.68.43.68a1.1 1.1 0 0 0 .53-.15l.1.2zm-.64-2.88c-.26.14-1 .43-1.27.54-.54.2-.87.43-.87.87a.93.93 0 0 0 .94 1 1.84 1.84 0 0 0 1.2-.61z" transform="translate(-102.31 -279.15)"/>
</symbol>

</svg>

</body>
</html>
 
</body>
</html>

現(xiàn)在我們準備使用圖標將其顯示在我們的網(wǎng)頁上。為此，我們將使用另一個<svg>標簽：

<svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#logo"></use></svg>

這會將我們的圖標放在頁面上；如果你的圖標是白色的導致看不到它，我們可以使用 CSS 通過將一些類應用于標簽來修改它<svg>：

<style>
  .logo-dark {
    fill: #000;
  }
  
  .logo-large {
    width: 1000px;
  }
</style>
  
<svg class="logo-dark logo-large"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#logo"></use></svg>

現(xiàn)在我們準備在我們的網(wǎng)頁上使用圖標，通過將 CSS 類應用于 SVG 鏈接容器，我們可以在網(wǎng)頁的不同區(qū)域使用圖標，并調整其大小和顏色以適合頁面。

demodownload

總結

本文詳細介紹了如何用illustrator創(chuàng)建SVG圖像并在網(wǎng)頁上使用，該教程步驟一步一步寫得很完整，適合新手參閱。

相關文章

• SVG代碼優(yōu)化工具，優(yōu)化后體積減少60%
• SVG圖標對比圖標字體的5大優(yōu)點
• SVG圖標：icon-home【代碼】
• 逾千個SVG/PNG常用矢量圖標(含HTML代碼)免費下載
• 簡化svg文件中的對象可減小文件大小，6mb減到700kb
• 使用Inkscape優(yōu)化SVG，文件從1600kb減到16kb
• 減小SVG體積的5個技巧，網(wǎng)頁加載時間從10秒降到2秒
• 比較和了解何時使用SVG與何時使用Canvas

• 圖片SVG、PNG、JPEG、GIF有什么不同？
• SVG 與 Canvas 的 6 大區(qū)別比較表
• SVG 與 Canvas 的五大區(qū)別
• SVG圖片對比PNG、JPEG的5大優(yōu)點
• svg circle stroke屬性設置實線邊框/虛線邊框/無邊框
• CSS+SVG：畫圓并且文字寫在圓中間
• CSS+SVG實現(xiàn)環(huán)形/圓環(huán)文字效果【簡單實例】

標簽: SVG  SVG圖標  illustrator