Webサイト内でよく見かけるアイコンですが、みなさんはどのように制作しているでしょうか。IllustratorやPhotoshopを使い、JPEGやPNG形式で保存している方も多いかと思いますが、今回紹介するのは、CSSとSVGで作るアイコンセット「Let’s make multi-colored icons」です。

SVGのメリットを活用したアイコンの生成方法が分かりやすく解説されています。

詳しくは以下

レティナディスプレイが普及し、より高画質でWebサイトの閲覧ができるようになった今、どのようにして高解像度ディスプレイに対応させるのかが問題となります。そんな問題を解決してくれるのが、SVG。JEPGやPNGでサイズを大きく作り、実寸サイズに縮小する必要がないベクター形式の画像なので、拡大縮小しても画質が劣化しないという最大のメリットです。紹介したページには、SVGデータにCSSを当てて様々なアイコンを生成する方法が分かりやすく紹介されています。この方法であれば、色やサイズの変更も簡単にできるので便利ですね。これまで使ったことが無かった方も、この機会に是非試してみてはいかがでしょうか。

Let’s make multi-colored icons with SVG symbols and CSS variables