投稿

10月, 2021の投稿を表示しています

2021年svgアイコンをCSSで実装する方法を本気で考えてみた

svgアイコンのすすめ 絵文字発祥の地、日本ならではの事かもしれないのですが。 webページ(サイト)を製作する際に必ず必要となってくるのが絵文字的に使用されているアイコンです。 webページでアイコンを使う場合ですが、3つの選択肢がありそれぞれメリットデメリットがあります。 「Font Awesome」や「Google icon」のweb fontを使った既存サービスを利用 メリット cssを読みこむだけで使用できる。 拡大時に荒くならない。 フォントとして利用できるので、サイズ、色を自由に変更できる。 あらゆるブラウザに対応している。 更新等の運用が不要。 デメリット 既存サービスのため独自のアイコンが使えない。 既存サービスは不要なアイコンも読み込むため容量が大きくなる。(SEO低下) 独自のweb fontアイコンを作る場合は、難易度が高く運用も難しい。 画像を利用 メリット あらゆるブラウザに対応している。 自由なデザインで製作できる。 デメリット 拡大時に画像が荒くなる。 場合によってはリサイズを含め多くのサイズを用意する必要がある。 svgに比べて容量やファイル数が多くなる(SEO低下) svgを利用 メリット ほとんどのブラウザに対応している。(IE9以上、Firefox3以上、Android Browser3以上、など) 拡大時に荒くならない。 自由なデザインで製作できる。 画像、webfontに比べて圧倒的な低容量。(必要な物だけ製作すればよい) デメリット IE8以下で使えない。(利用者は、ほぼいない全体の0.1%以下) アイコンの利用状況ですが、 メジャーECで確認してみると、海外由来のamazonでは★マークや[primeマーク]が