質問の意図が分からない
漢は黙ってsvgスプライト
<img> でやってる。チョクで埋め込めはするが、ソースがかなり見づらくなるのでやらない。pug とかで include する手もあるけど。
Re:3 メリットあるかな?少なくとも、広がりつつあるhttp2では逆に不利だよ。
普通に<img>で使う。hoverとかで色変える必要あるならインラインで使う。サイト全体通して使うモチーフならシンボルにしてuseする。
Re:4 同じsvgで色だけ変えたいときってsvg二つつくるの?
SVGのオブジェクトごとにCSSで色を切り替えるhttp://asachun.hateblo.jp/entry/2016/03/24/181825
Re:7 いまの所そのケースに遭遇したことがない。
背景に
Re:7 CSSでやれ場良いでしょう
特にアニメーションさせたり可変したりする予定がなければimgでやる。ソースがぶわーってなるのがどうも苦手で。
Re:12 imgってcss効かないよね?svgに書くんなら、結局ファイル二つにならない?
Re:8 やっぱりsvgスプライトでfillが一番管理しやすいのかなー。個人的には親しみのあるimgやbackgroundで表示したいんだけどね、cssで外部から色が変えられないんだよなぁって。
Re:13 自分もimgで表示させたい派。svgスプライトはローカルサーバー周りがめんどくさい。自分はnode.jsとかで環境作ってるけど、その環境があるデザイナーばかりじゃないんだよなぁ。
Re:10 ちなみにだが UIKit は <img> に uk-svg を指定して SVG を読み込むとレンダリング時に自動でインライン展開してくれる。https://getuikit.com/docs/svg
前インラインだとソースが見づらくなるのが嫌で、jsでsvgファイルをsvgタグで読み込んだな。cssで色変えれるし。
Re:18 今致し方なくこれでやっているけど、例えばトグルで矢印を上下に反転させたい時とかsvg二つならんで鬱陶しい…あっ!cssで回転させたらいいのかお。ありがとうなんとかちょっとはソース整理できそう。
19 件の回答
質問の意図が分からない
漢は黙ってsvgスプライト
<img> でやってる。チョクで埋め込めはするが、ソースがかなり見づらくなるのでやらない。pug とかで include する手もあるけど。
Re:3
メリットあるかな?
少なくとも、広がりつつあるhttp2では逆に不利だよ。
普通に<img>で使う。
hoverとかで色変える必要あるならインラインで使う。
サイト全体通して使うモチーフならシンボルにしてuseする。
Re:4 同じsvgで色だけ変えたいときってsvg二つつくるの?
SVGのオブジェクトごとにCSSで色を切り替える
http://asachun.hateblo.jp/entry/2016/03/24/181825
Re:7
いまの所そのケースに遭遇したことがない。
背景に
Re:7
CSSでやれ場良いでしょう
特にアニメーションさせたり可変したりする予定がなければimgでやる。ソースがぶわーってなるのがどうも苦手で。
Re:12 imgってcss効かないよね?svgに書くんなら、結局ファイル二つにならない?
Re:8 やっぱりsvgスプライトでfillが一番管理しやすいのかなー。個人的には親しみのあるimgやbackgroundで表示したいんだけどね、cssで外部から色が変えられないんだよなぁって。
Re:13 自分もimgで表示させたい派。svgスプライトはローカルサーバー周りがめんどくさい。自分はnode.jsとかで環境作ってるけど、その環境があるデザイナーばかりじゃないんだよなぁ。
Re:10
ちなみにだが UIKit は <img> に uk-svg を指定して SVG を読み込むとレンダリング時に自動でインライン展開してくれる。
https://getuikit.com/docs/svg
前インラインだとソースが見づらくなるのが嫌で、jsでsvgファイルをsvgタグで読み込んだな。
cssで色変えれるし。
Re:18
今致し方なくこれでやっているけど、例えばトグルで矢印を上下に反転させたい時とかsvg二つならんで鬱陶しい…あっ!cssで回転させたらいいのかお。ありがとうなんとかちょっとはソース整理できそう。