🏞️
SVGのフォントがおかしくなったので調べてみた
サイト制作でsvg内のテキストフォントが明朝になったりで困ったので、svgというちょっと特殊な画像ファイルについて調べてみた。
SVGとは？
SVGはベクター形式のデータです。画像ファイルですが、XMLに準拠しているため、テキストエディタで編集もできるという少し不思議な画像形式ですね。
ちなみにJPEGやPNGはベクターではなくラスタ形式です。
ラスタ形式はピクセルで画像を表現するため、拡大すると粗くなる...
一方でベクター形式のSVGは画像や文字などの2次元情報を数値化して記録し、ブラウザがその場で描画してくれている。従って解像度やデータの劣化を気にする必要がないのが大きなメリットです👍
アウトライン化するのを忘れない
SVGはテキストからブラウザが描画しているため、テキストの描画がブラウザに依存します。
つまり、デザインと異なるフォントで表現されてしまうこともあるということですね💦
したがって、テキストが含まれるSVGファイルを使用するときは必ずアウトライン化してから書き出しましょう！！（自戒）
XDの場合
フォントを選択した状態で、
command + 8
を押せばOK！！！！
まとめ
- SVGはベクター形式
- ベクター形式は画像や文字などの2次元情報を数値化して記録し、ブラウザがその場で描画してくれている
- テキストを含む画像の時は必ずアウトライン化をして書き出す
最後に！自戒！テキストを含む画像の時は必ずアウトライン化をして書き出す！
参考サイト
Discussion