最近ウェブサイト等でもよく使用されているSVG画像についての解説と個人ブログでの簡単活用法についてお伝えしていきます。
SVGとは
SVGとは画像フォーマットの一種で、馴染みのあるものとしてはJPG・PNG・GIFなどがあります。それらはビットマップ画像と呼ばれますが、SVGはベクター画像と呼ばれXML記法を用いて画像を図形の集合として表現します。
SVGの凄さ
ではSVG画像の優れた点をいくつか説明します。
拡大しても鮮明
SVG画像はJPG・PNG・GIFとは異なり、どんなに画像を拡大しても不鮮明になることはありません。その為、解像度の異なる環境や印刷においてとても役に立ちます。
では実際に下の東京タワーのアイコン画像をPNGとSVGで比べてみましょう。先に拡大前の通常画像はこちらです。
ではこれを拡大して比較してみましょう。左のPNG画像はほやけて不鮮明になってしまいましたが、右のSVG画像は線がくっきりとしていて鮮明のままです。
テキストエディタで編集可能
SVG画像はテキストエディタで開くことができ、難しいツールを使用しなくてもHTMLとCSSを用いて編集が可能です。では先ほどの東京タワーの画像を縦横150pxの大きさに小さくしてみましょう。
さらに好きな色に変えることも出来ます。今回は台座の一部を黄色系に変更してみます。
サイズを変えたり色を変えたりしながら文章の中にアイコンのように使うことも可能です。
今日は東京タワー に行ってきました！
天気は快晴 で最高の景色を楽しみました！
僕ネコだけどネギが大好き
ファイルサイズが小さい
シンプルで単純なアイコンや複雑でない画像などであればファイルサイズは小さくなります。その為、効果的に使用するとブログなどのサイトのページ表示スピードを上げてSEO的にもよいパフォーマンスを得られることが出来ます。
ただし複雑な画像などは逆にファイルサイズが大きくなったり、読み込みに時間がかかる場合がありますので注意が必要です。
SVG素材のダウンロード
SVG画像を上手に扱うことが出来ればブログのパフォーマンスを上げることが出来ます。その為のSVG素材を無料で手に入れることが出来るサイトはいくつかありますので最後に紹介します。
- シンプルなイラストのSVGでダウンロードが出来るのはUndraw
- 欲しいアイコンが必ず見つかるICOOON MONO
- フラットデザインのフラットアイコンデザイン
どれも商用利用可能でクレジット表記の必要はありませんので手軽にダウンロードしてブログに使ってみるのもいいと思います。
