アイコン、ロゴ、イラストなどはPNGなどのラスター画像ではなく、SVGといったベクター画像を用いることが多いです。理由としてはラスター画像だとファイルサイズがどうしても大きくなって、読み込みに重くなってしまうことと、拡大縮小したときの画質劣化があります。
SVGファイルの作成について
ベクター画像を作るのはそれなりに技術が必要ですが、慣れると簡単な絵であれば作れるようになります。ツールとしては無料で利用できるInkscapeが断然おすすめです。
有料のものでは、Adobe Illustratorが有名ですが、Inkscapeで十分すぎるので私は使ったことがありません。
SVGファイルの最適化
SVGファイルというのは、XML形式のテキストで記述されています。HTMLのimgタグで読み込んで表示することもできますが、svgタグで直接html内に貼り付ける方が読み込みファイル数が減る分最適化できます。
<img src="foo.svg"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" ...
Inkscapeなどで作ったSVGファイルの先頭の?xmlタグを削除して、そのままHTMLに貼り付ければ表示できます。
<?xml version="1.0" encoding="utf-8"?>
SVGOについて
Inkscapeが吐き出すSVGファイルは、記述に結構無駄が多くてまだまだ最適化ができます。最適化の方法をあれこれ考えるよりも、簡単にツールで済ませてたいですよね。色々あるのですが、svgoが一番おすすめです。
インストールはnodejsのアプリなので、以下のように行います。
# npm install -g svgo
このツールを使うと、一行に小さく集約されたSVGファイルが生成できます。使い方は簡単で、以下のように行います。出力のファイル名を指定しないと、入力ファイルに上書きされてしまいますので、出力のファイル名を指定した方が安全です。
# svgo twitter_logo.svg twitter_logo_o.svg
もちろんこれで生成されたsvgタグをそのままHTMLに貼り付けてしまえば、最適化された形でベクター画像を取り込むことができます。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400"><path opacity=".15" fill="#292f33" d="M0 0h400v400H0z"/><path d="M153.6 301.6c94.3 0 145.9-78.2 145.9-145.9 0-2.2 0-4.4-.1-6.6 10-7.2 18.7-16.3 25.6-26.6-9.2 4.1-19.1 6.8-29.5 8.1 10.6-6.3 18.7-16.4 22.6-28.4-9.9 5.9-20.9 10.1-32.6 12.4-9.4-10-22.7-16.2-37.4-16.2-28.3 0-51.3 23-51.3 51.3 0 4 .5 7.9 1.3 11.7-42.6-2.1-80.4-22.6-105.7-53.6-4.4 7.6-6.9 16.4-6.9 25.8 0 17.8 9.1 33.5 22.8 42.7-8.4-.3-16.3-2.6-23.2-6.4v.7c0 24.8 17.7 45.6 41.1 50.3-4.3 1.2-8.8 1.8-13.5 1.8-3.3 0-6.5-.3-9.6-.9 6.5 20.4 25.5 35.2 47.9 35.6-17.6 13.8-39.7 22-63.7 22-4.1 0-8.2-.2-12.2-.7 22.6 14.4 49.6 22.9 78.5 22.9" fill="#fff"/></svg>
コメント