SVG Crowbar Cover

看到別人的網頁視覺化作品感到賞心悅目想要珍藏收集、或是帶回家改一改拿來自用嗎?紐約時報開發的「SVG Crowbar」套件幫你一鍵打包 SVG 製作的視覺化作品,存檔之後要殺要剮隨便你!一起來看看如何使用吧!

2015 年的今天,很多的線上視覺化都使用 SVG 來製作,就連強大的視覺化函式庫 D3.js 也與 SVG 有相當緊密的結合。而 SVG 其實是可以單獨儲存、並由 Adobe Illustrator 或 Inkscape 等軟體再進行編輯的,這代表我們很有機會將其它人偉大作品的 SVG 檔修改後應用在需要的地方 ( 當然,要注意著作權阿! ) ,可是這裡面臨到了一個問題:

 

「網頁裡的 SVG 要怎麼截取下來阿?」

 

事實上要拿到網頁中的 SVG 並不難,但步驟有點瑣碎、也需要一點網頁格式的知識才能做到。不用煩惱,這裡剛好有一個有趣的套件 —「SVG Crowbar」,讓我們滑鼠點一下,SVG 檔案就下載好到我們的電腦裡。

紐約時報以「Bookmarklet」的方式製作這個 SVG Crowbar ,簡單的說就是把套件放在書籤列中,點擊書籤便能執行套件。我們需要做的只有幾件事:

  1. 使用 Google Chrome 瀏覽器連上 SVG Crowbar 網站 — http://nytimes.github.io/svg-crowbar/
  2. 將 SVG Crowbar 按鈕拖放到書籤列上
  3. 開啟我們想要截取的視覺化網頁
  4. 點擊剛剛放好的 SVG Crowbar 書籤按鈕
  5. 下載 SVG。 Happy!

 

§ 將「SVG Crowbar」拖到書籤列上

Install SVG Crowbar

 

§  開啟想要的視覺化,並點擊剛剛新增的書籤:

Distorted Taiwan SVG

點擊後便會開始下載。

§ 利用 Adobe Illustrator 開啟剛剛下載的 SVG 檔:

Open in Illustrator

 

真的有這麼好嗎?

SVG 雖然方便,不過還是有一些限制:

  • 只支援 Google Chrome
  • 為了避免搞掛 Illustrator,Crowbar 會略過某些樣式設定
  • 如果 SVG 的樣式設定與網頁中的其他元素有關,也會造成一些問題

同時 Crowbar 第一版本有一些截取上的問題,使用 Crowbar  2 可以改善,但執行速度比較慢。

這篇文章的封面圖片即是使用 Crowbar 截取兩個 SVG 後組合而成,其中一個是上例的台灣地圖 ,另一個則是 D3.js 的弦圖範例。看到這邊,你是否已經想到要怎麼使用這個工具了呢?趕快去玩玩看吧!

Taiwan with Chord Diagram

Written by infographics.tw

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *