WebDesigner's Memorandumウェブデザイナーの備忘録

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

svg-grabber

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

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

svg-grabberのインストール

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

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

基本的な使い方

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

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

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

svg-grabberの起動画面

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

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

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

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

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね