Webサイトがレスポンシブに対応することを求められたことで、拡大や縮小しても画質が劣化しないデータ形式であるSVGが活用されるようになりました。
ロゴやアイコンで使われるだけでなく、PhotoshopでWebサイトのデザインをする際にも活用されていますが、私のようにAdobeさんへのお布施をケチってGIMPでやっちまおうとすると、読み込めないSVGがあったりして戸惑うわけです。
SVGのフォーマットとは？
SVGがどのようなデータ形式になっているかはテキストエディタなどで開いてみるとわかります。ファイルによっては改行を削除、データを圧縮していて読みにくいものもあるので注意してください。
基本的な書き方は次のような感じです。
1 2 3 | <svg width="200" height="200" viewBox="0 0 200 200"> <path d="M 33,92 L 201,155" stroke="#1cbac8" stroke-width="5"/> </svg> |
path要素のd属性にある「M」はmovetoコマンド、「L」はlinetoコマンドです。Mは始点、Lは終点を表しており、座標（33, 92）から（201, 155）に直線を引いたベクトルを意味します。
SVGにはほかにもベジェ曲線をはじめとする様々なコマンドが用意されており、これらを使って表現することで拡大されてもギザギザしない画像を実現しているわけですね。
読めないSVGってどんなもの？
試しにこちらのサイトからSVGをダウンロードしてGIMPに読ませてみてください。海外の有名なアイコン素材サイトさんです。
ダウンロードしたアイコンをGIMPのキャンバスの上にドラッグ＆ドロップしてください。プレビューを見ていただくと、表示が崩れているのがわかります。
なんでうまく読み込めないの？
原因はSVGの仕様にGIMPが対応しきれていないことにあります。先ほどのpath要素のd属性を思い出してください。
1 | <path d="M 33,92 L 201,155"/> |
座標の数値がカンマで区切られていますが、これは空白、タブ、または改行で区切ってもよいとされています。
1 2 3 4 5 | <!-- 空白で区切る --> <path d="M 33 92 L 201 155"/> <!-- タブで区切る --> <path d="M 33 92 L 201 155"/> |
さらにMやLのように数値の前後にコマンドがある場合、区切りも省略することもできます。
1 | <path d="M33 92L201 155"/> |
加えて、Y座標の数値がマイナスだった場合にも区切りを省略することができます。
1 | <path d="M33-92L201 155"/> |
これはベクトルを表現する座標において、数値の後ろ側にマイナス記号が付くことはないためです。
なぜこのような構文を採用しているのかというと、SVGはネット上でデータをやり取りすることを想定しているため、できるだけデータを軽くしたいからです。
HTMLやCSSでもタブや改行を削除してデータを圧縮しますよね。あれと同じ原理です。
原因は小数点の表記である
数値が小数点を含む場合、SVGは次のように省略して書くことができます。
1 | <path d="M44-405" stroke-width=".5"/> |
0.5のゼロを省略して.5と書けます。CSSでもこのように書けるので、見たことがある人もいるかもしれません。
座標が小数点を含んでいたらどうでしょう。
1 | <path d="M 0.2 0.9"/> |
先ほどの記述ルールとあわせて考えると次のように省略できます。
1 | <path d="M.2.9"/> |
この小数点がふたつ並ぶ表記はSVGの仕様として正しいのですが、GIMPはこれを適切に処理してくれません。英語でバグレポートがあがっていますので、興味のある人は確認してみてください。
Bug 751745 – Incorrect SVG path parsing
どうすれば回避できるの？
IllustratorでSVGを作成して保存すると自動でこのような最適化を行ってくれます。賢いので。
手元に無いので動作確認をしていませんが、調べてみると「別名で保存」、あるいは「複製を保存」を選択すると、このような最適化を行わないで保存してくれるようです。一度Illustratorで開いてから上の方法で保存すればGIMPで読み込めるようになると思われます。
Inkscapeでちょっと試してみたのですが、私のInkscapeに対する知識が足りなすぎてうまくいきませんでした。単純に開いて名前を付けて保存する際に、「ファイルの種類」でいろいろな形式を選んでみたのですがダメでした。うまくいく方法を模索中です。
GIMPでも読み込めるSVGを配布しているサイト3選
「少なっ！もうちょっとがんばって探せや」というお叱りが聞こえてきそうですが限界です。ただし、どのサイトさんも配布数が豊富なうえに、ジャンル分けなどがしっかりとされているので、この3つさえ押さえておけば十分に実用的だと思います。
ICOON MONO
ICOON MONOさんは商用利用可、リンクやクレジット不要の素材サイトさんです。ダウンロード前に色を変えることもできるのでおすすめです。
ページ上部でジャンルを絞ることができるので、こちらを利用するとお目当てのアイコンを探しやすくなると思います。
Icon rainbow
商用利用可能なアイコンをダウンロードできる素材サイトさんです。こちらもダウンロード前に色を変えることができます。
ページ上部でジャンルを絞れますので、こちらを活用して効率良くアイコンを探しましょう。
Flaticon
こちらは海外のサイトさんです。こちらもダウンロード前に色を変更できます。
ページ左上のロゴマークの横にハンバーガーアイコンがありますが、こちらをクリックするとカテゴリーで探すことができるので、こちらを活用するといいのではないでしょうか。
Comment