卡卡網(wǎng)

如果你想把某些PNG圖像轉(zhuǎn)換為SVG包含有path路徑的圖像，以便更好地在網(wǎng)頁(yè)上使用，那么你可以參考本文介紹的方法，這是一個(gè)被廣泛應(yīng)用的PNG圖片轉(zhuǎn)換為SVG圖像的方法，這個(gè)轉(zhuǎn)換是用illustrator來(lái)完成的。

下面介紹操作步驟。

步驟1：安裝illustrator

首先，你得下載并安裝illustrator軟件，這是一個(gè)付費(fèi)軟件，但你可以在網(wǎng)上找到免費(fèi)版本使用。

步驟2：打開(kāi)PNG圖像

在illustrator里打開(kāi)PNG圖像。點(diǎn)擊菜單的“文件”-“打開(kāi)”，然后選擇你的PNG圖像。

步驟3：建立“圖像描摹”

首先選中你的PNG圖像，然后點(diǎn)擊菜單“對(duì)象”-“圖像描摹”-“建立”。

 
點(diǎn)擊圖片放大

步驟4：設(shè)置“圖像描摹”

點(diǎn)擊菜單“窗口”-“圖像描摹”，打開(kāi)“圖像描摹”設(shè)置窗口。

 
點(diǎn)擊圖片放大

在“圖像描摹”設(shè)置窗口（請(qǐng)選中“預(yù)覽”選項(xiàng)），可以對(duì)你的圖像進(jìn)行調(diào)整，達(dá)到符合你的要求為止。

步驟5：擴(kuò)展“圖像描摹”

在上面步驟中，調(diào)整完畢后，再點(diǎn)擊菜單的“對(duì)象”-“圖像描摹”-“擴(kuò)展”。

 
點(diǎn)擊圖片放大

步驟6：導(dǎo)出SVG文件

至此，PNG轉(zhuǎn)SVG就完成了。最后導(dǎo)出SVG文件。

可以通過(guò)以下兩種方法導(dǎo)出SVG文件。

方法1：點(diǎn)擊菜單“文件”-“導(dǎo)出”-“導(dǎo)出為...”。

方法2：點(diǎn)擊菜單“文件”-“腳本”-“將文檔存儲(chǔ)為SVG”。

步驟7：檢測(cè)成果

導(dǎo)出SVG文件后，打開(kāi)它，你會(huì)得到類似下面的腳本。

my-logo.svg

<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 23.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="圖層_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
 y="0px" viewBox="0 0 288 560.001" style="enable-background:new 0 0 288 560.001;" xml:space="preserve">
<g>
<path style="fill:#FDFDFD;" d="M144.899,287.003c-5.899-0.002-......,144.899,287.003z"/>
<path style="fill:#838383;" d="M143.857,277.354c-3.904,0.943......,277.354z"/>
<path style="fill:#858585;" d="M149.735,279.588c-1.24-1.304-......,279.588z"/>
</g>
</svg>

代碼有點(diǎn)多？你可以使用如下方法把SVG文件體積減少60%。

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

如何在網(wǎng)頁(yè)上使用SVG圖標(biāo)？請(qǐng)參閱下面文章。

• 把SVG Logo添加到你的網(wǎng)頁(yè)上

總結(jié)

本文詳細(xì)介紹了 如何使用illustrator把PNG圖片轉(zhuǎn)換為SVG含path路徑文件的方法，該方法操作很簡(jiǎn)單。如果你有illustrator，那么你應(yīng)該很容易上手，沒(méi)有也沒(méi)關(guān)系，在網(wǎng)上完全可以找到免費(fèi)版本來(lái)使用。

相關(guān)文章

• [教程]如何用illustrator創(chuàng)建SVG圖像并在網(wǎng)頁(yè)上使用
• 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
• 圖片SVG、PNG、JPEG、GIF有什么不同？
• SVG 與 Canvas 的 6 大區(qū)別比較表
• SVG 與 Canvas 的五大區(qū)別
• SVG圖片對(duì)比PNG、JPEG的5大優(yōu)點(diǎn)

標(biāo)簽: SVG  SVG圖標(biāo)  illustrator  PNG