サイト上のSVG画像を簡単に保存できるChrome拡張機能「svg-grabber」

最近ロゴやアイコンであれば、SVGにするのが主流になってきました。
ただ、SVG画像は他の画像に比べて画像の保存が面倒です。

今回はそんなSVG画像を簡単に保存するためのChrome拡張機能「svg-grabber」の紹介です。

svg-grabberのインストール

svg-grabberのインストールはChromeウェブストアからインストールできます。

chrome.google.com

svg-grabber - get all the svg's from a site

https://chrome.google.com/webstore/detail/svg-grabber-get-all-the-s/ndakggdliegnegeclmfgodmgemdokdmg

A tool to quickly preview and get all the svg assets from a website.

基本的な使い方

使い方は簡単で、ダウンロードしたいSVGがあるサイトでsvg-grabberのアイコンをクリックします。

すると、サイト上にあるSVG画像を一覧にしたダウンロード用のページが開きます。

「Download all SVGs」をクリックすると全てのSVGがダウンロードされ、それぞれの画像の下にある「Copy」を押すと<svg>タグがコピー、「Download」を押すとSVGファイルをダウンロードできます。

また、SVGをコピーした後はデザインツールなどにペーストすると、SVGデータとしてペーストできるので便利です。

CSSの背景イメージは未対応

CSSのbackground-imageで背景画像として読み込まれているものに関しては未対応のようです。

あくまでも<svg>タグまたは<img>タグで指定された画像が一覧になって取得できます。