アイコンはベクターなsvg!

アイコンはベクターなsvg!

svgにてアイコン表示

みんな大好きベクター画像。拡大縮小で画質の劣化なし。
アイコンフォントですと、たまにうまく表示できずコードダダ表示、
なんて経験ありませんか?
私はこれで夜通し対応しまくったトラウマがあります。
モンスター案件、おそるべし。
svgであればそんな心配ご無用です!にょろにょろさせるレスポンシブでは重宝します。
ファンタスティック!

使い方

imgタグにて標示

svgタグにて標示

タグで標示すれば、cssでの装飾が可能です。
白くしたり、黒くしたり。
大きさを変えたり。画質の劣化なしで実装可能、とっても便利。

HTML

CSS

色を変えたい場合はfillを使います。
backgroundやcolorではないので注意。

こちらの記事を参考にさせていただきました。
アイコンフォントからsvgへ!より手軽にベクター画像を表示しよう(Webクリエイターボックス)

Back to Top