SVG、それは魔法の画像形式

こんなに便利な物だったとは！

SVGって、昔からある画像形式なんで、存在はもちろん知っていたんですけど、使うことは無かったんですよね。
写真系ならJPEG使うし、透過させるならPNG使うし。
ここ数年だと、より高圧縮なWebP（相手が対応していれば）を使ったりしています。

ちょっと前に、k-kaz が好きなことを書くサイト で、Hugoのロゴ画像を使う機会がありました。
勝手にページの読み込み速度に拘っているので、画像サイズを適切なものにしようと思ったんです。
そのとき、公式ロゴがsvg形式だったことを知り、なんでsvgなんだろうと思ったわけです。

調べて驚いた！

SVGとは「Scalable Vector Graphics」の略で、「大きさを変えられるベクター画像」ということらしい。

なんてこった！

HTMLの中でサイズ指定すれば、勝手にその大きさに画像を変えてくれるなんて、夢見たいじゃない。
しかもベクター画像だから、拡大してぼやけるとか、縮小して潰れるみたいなことがなく、美しいままなのよ。
興奮して、ちょっとオネエになった。

JPEGやPNGのラスター画像だと、同じ画像でも、必要に応じて複数のサイズを用意することがあります。
それこそ、パソコン用だ、モバイル用だという、レスポンシブ対応です。

私は自由だ！

ということで、今後は積極的にSVGを活用していこうと思います。
写真系は弱いようなので、こちらはWebP（またはJPEG)で。

画像形式なんだけど、テキスト形式のファイル

ちょっと補足。
SVGのファイルは、画像形式でありながらも、メモ帳とかで開けるテキストファイルです。
座標とか、色とかが文字列で表されているので、メモ帳とかでファイルを開いて、色を書き換えたりできます。
色を変えるだけなら、専用のアプリを使う必要がありません。楽ちん。