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

無料のSVGビューワーの「Gapplin」でSVG画像を確認する

GapplinでSVG画像のプレビュー確認をする

FinderからSVG画像を開いてもコードとしてしか表示されなかったり、かといってベクター系のアプリケーションをわざわざ起動するのは重い……

ということで、SVGのプレビュー用にずっと使っているのが「Gapplin」です。

Gapplin

Gapplin

GapplinはmacOS用のSVG画像ビューワーアプリです。
Mac App Storeで無料でインストールできます。

GapplinでSVG画像を開く

Finderで右クリックからGapplinを選択すれば、SVG画像がプレビューされます。

Gapplinでプレビュー

アニメーションがついたSVGでもプレビューされます。

SVGZのプレビューも可能

SVGを圧縮したSVGZ(.svgz)というファイル形式のプレビューも可能です。

SVGのビューワーアプリでもSVGZには対応していない場合がありますが、Gapplinであれば問題なくプレビューできます。

白い画像を見るときはダークモードに切り替える

Gapplinはライトモードだと背景が真っ白なので、白いSVG画像をプレビューすると非常に見にくいです。

ライトモードでのプレビュー

ツールバーの中にある「ダークモード」をクリックすればダークモードに切り替わって背景が黒くなるので確認できるようになります。

ダークモードでのプレビュー

画像のエクスポート

開いたSVG画像を別のファイル形式にして書き出せます。

ビットマップデータへの書き出し

メニューバーの[ファイル]→[書き出す…]を選択して、ファイル形式を選択すれば書き出せます。

[ファイル]→[書き出す…]

形式は下記の3つです。

  • PNG
  • TIFF
  • PDF

SVGZへの変換

メニューバーの[ファイル]→[SVGZにする]を選択します。
「SVGZに変換しますか?」というモーダルが表示されるので、「OK」を選択すれば変換されます。

[ファイル]→[SVGZにする]

これでSVGの圧縮作業も簡単にできます。
SVG自体ファイルサイズはかなり軽いですが、そこからさらに軽くなるのでオススメです。

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

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

Twitterをフォロー Facebookでいいね