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