網頁設計, 網頁資源, 雲端工具

Iconfinder Icon Editor 免費線上SVG向量檔編輯器

梅干2017/09/28
梅問題-Iconfinder Icon Editor 免費線上SVG向量檔編輯工具
  隨著現在網頁支援的圖檔格式愈來愈多,已不再像早期只限點陣檔,像是Gif、Jpg、PNG....,現在已支援向量格式,而向量則以SVG檔為主,由於向量檔最大的好處就在於,即便任何的設定影像的尺寸,都不會造成影像失真,這對於現在裝置愈來愈元來說,是一個相當不錯的選擇,就不用儲存一堆的格式作切換,再加上向量檔本身也會比點陣來的小許多,甚至還可以將SVG向量檔,轉成IconFont的格式,就可以透過CSS的語法來改變圖示的顏色,相當的方便。
  但要如何產生SVG檔,其實早在好幾年前,Adobe Illustrator就已內建了SVG的檔格式,當在Adobe Illustator繪製好的檔案,就能直接輸出成SVG檔,並用於網頁上,但除了Adobe Illustrator可繪製SVG檔外,現在可透過Iconfinder這免費圖示的資源平台,推出一款SVG線上編輯器Iconfinder Icon Editor,不但不用安裝任何的擴充元件,打開瀏覽器立即就可使用,甚至還可以將繪製好的向量檔,儲存成SVG或是PNG檔,雖然Iconfinder Icon Editor的功能不及Illustrator來的強大,但只要繪製一些簡易的LOGO,絕對是措措有餘的。
Iconfinder Icon Editor
網站名稱:Iconfinder Icon Editor
網站連結:https://www.iconfinder.com

Step1
開啟瀏覽器,進入Iconfinder Icon Editor後,這就是Iconfinder Icon Editor操作界面,相當的簡易單純好上手,所有的編輯工具,都集中在左手邊,右手邊則會隨著工具,而切換不同的設定面板。
梅問題-Iconfinder Icon Editor 免費線上SVG向量檔編輯器
Step2
當畫了一個圓形,若只需線框就好,可雙響前景色。
梅問題-Iconfinder Icon Editor 免費線上SVG向量檔編輯器
Step3
分別將上方的V與A值都設0,就會變透明。
梅問題-Iconfinder Icon Editor 免費線上SVG向量檔編輯器
Step4
就這樣可以產生出多個圓形框,當全選後,可從右手邊選擇對齊。
梅問題-Iconfinder Icon Editor 免費線上SVG向量檔編輯器
Step5
在對齊的部分,目前只有元件對齊,期待日後有元件與元件間的對齊就更加方便,當都繪製好後,點右上的「Downlaod」鈕,就可選擇要下載的格式。
梅問題-Iconfinder Icon Editor 免費線上SVG向量檔編輯器
Step6
這樣就可以將剛所繪製的檔案給下載回來啦!
梅問題-Iconfinder Icon Editor 免費線上SVG向量檔編輯器
Step7
而Iconfinder Icon Editor也可開啟舊檔,但只限SVG格式檔。
梅問題-Iconfinder Icon Editor 免費線上SVG向量檔編輯器
Step8
當開啟後,雙響區塊,就會出現控制節點,就可再手動進行調整了。雖然Iconfinder Icon Editor沒有複雜的功能,但相當的好手,大幅的降低學習的門檻喔!
梅問題-Iconfinder Icon Editor 免費線上SVG向量檔編輯器

UAG軍規iPhone防摔殼