svgってどうやって表示してる？

2:ID:6B3vwB · 2019-02-20

質問の意図が分からない

3:ID:pWW0xN · 2019-02-20

漢は黙ってsvgスプライト

1いいね!

4:ID:Sy7RbR · 2019-02-20

<img> でやってる。チョクで埋め込めはするが、ソースがかなり見づらくなるのでやらない。pug とかで include する手もあるけど。

2いいね!

5:ID:Rw1Xo7 · 2019-02-20

Re:3
メリットあるかな？
少なくとも、広がりつつあるhttp2では逆に不利だよ。

6:ID:4aWuYK · 2019-02-20

普通に<img>で使う。
hoverとかで色変える必要あるならインラインで使う。
サイト全体通して使うモチーフならシンボルにしてuseする。

7:ID:主 · 2019-02-20

Re:4 同じsvgで色だけ変えたいときってsvg二つつくるの？

8:ID:GbPQD0 · 2019-02-20

SVGのオブジェクトごとにCSSで色を切り替える
http://asachun.hateblo.jp/entry/2016/03/24/181825

1いいね!

10:ID:Sy7RbR · 2019-02-20

Re:7
いまの所そのケースに遭遇したことがない。

11:ID:r/qXYY · 2019-02-20

背景に

12:ID:CexYQE · 2019-02-21

Re:7
CSSでやれ場良いでしょう

13:ID:htKefJ · 2019-02-21

特にアニメーションさせたり可変したりする予定がなければimgでやる。ソースがぶわーってなるのがどうも苦手で。

1いいね!

14:ID:主 · 2019-02-21

Re:12 imgってcss効かないよね？svgに書くんなら、結局ファイル二つにならない？

15:ID:主 · 2019-02-21

Re:8 やっぱりsvgスプライトでfillが一番管理しやすいのかなー。個人的には親しみのあるimgやbackgroundで表示したいんだけどね、cssで外部から色が変えられないんだよなぁって。

16:ID:主 · 2019-02-21

Re:13 自分もimgで表示させたい派。svgスプライトはローカルサーバー周りがめんどくさい。自分はnode.jsとかで環境作ってるけど、その環境があるデザイナーばかりじゃないんだよなぁ。

17:ID:Sy7RbR · 2019-02-21

Re:10
ちなみにだが UIKit は <img> に uk-svg を指定して SVG を読み込むとレンダリング時に自動でインライン展開してくれる。
https://getuikit.com/docs/svg

18:ID:/wvdRV · 2019-02-21

前インラインだとソースが見づらくなるのが嫌で、jsでsvgファイルをsvgタグで読み込んだな。
cssで色変えれるし。

20:ID:主 · 2019-02-21

Re:18
今致し方なくこれでやっているけど、例えばトグルで矢印を上下に反転させたい時とかsvg二つならんで鬱陶しい…あっ！cssで回転させたらいいのかお。ありがとうなんとかちょっとはソース整理できそう。

2 件の回答が除外されました。[詳細]

コメントの受付は終了しました。

#質問 svgってどうやって表示してる？