8款超好用的SVG編輯工具用起來

隨着響應式網頁的發展，對於內容呈現的要求也愈來愈高，尤爲是圖像。爲了在各類設備上能實現天然伸縮或擴展而不影響圖片質量，因此矢量圖形（SVG）正變得愈來愈受歡迎。

 

你們都知道，在計算機圖形學中，有兩種主要的圖像類型：矢量和位圖。位圖[bitmap]，也叫作點陣圖，柵格圖象，像素圖，簡單地說，就是最小單位由像素構成的圖，縮放會失真。矢量圖，簡單地說，就是縮放不失真的圖像格式。

 

爲何SVG更受歡迎？主要有這幾方面的緣由：

 

• SVG 是可伸縮的矢量圖形，在瀏覽器中改變尺寸，其圖形質量不會有所損失
• 相比其它位圖，SVG圖像文件更小，可壓縮性更強
• SVG 能夠被記事本等閱讀器、搜索引擎訪問
• SVG 圖像中的文本是可選的，同時也是可複製的
• SVG 圖像能夠與DOM，CSS和JavaScript交互
• SVG 能夠製做成總體或局部動畫

 

你可使用 Illustrator 或者 Inkscape 來建立 SVG 圖像。 但當進行 Web 設計時，咱們還須要作一些優化來使得 SVG 變得更加輕量。要建立和使用SVG文件，你須要一個矢量圖形編輯器。如下是摹客團隊爲你們整理的適用於Windows，Mac，Linux，Web，iOS和Android的免費或付費的SVG編輯器。

 

1. Adobe Illustrator

 

 

支持：Windows/Mac

 

Adobe Illustrator做爲全球最著名的矢量圖形軟件，以其強大的功能和體貼用戶的界面，已經佔據了全球矢量編輯軟件中的大部分份額。據不徹底統計全球有37%的設計師在使用Adobe Illustrator進行藝術設計。

 

做爲一款很是好的矢量圖形處理工具，該軟件主要應用於印刷出版、海報書籍排版、專業插畫、多媒體圖像處理和互聯網頁面的製做等，也能夠爲線稿提供較高的精度和控制，適合生產任何小型設計到大型的複雜項目。

 

免費下載

 

2. SVG.js

 

支持：Web

 

SVG.js庫爲開發人員和設計人員提供了一些功能，可讓你將多個SVG圖像拼接在一塊兒，建立出可用於視頻項目，網站需求的時髦動畫，或者只是表達你的創造力。

 

免費下載

 

3. Inkscape

 

Mockplus 買1送1 & 6.6折優惠來襲！

去看看

支持：Windows/Mac

 

Inkscape一款很是受歡迎的SVG編輯器，能夠無償使用並可用於跨平臺，是插圖畫家，設計師和網頁設計師的理想選擇。它擁有強大的對象建立和操做工具，例如鉛筆工具、畫筆工具、矩形、多邊形等。

 

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

 

免費下載

 

4. Vector

 

支持：Windows

 

Vectr是一個免費的圖形編輯器，能夠輕鬆建立矢量圖形, 幾乎能夠知足於任何矢量任務。雖然界面簡單，但卻不影響它的易用性，和強大的編輯功能。對於初學者而言，學會使用它的基本功能例如添加圖層、邊框、陰影或文原本建立簡單的矢量圖標和圖像是很是容易的。

 

免費下載

 

5. Snap.svg

 

支持：Web

 

Snap.svg 是專爲現代瀏覽器打造，支持剪裁，遮罩，紋理，漸變，分組等功能。能夠用來建立互動，在任何大小的屏幕上都會很好看、與分辨率無關的矢量圖形。憑藉豐富的動畫庫和易於的事件處理，Snap.svg 能夠幫助你輕鬆實現 SVG 功能。

 

免費下載

 

6. Sketch

 

支持：Mac

 

做爲設計師人羣中很是流行的一款設計工具，Sketch是一款爲UI設計而生的工具，全矢量、輕量級、像素級精準，很是適合作移動端應用類的界面設計和圖標設計，甚至建立本身的字體。雖然收費不低，一年99美圓，但仍不失爲一款值得爲之付費的強大工具。

 

藉助於Mockplus的Sketch插件，可實現視覺稿快速轉換爲交互式高保真原型。或者只須要將Sketch產出的SVG圖像經過Mockplus內置的SVG組件，一鍵上傳，即使是作大圖背景，也不怕圖片失真啦。

 

免費下載

 

7. Trianglify

 

支持：Web

 

如今有不少廣告、網頁或其它設計設計風格是使用多邊形來裝飾。若是你只須要一個簡單的多邊形的紋理背景，那麼可使用 Trianglify 生成器建立漂亮的 SVG 幾何圖案。你能夠隨意/變化設置顏色，粒度大小並選擇一個顏色調色板來配合使用。全部設置結束後便可下載SVG圖案，很是方便。

 

免費下載

 

8. Plain Pattern

 

支持：Web

 

你能夠在下載以前預覽結果。在Plain Pattern的網站上，你可以根據你所選擇的顏色快速地生成SVG圖形，這可能比任何手寫的形式都要快！只須要上傳你的圖片，按比例縮小或改變間隔、旋轉、從新着色等一系列操做，即可快速獲得漂亮的圖案。

 

免費下載

 

小結：

以上8款是比較經常使用的免費的/付費的SVG編輯器。若是你有更好的SVG編輯器或開源SVG工具，也歡迎推薦哦~

 

【來啦！彩蛋君】Mockplus我的版免費贈送福利！限時限量！

Mockplus對接iDoc了，將原型接入產品工做流，增長了原型標註、評論、對比設計稿、全貌呈現等功能，誠邀體驗！贈送Mockplus我的版！數量有限，先到先得！

專屬激活碼：Mock2019；

激活數量：限量150個；

有效期：2019年9月30日

激活地址：https://www.mockplus.cn/user/upgrade （登陸/註冊後輸入激活碼便可）

Plus，發佈Mockplus原型到iDoc，還有更多大禮等你拿！

 

轉載自：https://www.mockplus.cn/blog/post/1308