svgアイコンを使う理由がわかりません。一般的なサイトで、特に色替え・サイズ変えなどの変更が起こらない場合、横幅640pxで作ったデザインであればアイコンはボケないと思うのですがそれでもsvgアイコンを使ったほうがいい理由がわかりません。設置が面倒だし余計時間かかりませんか？svgアイコンは何がいいのでしょうか？よろしくお願いいたします。軽さというのはわかるのですが、それだけでしょうか？
javascriptでいろいろ操作できるよ楽しいよ
回答ありがとうございます！なるほど〜アニメーションさせたりとかですかね？
>設置が面倒だし余計時間かかりませんか？普通にimgタグじゃ いかんのか？
これ。あと通常画像をretina対応のために大きいサイズで書き出すとファイルサイズ自体がデカくなるが、svgだとベクターだから軽量だし、パスを最適化すれば更に軽くなる。それにベクターだからどんなに拡大しても荒れることはない。.あと他のコメにもでてるがJSやCSSをsvg内部のコードに指定して、色指定やアニメーションさせることも出来る。
>色替え・サイズ変えなどの変更が起こらない場合その状況が既にニッチだと思う。あと、SVGアイコンはCSSを適応できるってのが最大の強みじゃないかな。たとえば、hover時の状態をcssで変更できるから、cssスプライトなんていうレガシーな手法はいらない。ボーダーやドロップシャドウやグラデやマスクやアニメーションまで、cssの範囲のことならなんでもできる。更に、レガシーIEを気にする必要ない今、リガチャを使えるから、アイコンをテキストとして扱えるのも魅力。
レスポンポンでやるのと、スマホで見るとき。黙ってSVG一択でいいんだよ。
それなりに使ってれば画像よりメリットがあるとわかると思うんだけど、トピ主はあんまり使ったことないのかな？
アイコンはサイト全体で繰り返し使われる記号なのでクラスの概念を持ってる反復して使う抽象表現であり、核となる形状は同じであるべきで使われ方や装飾はその下に付随する属性として捉えたいだからソースを同じものとすることに情報的な意味があるんだよ
最悪元データ無くしてもアイコン復旧できる！
みんなの回答 8 件
javascriptでいろいろ操作できるよ楽しいよ
>設置が面倒だし余計時間かかりませんか？
普通にimgタグじゃ いかんのか？
>色替え・サイズ変えなどの変更が起こらない場合
その状況が既にニッチだと思う。あと、SVGアイコンはCSSを適応できるってのが最大の強みじゃないかな。たとえば、hover時の状態をcssで変更できるから、cssスプライトなんていうレガシーな手法はいらない。ボーダーやドロップシャドウやグラデやマスクやアニメーションまで、cssの範囲のことならなんでもできる。更に、レガシーIEを気にする必要ない今、リガチャを使えるから、アイコンをテキストとして扱えるのも魅力。
レスポンポンでやるのと、スマホで見るとき。
黙ってSVG一択でいいんだよ。
それなりに使ってれば画像よりメリットがあるとわかると思うんだけど、トピ主はあんまり使ったことないのかな？
アイコンはサイト全体で繰り返し使われる記号なのでクラスの概念を持ってる
反復して使う抽象表現であり、核となる形状は同じであるべきで
使われ方や装飾はその下に付随する属性として捉えたい
だからソースを同じものとすることに情報的な意味があるんだよ
最悪元データ無くしてもアイコン復旧できる！
関連するトピックス