隨著響應(yīng)式網(wǎng)頁(yè)的發(fā)展，對(duì)于內(nèi)容呈現(xiàn)的要求也越來越高，尤其是圖像。為了在各種設(shè)備上能實(shí)現(xiàn)自然伸縮或擴(kuò)展而不影響圖片質(zhì)量，所以矢量圖形（SVG）正變得越來越受歡迎。

?

大家都知道，在計(jì)算機(jī)圖形學(xué)中，有兩種主要的圖像類型：矢量和位圖。位圖[bitmap]，也叫做點(diǎn)陣圖，柵格圖象，像素圖，簡(jiǎn)單地說，就是最小單位由像素構(gòu)成的圖，縮放會(huì)失真。矢量圖，簡(jiǎn)單地說，就是縮放不失真的圖像格式。

?

為什么SVG更受歡迎？主要有這幾方面的原因：

?

• SVG 是可伸縮的矢量圖形，在瀏覽器中改變尺寸，其圖形質(zhì)量不會(huì)有所損失
• 相比其它位圖，SVG圖像文件更小，可壓縮性更強(qiáng)
• SVG 可以被記事本等閱讀器、搜索引擎訪問
• SVG 圖像中的文本是可選的，同時(shí)也是可復(fù)制的
• SVG 圖像可以與DOM，CSS和JavaScript交互
• SVG 可以制作成整體或局部動(dòng)畫

?

你可以使用 Illustrator 或者 Inkscape 來創(chuàng)建 SVG 圖像。 但當(dāng)進(jìn)行 Web 設(shè)計(jì)時(shí)，我們還需要做一些優(yōu)化來使得 SVG 變得更加輕量。要?jiǎng)?chuàng)建和使用SVG文件，你需要一個(gè)矢量圖形編輯器。以下是摹客團(tuán)隊(duì)為大家整理的適用于Windows，Mac，Linux，Web，iOS和Android的免費(fèi)或付費(fèi)的SVG編輯器。

?

1. Adobe Illustrator

?

?

支持：Windows/Mac

?

Adobe Illustrator作為全球最著名的矢量圖形軟件，以其強(qiáng)大的功能和體貼用戶的界面，已經(jīng)占據(jù)了全球矢量編輯軟件中的大部分份額。據(jù)不完全統(tǒng)計(jì)全球有37%的設(shè)計(jì)師在使用Adobe Illustrator進(jìn)行藝術(shù)設(shè)計(jì)。

?

作為一款非常好的矢量圖形處理工具，該軟件主要應(yīng)用于印刷出版、海報(bào)書籍排版、專業(yè)插畫、多媒體圖像處理和互聯(lián)網(wǎng)頁(yè)面的制作等，也可以為線稿提供較高的精度和控制，適合生產(chǎn)任何小型設(shè)計(jì)到大型的復(fù)雜項(xiàng)目。

?

免費(fèi)下載

?

2. SVG.js

?

支持：Web

?

SVG.js庫(kù)為開發(fā)人員和設(shè)計(jì)人員提供了一些功能，可以讓你將多個(gè)SVG圖像拼接在一起，創(chuàng)建出可用于視頻項(xiàng)目，網(wǎng)站需求的時(shí)髦動(dòng)畫，或者只是表達(dá)你的創(chuàng)造力。

?

免費(fèi)下載

?

3. Inkscape

?

Mockplus 買1送1 & 6.6折優(yōu)惠來襲！

去看看

支持：Windows/Mac

?

Inkscape一款非常受歡迎的SVG編輯器，可以免費(fèi)使用并可用于跨平臺(tái)，是插圖畫家，設(shè)計(jì)師和網(wǎng)頁(yè)設(shè)計(jì)師的理想選擇。它擁有強(qiáng)大的對(duì)象創(chuàng)建和操作工具，例如鉛筆工具、畫筆工具、矩形、多邊形等。

?

這款工具主要用作圖表，徽標(biāo)，插圖，圖表等形式構(gòu)建和優(yōu)化矢量圖形， 甚至是多重圖像。它以擁有全面的SVG支持而聞名，并且，支持一系列輸出格式，包括PNG，OpenDocument，DXF，PDF，EPS，sk1等。

?

免費(fèi)下載

?

4. Vector

?

支持：Windows

?

Vectr是一個(gè)免費(fèi)的圖形編輯器，可以輕松創(chuàng)建矢量圖形, 幾乎可以滿足于任何矢量任務(wù)。雖然界面簡(jiǎn)單，但卻不影響它的易用性，和強(qiáng)大的編輯功能。對(duì)于初學(xué)者而言，學(xué)會(huì)使用它的基本功能例如添加圖層、邊框、陰影或文本來創(chuàng)建簡(jiǎn)單的矢量圖標(biāo)和圖像是非常容易的。

?

免費(fèi)下載

?

5. Snap.svg

?

支持：Web

?

Snap.svg 是專為現(xiàn)代瀏覽器打造，支持剪裁，遮罩，紋理，漸變，分組等功能。可以用來創(chuàng)建互動(dòng)，在任何大小的屏幕上都會(huì)很好看、與分辨率無(wú)關(guān)的矢量圖形。憑借豐富的動(dòng)畫庫(kù)和易于的事件處理，Snap.svg 可以幫助你輕松實(shí)現(xiàn) SVG 功能。

?

免費(fèi)下載

?

6. Sketch

?

支持：Mac

?

作為設(shè)計(jì)師人群中非常流行的一款設(shè)計(jì)工具，Sketch是一款為UI設(shè)計(jì)而生的工具，全矢量、輕量級(jí)、像素級(jí)精準(zhǔn)，非常適合做移動(dòng)端應(yīng)用類的界面設(shè)計(jì)和圖標(biāo)設(shè)計(jì)，甚至創(chuàng)建自己的字體。雖然收費(fèi)不低，一年99美元，但仍不失為一款值得為之付費(fèi)的強(qiáng)大工具。

?

借助于Mockplus的Sketch插件，可實(shí)現(xiàn)視覺稿快速轉(zhuǎn)換為交互式高保真原型。或者只需要將Sketch產(chǎn)出的SVG圖像通過Mockplus內(nèi)置的SVG組件，一鍵上傳，即便是做大圖背景，也不怕圖片失真啦。

?

免費(fèi)下載

?

7. Trianglify

?

支持：Web

?

現(xiàn)在有很多廣告、網(wǎng)頁(yè)或其它設(shè)計(jì)設(shè)計(jì)風(fēng)格是使用多邊形來裝飾。如果你只需要一個(gè)簡(jiǎn)單的多邊形的紋理背景，那么可以使用 Trianglify 生成器創(chuàng)建漂亮的 SVG 幾何圖案。你可以隨意/變化設(shè)置顏色，粒度大小并選擇一個(gè)顏色調(diào)色板來配合使用。所有設(shè)置結(jié)束后即可下載SVG圖案，非常方便。

?

免費(fèi)下載

?

8. Plain Pattern

?

支持：Web

?

你可以在下載之前預(yù)覽結(jié)果。在Plain Pattern的網(wǎng)站上，你能夠根據(jù)你所選擇的顏色快速地生成SVG圖形，這可能比任何手寫的形式都要快！只需要上傳你的圖片，按比例縮小或改變間隔、旋轉(zhuǎn)、重新著色等一系列操作，便可快速得到漂亮的圖案。

?

免費(fèi)下載

?

小結(jié)：

以上8款是比較常用的免費(fèi)的/付費(fèi)的SVG編輯器。如果你有更好的SVG編輯器或開源SVG工具，也歡迎推薦哦~

?

【來啦！彩蛋君】Mockplus個(gè)人版免費(fèi)贈(zèng)送福利！限時(shí)限量！

Mockplus對(duì)接iDoc了，將原型接入產(chǎn)品工作流，增加了原型標(biāo)注、評(píng)論、對(duì)比設(shè)計(jì)稿、全貌呈現(xiàn)等功能，誠(chéng)邀體驗(yàn)！贈(zèng)送Mockplus個(gè)人版！數(shù)量有限，先到先得！

專屬激活碼：Mock2019；

激活數(shù)量：限量150個(gè)；

有效期：2019年9月30日

激活地址：https://www.mockplus.cn/user/upgrade?（登錄/注冊(cè)后輸入激活碼即可）

Plus，發(fā)布Mockplus原型到iDoc，還有更多大禮等你拿！

?

轉(zhuǎn)載自：https://www.mockplus.cn/blog/post/1308

轉(zhuǎn)載于:https://www.cnblogs.com/guohu/p/11490244.html

總結(jié)

以上是生活随笔為你收集整理的8款超好用的SVG编辑工具用起来的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。