|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
[教程]如何用illustrator創(chuàng)建SVG圖像并在網(wǎng)頁(yè)上使用
作者:admin 時(shí)間:2023-6-20 13:16:13 瀏覽:越來越多的網(wǎng)站小圖標(biāo)，尤其是網(wǎng)站Logo，都使用了SVG圖像代替?zhèn)鹘y(tǒng)的PNG圖片，它的優(yōu)勢(shì)是體積非常小，并且使用內(nèi)聯(lián)SVG不需要HTTP請(qǐng)求來加載圖像文件，提高了網(wǎng)站的性能，你可以看看以下文章：
很多人不明白使用什么工具和如何去創(chuàng)建以及在網(wǎng)頁(yè)上使用SVG圖像，今天我將詳細(xì)介紹如何用illustrator創(chuàng)建SVG圖像并在網(wǎng)頁(yè)上使用。
- 安裝illustrator
- 新建文檔
- 文字創(chuàng)建輪廓
- 文字轉(zhuǎn)換為形狀
- 導(dǎo)出SVG文件
- SVG文件成品
- 網(wǎng)頁(yè)添加SVG圖標(biāo)
- 總結(jié)
文章內(nèi)容目錄
1、安裝illustrator
你得先安裝illustrator軟件，這是個(gè)收費(fèi)軟件，但你可以在網(wǎng)上找到免費(fèi)版來安裝使用。
Adobe illustrator，簡(jiǎn)稱AI，是一個(gè)矢量圖形處理工具，該軟件主要應(yīng)用于印刷出版、海報(bào)書籍排版、專業(yè)插畫、多媒體圖像處理和互聯(lián)網(wǎng)頁(yè)面的制作等。
2、新建文檔
在空白文檔里用“文字”工具寫上文字，假設(shè)這個(gè)文字就是你將要?jiǎng)?chuàng)建的Logo圖標(biāo)。
3、文字創(chuàng)建輪廓
為你的文字“創(chuàng)建輪廓”。鼠標(biāo)右鍵點(diǎn)擊你的文字，然后在菜單里點(diǎn)擊“創(chuàng)建輪廓”。
4、文字轉(zhuǎn)換為形狀
把文字“轉(zhuǎn)換為形狀”。選中文字，然后點(diǎn)擊菜單的“對(duì)象”-“形狀”-“轉(zhuǎn)換為形狀”。
5、導(dǎo)出SVG文件
可以通過以下兩種方法導(dǎo)出SVG文件。
方法1：點(diǎn)擊菜單“文件”-“導(dǎo)出”-“導(dǎo)出為...”。
方法2：點(diǎn)擊菜單“文件”-“腳本”-“將文檔存儲(chǔ)為SVG”。
6、SVG圖標(biāo)創(chuàng)建完畢
至此，SVG圖標(biāo)創(chuàng)建完畢。這時(shí)我們會(huì)得到一個(gè)SVG文檔文件，它包含一堆腳本代碼，而這個(gè)SVG文檔文件用瀏覽器打開便是一個(gè)矢量圖標(biāo)，可縮小放大不失真。
我們看看剛創(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>未標(biāo)題-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>
用瀏覽器打開該SVG文檔文件，看到的是剛創(chuàng)建的文字圖標(biāo)。
慢著！上面文檔包含很多無用的腳本，我們可以優(yōu)化它，把其體積減少60%。請(qǐng)參閱文章：
好了！我們下一步要做的是在網(wǎng)頁(yè)上使用這個(gè)SVG圖標(biāo)。
7、把SVG Logo添加到你的網(wǎng)頁(yè)上
創(chuàng)建一個(gè)空的 HTML 頁(yè)面，并在我們的 HTML 正文標(biāo)簽內(nèi)的頂部包含一段代碼，或?qū)⑵浒诂F(xiàn)有的 HTML 頁(yè)面中。我們正在做的是創(chuàng)建一個(gè) SVG 元素，它將成為我們新圖標(biāo)的主要容器。
<!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>
在該標(biāo)簽內(nèi)，讓我們添加圖標(biāo)代碼。使用文本編輯器打開生成的SVG文檔，復(fù)制所有代碼并將代碼粘貼到我們的<svg>標(biāo)簽中。把復(fù)制的代碼<svg替換為<symbol，并刪除xmlns="http://www.w3.org/2000/svg"，最后讓我們給symbol標(biāo)簽一個(gè) id。最終應(yīng)該得到如下所示的內(nèi)容：
<!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)在我們準(zhǔn)備使用圖標(biāo)將其顯示在我們的網(wǎng)頁(yè)上。為此，我們將使用另一個(gè)<svg>標(biāo)簽：
<svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#logo"></use></svg>
這會(huì)將我們的圖標(biāo)放在頁(yè)面上；如果你的圖標(biāo)是白色的導(dǎo)致看不到它，我們可以使用 CSS 通過將一些類應(yīng)用于標(biāo)簽來修改它<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)在我們準(zhǔn)備在我們的網(wǎng)頁(yè)上使用圖標(biāo)，通過將 CSS 類應(yīng)用于 SVG 鏈接容器，我們可以在網(wǎng)頁(yè)的不同區(qū)域使用圖標(biāo)，并調(diào)整其大小和顏色以適合頁(yè)面。
總結(jié)
本文詳細(xì)介紹了如何用illustrator創(chuàng)建SVG圖像并在網(wǎng)頁(yè)上使用，該教程步驟一步一步寫得很完整，適合新手參閱。
相關(guān)文章
- SVG代碼優(yōu)化工具，優(yōu)化后體積減少60%
- SVG圖標(biāo)對(duì)比圖標(biāo)字體的5大優(yōu)點(diǎn)
- SVG圖標(biāo)：icon-home【代碼】
- 逾千個(gè)SVG/PNG常用矢量圖標(biāo)(含HTML代碼)免費(fèi)下載
- 簡(jiǎn)化svg文件中的對(duì)象可減小文件大小，6mb減到700kb
- 使用Inkscape優(yōu)化SVG，文件從1600kb減到16kb
- 減小SVG體積的5個(gè)技巧，網(wǎng)頁(yè)加載時(shí)間從10秒降到2秒
- 比較和了解何時(shí)使用SVG與何時(shí)使用Canvas
標(biāo)簽: SVG SVG圖標(biāo) illustrator
- SVG代碼優(yōu)化工具，優(yōu)化后體積減少60%
- 純CSS+SVG創(chuàng)建有趣的動(dòng)畫復(fù)選框checkbox
- 一個(gè)具有鼠標(biāo)懸停動(dòng)畫效果的SVG復(fù)選框checkbox
- 8款SVG創(chuàng)建的動(dòng)畫checkbox多選框和radio單選框
- SVG圖標(biāo)對(duì)比圖標(biāo)字體的5大優(yōu)點(diǎn)
- SVG圖標(biāo)：icon-home【代碼】
- 逾千個(gè)SVG/PNG常用矢量圖標(biāo)(含HTML代碼)免費(fèi)下載
- 簡(jiǎn)化svg文件中的對(duì)象可減小文件大小，6mb減到700kb
- 使用Inkscape優(yōu)化SVG，文件從1600kb減到16kb
- 減小SVG體積的5個(gè)技巧，網(wǎng)頁(yè)加載時(shí)間從10秒降到2秒
- 詳細(xì)介紹CSS+SVG創(chuàng)建圓圈/圓環(huán)動(dòng)畫
- [實(shí)例]純 CSS SVG 畫圓/圓環(huán)/圓弧動(dòng)畫
- 比較和了解何時(shí)使用SVG與何時(shí)使用Canvas
- 圖片SVG、PNG、JPEG、GIF有什么不同？
- SVG 與 Canvas 的 6 大區(qū)別比較表
- 站長(zhǎng)推薦
