この記事の概要
SVGは画像でありつつもコードで描画できます。
そのため、JPGやPNGと違いしっかりと内訳が表示されます。
とは言えほとんど暗号みたいな内容ですから、みなさん「これは流石に見なくてOK」と判断していませんか？
コードになっているからこそ気付きやすい点もあるので、その観点を記事にしてみました。
真面目な文章で書きますし、全く効果がない訳ではありませんが、ほとんどネタみたいな記事として捉えてください。
見るポイント
Generatorのコメント
SVGファイルであれば大抵はデザイナーが用意するはずです。
デザイナーが用意するのであればAdobe IllustratorやSketchで書き出している可能性は高いですよね。
するとコードの中にこんなコメントが入っている場合があります。
<!-- Generator: Adobe Illustrator x.x.x, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!-- Generator: Sketch x.x - http://www.bohemiancoding.com/sketch -->
これらはSVGを表示するという役割においては何も影響を及ぼしません。
コメントですからそりゃそうですよね。
なお、SVGOなどの最適化ツールを使えば削除できます。
ライセンス的にこのコメントを消してはいけない可能性もある……？と思って調べてみましたが、各種ヘルプページを見ても見つけられませんでした。
私の知る限りIllustratorではアートボード書き出しでSVGを生成するとこのコメントは入りません。
若干怪しいので、普段はそちらの書き出し方を選んでいます。
やたらたくさんの<g>
これも、グラフィックソフトから書き出すと起こる可能性があります。
操作しやすいようにグループ化するとそれがそのままコードに反映されてしまうんですね。
minifyするようなイメージで、不要なgは消しておいた方が（ほんの少しですが）軽くなります。
なお、SVGOなどの最適化ツールを使えば削除できます。
viewBoxの小数点
SVGのコードはこんな感じで始まります。
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
viewBoxの詳しい解説をしようと思うとかなり長くなってしまうので、ここでは省略します。
本当にざっくりですが、widthとheightが指定されているイメージで読み進めてください。
上記のコードであれば100x100pxの正方形のエリアの中にパスで図形が描かれます。
さてこのviexBoxですが、これもグラフィックソフトで作ると小数点が入ってしまう場合があります。
すると微妙に表示が切れたり、端が汚くなったり……良いことがありません。
整数で作り直すようにレビューをしましょう。
rectやcircleなど、プリミティブな要素の小数点
さすがに自由曲線のパスの場合はコードを見ていても無理がありますが、プリミティブな図形であれば変な小数点が無いかを一応見ています。
0.5とかならわかりますが0.02とかになっていたら「多分ずれてるはず」と判断して元データをチェック。
evenodd
fill-ruleやclip-ruleあたりでしょうか。
これも結構ややこしい話なのですが、パスは本来決まった向きで書かれていないとくり抜きができません。
それを無視するのがevenoddです。
ルールを簡単にしてくれるなら良いじゃ無いかと思われるかもしれませんが、例えば以下のようなことがおきます。
リンク先の例でいうと、そもそもこんなパスの作り方をするのが間違いな気はしますが……
- evenoddを発見する
- 外してみる
- ちゃんと表示されたら
- 表示されるのだから、要らない記述は無い方が良い
- 表示がおかしくなったら
- パスの作りとして何かがおかしい可能性がある
- ちゃんと表示されたら
こうやっていつもたしかめています。
font-family
あくまで仕様としてフォントをSVG内部で使うこと自体はOKなのです。
しかしSVGで文字要素を作っているということは、装飾的なフォントとか、普通のPCには無いフォントを使っている可能性が高いです。
アウトライン化をし忘れていてfont-familyが指定されてしまっているのかな？と思って作成者に聞いて見るが吉です。
日本語の属性
レイヤー名などが日本語で入ってしまっているデータを見ることがあります。
表示は問題なくできますが、コードとしてはあまりよろしくないですよね。
「変数名は日本語でつけても良いから日本語でつけました」っていうのと同じ印象というか……。
というわけで英語に変えてもらうようにしています。