近年、Webサイトがレスポンシブに対応することが求めらることで、拡大・縮小に強いSVG形式である画像データの需要が高まってきました。無料のアイコン素材サイトなどでダウンロードするときに、PNGやJPEGに並んで「SVG」というデータ形式を目にしたこともあるかと思います。
今回は画像編集のフリーソフトGIMPでSVG画像を扱ってみました。超初心者なので、本当に触りの部分だけになりますが、なにかのお役に立てればと思います。
SVGとは？
SVGとはScalable Vector Graphicsの略で、画像のデータ形式のひとつです。データ形式といえば、PNG、JPEG、GIF、BMPなどはパソコンをある程度使っている人なら一度は見たことがあると思います。
このPNG、JPEG、GIF、BMPは「ラスタ画像」というフォーマットになります。これに対して、SVGは「ベクタ画像」と呼ばれます。なにが違うのでしょうか。
試しになにか画像を開いてみてください。できるだけシンプルなイラストがよいかと思います。こちらは有名ないらすとやさんからお借りしてきた三遊亭圓朝さんの似顔絵です。
こちらのPNGをGIMPで読み込み、耳の部分を拡大したものが下になります。
なんだかギザギザしてますよね。
今度はicooon-monoさんからピザのSVGアイコンをお借りします。
これをInkscapeで開き、比較のために少し丸まったところを拡大してみます。
ギザギザしていないですよね。これがSVG画像が拡大や縮小に強いということです。
SVGはアンカーと呼ばれる点の座標と、それを結ぶ線などの数値データで画像を記録しています。ベクトルですね。これをXMLという言語で記述します。乱暴な言い方をすればHMTLの親戚です。テキストエディタなどでSVGを開いてみるとわかると思います。
SVGは画像が拡大されると、拡大部分が数値データで再計算されるため、輪郭がぼやけずにきれいに表示されるわけです。幾何学的な模様や図形の描画が得意なことから、ロゴデザインやアイコンの作成などに向いています。企業ロゴなどはあらゆる印刷物に拡大・縮小されることが多いため、大きさによって画像が劣化しないことを求められるからです。
GIMPとInkscapeの関係は、AdobeさんのPhotoshopとIllustratorの関係とよく比較されます。
- Photoshop→GIMP
- Illustrator→Inkscape
こうですね。
そこでよく話題になるのが「じゃあ、GIMPとInkscapeはどちらがいいの？」という疑問ですが、これは適材適所で使い分けるべきだといえます。
先ほどPNGをGIMPで拡大表示しましたが、ラスタ画像は格子状のドットの集合として画像を表現します。このドットのひとつずつに色彩や透明度などの情報が記録されており、これが多彩な表現を可能にしています。写真やグラデーションを多用する手描きのイラストなどにはラスタ画像が向いているわけです。
例えば、下の本の表紙のようなイラストを描きたいと思ったら、ラスタ画像を扱うアプリケーションを選んでおいたほうが無難でしょう。
じゃあ、GIMPでSVGを使わなくていいじゃん
と、思われるかもしれません。一般的に、WebサイトのデザインはPhotoshopで作成し、これを後からHTMLに置き換えることが多いように思います。これをAdobeさんへのお布施をケチってGIMPでやろうとすると、SVGをGIMPで扱わなければならなくなるかもしれません。
方法はふたつありまして、画像として読み込む方法とパスとして読み込む方法です。画像として読み込んでしまうと、大きさを変更しても画質が劣化しないというメリットを捨てることになりますので、パスとして読み込んだほうがいいかもしれません。
単純にドラッグ＆ドロップ
ただデザインのアクセントとして使いたいなら、この方法が一番簡単です。ダウンロードしたSVGをキャンバスにドラッグ＆ドロップするだけです。
ダイアログが表示されるので、好きな大きさを指定してください。
私の使い方が悪いのでしょうが、「パスをインポートする」と「インポートしたパスを結合」にチェックを入れても変化がありませんでした。入れなくても使えます。なにかわかったら追記します。
読み込まれたSVGは新しいレイヤーになりますので、編集の際には注意してください。色を変えたければ、塗りつぶしツールを使って線画をクリックします。
あとは普通の画像のように扱うだけです。
パスとして読み込む
メニューから「ドッキング可能なダイアログ」→「パス」でダイアログを出しておいたほうが作業が捗ると思います。
パスダイアログ上で右クリックをし、「パスをインポート」を選択。目的のSVGを選んでください。
パーツがバラバラに読み込まれたと思います。
このままでは使いづらいのでパスを統合します。読み込まれた段階ではパスが不可視になっていると思うので、目ん玉マークをクリックして視えるようにしておきます。
真っ白いキャンバスにパスが表示されたと思います。パスダイアログで右クリックし、「可視パスの結合」をクリック。
ひとつになったでしょうか。
あとは「パスを選択範囲に」をクリックして、
塗りつぶしツールで着色したりすればよいです。
パスとして読み込んでいますので、形状を変化させたりもできます。パスツールを選択してから、試しにどこでもよいので描画されている線を一本クリックしてください。設定されているアンカーが表示されるはずです。
あとはアンカーを移動させたり、新たにパスを追加するなどして形状の編集を行ってください。
GIMPで読み込めないSVGに注意
ダウンロードしたSVGをGIMPで読み込もうとすると、表示が崩れてぐちゃぐちゃになってしまうことがあります。原因はGIMPがSVGの仕様に対応しきれていないことなのですが、これについてまとめましたので、あわせて参考にしてください。
Comment