更新日:
【お役立ち情報】 多機能なMac用SVGビューア「Gapplin」導入と使い方
「Gapplin」は無料で利用できるMac用SVGビューアです。SVG画像を見ながらテキストエディタなどを使って編集できるので、Webデザイナーやエンジニアはインストールしておきたいアプリの一つです。
近年、Webサイトやアプリなどに用いられる企業ロゴなどに、SVG画像が使われるケースが増えてきました。一方で、SVG画像は非常に便利な画像形式ですが、PNGやJPG等と違ってFinderから画像を見ることができず困ることがあります。
そんな悩みを解決するために、今回は「Gapplin」という無料で利用できるMac用SVGビューアを紹介します。このアプリを使えばSVG画像を直接閲覧できるようになるだけでなく、ビジュアルを確認しながらの編集も可能になります。
Webデザイナーやエンジニアは、本記事を参考にして早速インストールしてみましょう。
Gapplinのインストール方法
それでは以下に、Gapplinのインストール方法を解説します。
1.「App Store」を起動する
Docから「App Store」のアイコンをクリックして起動する
2. Gapplin を検索する
「App Store」の検索欄でGapplinを検索する
3. Gapplin をインストール
Gapplinが検索で出てきたら「入手」ボタンをクリック
4. Gapplin を起動する
インストールが終わると「入手」ボタンが「開く」ボタンに変わるので、「開く」ボタンをクリックする。
- 「App Store」を起動する
- Gapplin を検索する
- Gapplin をインストール
- Gapplin を起動する
なぜSVGビューワーが必要なのか
「Gapplin」の使い方を説明する前に、SVGファイルの特性についておさらいし、なぜSVGビューワーが必要なのか理解しておきましょう。
ベクトル画像（ベクター画像）とビットマップ画像（ラスター画像）の違いとは？
コンピューターグラフィックスで扱われる画像には、ベクトル画像（ベクター画像）とビットマップ画像（ラスター画像）の2種類に分類されます。
- ベクトル画像（SVG、PDFなど）……文字コードだけに載っているテキストデータだけによって書かれたテキストファイル
- ビットマップ画像（JPG、PNGなど）……テキストファイル以外の全てのデータのことを指すバイナリファイル
1のテキストファイル（ベクトル画像）は、2のバイナリファイル（ビットマップ画像）よりもデータサイズが小さいので、処理を高速化できるのです。
SVGとは、Scalable Vector Graphics（スケーラブル・ベクター・グラフィックス）の略で、この画像もベクトル画像（ベクター・グラフィックス）になります。スケーラブルとは、拡張性があるという意味で、画像を拡大してもシャギー（ギザギザに見える）が発生しないベクトル画像の特性を現しています。
以下の画像は、ビットマップ画像（JPG）とベクトル画像（SVG）を比較した画像です。
上の画像でもわかるように、SVGファイルではシャギーのような画像の劣化は発生していません。さらにテキストファイルであるSVGは、バイナリファイルであるJPGよりもデータサイズが小さいので、Webやアプリの表示を高速化できるのです。
以下は、ベクトル画像とビットマップ画像の特性を比較する表です。
| ビットマップ画像（ラスター画像） | ベクトル画像（ベクター画像） | |
|---|---|---|
| 説明 | 色のついたドット（点）の羅列や集合で表現された画像データ | ベクトルという数式で定義された点、線、 多角形などの情報を使った複雑な計算式によって 色や曲線などを表現した画像データ |
| メリット | 色のついた小さな点によって画像が構成されているので、 写真などの複雑な画像の表示に最適 |
数値を使って絵を描くので、拡大縮小による画像の劣化がない。 また、テキストファイルなのでデータサイズが軽い |
| デメリット | 拡大するとシャギーが発生し画質が落ちる | 数式で表現されているので、複雑な画像データには適していない |
| 特性に合った用途 | 写真、複雑な図形やイラスト | 単純な図形やイラストをロゴデータ |
| 主な画像形式 | BMP、GIF、JPEG、PNG、TIFFなど | EPS、PDF、SVGなど |
SVGビューワーの必要性とは？
前述のようSVGは文字コードだけが載っているテキストデータで書かれたテキストファイルなので、画像であると同時にコードでもあります。
SVGのコードは、XMLというHTMLのもととなったマークアップ言語で書かれています。PikawakaのロゴもSVGデータですが、以下のようなコードで書かれています。
1
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 942.48 169"><defs><style>.cls-1{fill:#e8b615;}.cls-2{fill:#1551e8;}</style></defs><title>logo</title><g id="レイヤー_2" data-name="レイヤー 2"><g id="logo_color"><g id="logo"><path class="cls-1" d="M12.43,128.76,6,135.16h0a19.79,19.79,0,1,0,28,28h0l6.42-6.42A85,85,0,0,1,12.43,128.76Z"/><path class="cls-1" d="M49,7.71c-21.24,9.23-36.15,28.94-42,43-11.85,28.6-7.92,56.44,5.37,78.07l16.15-16.14A19.25,19.25,0,0,0,33.74,94.8c-2.29-10.86-1-23,4.88-35.2A44.79,44.79,0,0,1,60.08,38.39c46.84-21.83,92.42,23.71,70.66,70.55a44.77,44.77,0,0,1-21.15,21.47c-12.19,5.87-24.31,7.28-35.14,5a19.46,19.46,0,0,0-17.91,5.29L40.46,156.74a86.7,86.7,0,0,0,78.34,5.31c15-6.45,34.34-22.57,42.75-42.27C192.5,47.36,121.81-23.92,49,7.71Z"/><path class="cls-2" d="M270.31,26,242,26c-19.8,0-31.89,16.55-31.89,31.79v84.93a2.9,2.9,0,0,0,2.89,2.89h18.93a2.89,2.89,0,0,0,2.89-2.89V57.84a7.14,7.14,0,0,1,7.14-7.13H270.5a7.21,7.21,0,0,1,7.21,7.21v27.2a7.24,7.24,0,0,1-7.24,7.24H248.33a2.94,2.94,0,0,0-2.94,2.94v18.86a2.94,2.94,0,0,0,2.94,2.93H270.5a32,32,0,0,0,31.94-31.94v-27A32.13,32.13,0,0,0,270.31,26Z"/><path class="cls-2" d="M322.59,65.57h18.85a2.91,2.91,0,0,1,2.91,2.91v74.37a2.8,2.8,0,0,1-2.8,2.8H322.48a2.8,2.8,0,0,1-2.8-2.8V68.48A2.91,2.91,0,0,1,322.59,65.57Z"/><path class="cls-2" d="M436.81,127.87l-23.14-23.14L435,83.43a2.91,2.91,0,0,0,0-4.12L421.64,66a2.91,2.91,0,0,0-4.12,0l-27.8,27.8V28.9A2.91,2.91,0,0,0,386.81,26H368a2.91,2.91,0,0,0-2.91,2.91v114a2.8,2.8,0,0,0,2.8,2.8h19.07a2.8,2.8,0,0,0,2.8-2.8V128.67l6.5-6.5,23.15,23.15a2.91,2.91,0,0,0,4.12,0L436.81,132A2.91,2.91,0,0,0,436.81,127.87Z"/><circle class="cls-2" cx="332.02" cy="39.6" r="13.62"/><path class="cls-2" d="M660.2,72.13l-17.5-6.38a3,3,0,0,0-3.88,1.81L626.64,101,614.47,67.57a3,3,0,0,0-2.79-2H596.41a3,3,0,0,0-2.85,2L581.38,101,569.19,67.54a3,3,0,0,0-3.87-1.81L547.81,72.1A3,3,0,0,0,546,76l24.66,67.76a2.89,2.89,0,0,0,2.76,1.9v0h15.89a2.9,2.9,0,0,0,2.77-1.91L604,111l11.92,32.75a2.89,2.89,0,0,0,2.77,1.9v0h15.94a2.89,2.89,0,0,0,2.71-1.91L662,76A3,3,0,0,0,660.2,72.13Z"/><path class="cls-2" d="M531.25,65.54H512.62a3,3,0,0,0-3,3v3.88a31.82,31.82,0,0,0-19.8-6.87H477.68a32,32,0,0,0-32,32v16a32,32,0,0,0,32,32h12.11a31.83,31.83,0,0,0,19.8-6.88v4.05a2.91,2.91,0,0,0,2.92,2.91h18.85a2.91,2.91,0,0,0,2.91-2.91V68.57A3,3,0,0,0,531.25,65.54ZM499,119a2.88,2.88,0,0,1-2.88,2.88H472.31a2.88,2.88,0,0,1-2.87-2.88V92.11a2.87,2.87,0,0,1,2.87-2.87h23.84A2.87,2.87,0,0,1,499,92.11Z"/><path class="cls-2" d="M753.94,65.54H735.31a3,3,0,0,0-3,3v3.88a31.87,31.87,0,0,0-19.81-6.87H700.37a32,32,0,0,0-32,32v16a32,32,0,0,0,32,32h12.11a31.88,31.88,0,0,0,19.81-6.88v4.05a2.91,2.91,0,0,0,2.91,2.91h18.85a2.91,2.91,0,0,0,2.91-2.91V68.57A3,3,0,0,0,753.94,65.54ZM721.72,119a2.88,2.88,0,0,1-2.87,2.88H695a2.88,2.88,0,0,1-2.88-2.88V92.11A2.87,2.87,0,0,1,695,89.24h23.84a2.87,2.87,0,0,1,2.87,2.87Z"/><path class="cls-2" d="M939.46,65.54H920.83a3,3,0,0,0-3,3v3.88A31.85,31.85,0,0,0,898,65.58H885.9a32,32,0,0,0-32,32v16a32,32,0,0,0,32,32H898a31.86,31.86,0,0,0,19.81-6.88v4.05a2.91,2.91,0,0,0,2.91,2.91h18.85a2.91,2.91,0,0,0,2.91-2.91V68.57A3,3,0,0,0,939.46,65.54ZM907.25,119a2.88,2.88,0,0,1-2.88,2.88H880.53a2.88,2.88,0,0,1-2.88-2.88V92.11a2.87,2.87,0,0,1,2.88-2.87h23.84a2.87,2.87,0,0,1,2.88,2.87Z"/><path class="cls-2" d="M844.33,127.87l-23.15-23.14,21.3-21.3a2.91,2.91,0,0,0,0-4.12L829.16,66A2.91,2.91,0,0,0,825,66l-27.8,27.8V28.9A2.91,2.91,0,0,0,794.33,26H775.48a2.91,2.91,0,0,0-2.92,2.91v114a2.8,2.8,0,0,0,2.81,2.8h19.07a2.8,2.8,0,0,0,2.8-2.8V128.67l6.49-6.5,23.15,23.15a2.91,2.91,0,0,0,4.12,0L844.33,132A2.91,2.91,0,0,0,844.33,127.87Z"/></g></g></g></svg>
このように大変便利な画像形式であるSVGですが、冒頭で述べように、直接データをクリックするとテキストデータとしてファイルが開かれることが下の動画を見るとわかると思います。
画像データとして開くためには、htmlに埋め込みブラウザで読み込む必要があり、かなり手間がかかります。また、Adobe Illustratorで開くことも可能ですが、有料サービスである同アプリを導入していない人も多いかと思います。そこで、GapplinのようなSVGを画像データとして開くことができる無料のSVGビューアをインストールしておくと大変便利なのです。
Gapplinの基本的な使い方
次にGapplinの基本的な使い方を紹介します。
画像を閲覧する
Gapplinは起動してもメニューが表示されるだけで、ウィンドウは開きません。ウィンドウを開く場合は、メニューの「ファイル」から「開く」を選択するか、開きたい画像をGapplinのアイコンにドラック＆ドロップします。それぞれ動画で確認してみましょう。
1.メニューの「ファイル」から「開く」を選択して開く
Gapplinは起動したら、メニューから「ファイル」＞「開く」を選択し、開きたい画像を選ぶと、画像が閲覧できます。
2.画像を選択してDOCのGapplinのアイコンにドラック＆ドロップ
DOCにあるGapplinのアイコンに、開きたい画像をドラック＆ドロップすると画像が閲覧できます。
画像を編集する
Gapplinは画像を閲覧するだけでなく編集することも可能です。指定したテキストエディタでSVGファイルを開くことができます。エディタの中でも、開発者が同じなのでCotEditorと特に相性が良いです。
下は画像のビジュアルを確認しながら編集をしている動画です。PikawakaのロゴのSVGソースコードの一部をテキストエディタを適当に編集してみたのですが、黄色の電球マークのモチーフの口金部分が消えたのがわかると思います。
テキストエディタだけでコードの編集をして、あとでSVGの画像を確認するといった作業は、コードに詳しいエンジニアやWebデザイナーであっても面倒ですよね。Gapplinを使えば編集作業を即座に確認できるので作業効率も格段に高まります。
macOSですべてのsvgファイルをGapplinで開く設定
すべてのsvgファイルをGapplinで開くように設定しておくと便利なので以下に方法を解説します。
1.任意のSVGファイルを選択してメニューを開く
任意のSVGファイルを選択し、controlキーを押しながらクリック（もしくは右クリック）します。メニューが表示されるので「情報を見る」を選択します。
2.「このアプリケーションで開く」の設定を行う
ファイル情報が表示されるので、「このアプリケーションで開く」というメニューから、Gapplin.appを選択します。
3.すべてのSVGファイルをGapplinで開く設定を行う
Gapplin.appを選択したら、その下にある「すべてを変更...」というボタンをクリックします。
4.「続ける」をクリックして設定完了
「すべてを変更...」をクリックすると「同じ種類の書類はすべてアプリケーション"Gapplin.app"で開くように変更してもよろしいですか？」と表示されたモーダルウィンドウが開くので、「続ける」をボタンをクリックします。これで設定完了です。
- 任意のSVGファイルを選択してメニューを開く
- 「このアプリケーションで開く」の設定を行う
- すべてのSVGファイルをGapplinで開く設定を行う
- 「続ける」をクリックして設定完了
Gapplinのその他の機能や特徴
Gapplinはシンプルなビューワですが、数多くの機能を搭載しています。その他の機能や特徴についても簡単に紹介します。
QuickLookで閲覧可能になる
Gapplinをインストールすると、Mac OSに搭載されているアプリケーションを介さずデータをプレビューすることができるQuickLookという機能でも、コードではなくビジュアルとして表示されるようになります。下の動画のように、目のマークのアイコンをクリックするとQuickLookでプレビューができます。
アニメーションSVGをプレビューできる
Gapplinでは、下の動画のようにアニメーションSVGをプレビューすることもできます。
SVGZデータにも対応している
SVGZファイルとは、SVGの容量を50%〜80%圧縮したファイル形式です。SVG自体が軽いデータですが、SVGZはさらに画像のデータサイズを軽くしたい場合に用いられることが多いです。SVGビューアであっても、SVGZに対応してないアプリもあります。GapplinはSVGZファイルをプレビューしたり、SVGファイルをSVGZに変換して保存することが可能です。
1.メニューから「SVGZにする」を選択
任意のSVGファイルを開いた状態で、メニューの「ファイル」から「SVGZにする」を選択します。
2.「OK」をクリックしてSVGZに変換
「SVGZにする」を選択すると、「SVGZに変換しますか？」と書かれたモーダルウィンドウが開きますので「OK」をクリックします。
3.圧縮されたデータサイズを確認
SVGZになった画像を、Commandキーを押しながらクリック（もしくは右クリック）して「情報を見る」を選択してみましょう。データがサイズダウンしたことがわかります。
- メニューから「SVGZにする」を選択
- 「OK」をクリックしてSVGZに変換
- 圧縮されたデータサイズを確認
PNG・TIFF・PDFへの書き出しができる
Gapplinは、PNG・TIFF・PDFの３つのファイル形式へ書き出しすることが可能です。
1.「ファイル」から「書き出す...」 を選択
メニューバーの「ファイル」から「書き出す...」 を選択します。
2.ファイル形式を選択して保存
書き出し名を入力するモーダルウィンドウが表示されます。このウィンドウで書き出すファイル形式を選択できます。書き出したいファイル形式を選んだら保存をクリックすると書き出しが完了します。
ダークモードにも対応
Gapplinはダークモードにも対応しています。近年、様々なOSや端末でダークモード機能が搭載されています。ファイルを表示するウィンドウに「ダークモード」というアイコンがあるので、これをクリックするとダークモードとライトモードを切り替えることができます。
下はpikawakaの白いロゴを開いたときの動画です。白いロゴをは背景が白いと見えづらいので、このようにワンクリックでダークモード表示に切り替えられるのは便利ですね。
上記に紹介した以外にも、Mac OSに標準搭載されているワークフロー構築ソフトウェアのAutomatorやAppleScriptを用いて複数のSVG画像を自動編集することも可能です。また、3DCGやアニメーション制作などで重要になってくるレンダリングエンジンであるWebKitに対応しているなど、便利な機能が備わっています。
今後も、モバイル端末でサイトを高速表示することがますますSEOで重要視されてくると思いますので、SVG形式の画像ファイルの需要はさらに高まっていくでしょう。そんな状況の中で、直接画像として閲覧できないのはイライラの元になります。プログラミングやWebデザインでも取り扱う機会が増えていますので、Gapplinをインストールして作業効率をアップしておきましょう！
この記事のまとめ
- 「Gapplin」無料で利用できるMac用SVGビューア
- 操作も簡単でSVGを見ながら編集も可能
- アニメーションSVGやSVGZもプレビュー可能で、PNG・TIFF・PDFの３つのファイル形式へ書き出しにも対応しているなど多機能なSVGビューアである
