網頁製作工具 SVGSUS | SVG 管理轉換一次搞定 | 三大核心功能解析

現在網頁製作向量格式 SVG 已經被各大瀏覽器支援,網頁製作設計使用 SVG 需求也是愈來愈大,除外,在許多動畫製作上更是便利。

近日在網路上發現一套新的 SVG 管理工具 SVGSUS,界面相當簡潔乾淨的一款網頁設計管理工具,那就讓我們一起來看看,它有哪些好用的功能吧!

文章內容 :

  1. 三大 SVGSUS 不能錯過的核心功能
  2. 實務運用 — icomoon io (video)
  3. 特別整理多種 SVG icon 資源連結

Video by CodeBasic

網頁製作使用 SVGSUS 不能錯過的 3 大核心功能 :

1 . SVG 管理

我相信很多人都曾經對管理各式素材感到無力,各式素材往往到最後都是分散在各處,需要使用時,又得再花一翻功夫來尋找,既費時又煩人。

資料夾管理

SVGSUS 的資料夾管理,很輕鬆的幫你實現管理分散在電腦各處的檔案,只要將資料夾統一整理到 SVG 管理資料夾裡,再用資料夾去分門別類(中文也能通),看到這你可能會說,啊又沒有少了什麼步驟,你是對的。

資料夾做有邏輯的整理,是管理的基本功。

再用 SVGSUS app 來管理很方便的是,資料建立時它除了可以自帶資料夾名稱外,還可以使用虛擬的分類命名,沒有強制和資料夾名稱綁定,我覺的這點是很好的一個設計(-.-! 咦,這很基本嗎?….)。

虛擬的分類命名,可與資料夾不同命名

2. SVG => CODE 快速轉換

全部通通只要透過拖拉和快速鍵複製貼上,就能在瞬間將 SVG path 轉換成各式規格的 SVG CODE。

支援的程式碼格式

支援的程式碼格式有 : IOS and OS X 、Android、樣版語言 (Jade template)、原始(General)

使用方式,你可以 :

  • 拖拉 icon 至程式編輯器
  • 點擊(click) icon 其實已經複製好程式碼了,只要貼上到你的程式編輯器即可。
拖拉 icon 至程式編輯器

那麼有建議使用哪個方法嗎? 沒有,這就取決於你的個人喜好啦,那如果非常要求速度的情況下,會建議使用第二種方法,那可以省下你非常多的時間。

點擊(click) 複製,直接貼上

3. tags 加快尋找 icon 速度

在每一個 svg icon 上都可以依自已的口語習慣自訂多個標籤(tags),當你下次在設計做稿的時後,只要依你的關鍵字下去搜尋,該分類下的 svg icon 只要名稱或標籤(tags)符合,就能很快的全被挑選出來。

自訂標籤(tags)

實務運用 — icomoon io

Video by CodeBasic


Like what you read? Give Kerwin a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.