目次
画像の種類
私もweb業界に就職するまで画像の種類を気にしたことはなかったのですが、
普段使用する画像は主に3種類に分かれています。
・JPEG（写真画像に使用）
・PNG（背景透過が可能）
・SVG（拡大してもジャキらない）
今回は、この中でもSVGの活用方法についてまとめていきたいと思います。
SVGの特徴
SVGはベクター画像と言って、PNGやJPEGなどのラスター画像と違ってどんなに拡大しても画質が劣化することはありません。
また、SVG画像はテキストデータであるため、ファイルサイズが小さくページの読み込み速度改善にも貢献します。
結果SEO対策にも繋がるのです。
SVGの活用方法
SVGをPNGやJPEGのように書き出して読み込むこともできますが、文字列としてソースコードに埋め込むとさらに活用の幅が広がります。
例えばhoverしたときや選択中にアイコンの色を変えるという仕様はよくあると思います。
こういう時に、普通の画像の場合それぞれの色のアイコンを書き出して表示非表示を切り替えなければなりません。
しかしSVGをソースコードに埋め込めば、なんとCSSのたった1行だけで色変更が可能なのです。
※ cssで色を指定する場合は、svgコードからfillを指定する記述を削除してください。
svg {
fill: white;
&:hover {
fill: red;
}
}
気をつけるポイント
圧縮と整理
いくらテキストデータであるとはいえ、文字数が多くなってしまうとファイルサイズがPNGより大きくなってしまうこともあります。使用するときは圧縮して、インデント等も揃えておくと良いでしょう。
圧縮の方法は下記記事をご参考ください。
文字はアウトライン化してから！
テキスト部分をSVGで書き出すと、ブラウザによって表示フォントが変わってしまいます。
書き出し時に文字部分をアウトライン化しておくと、絵として認識されるのでフォントが変動することもありません。
