-
1:ID:3plrjo · 2019-02-20

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

19 件の回答

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

質問の意図が分からない

3:ID:pWW0xN · 2019-02-20

漢は黙ってsvgスプライト

4:ID:Sy7RbR · 2019-02-20

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

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

9:ID:Sy7RbR · 削除
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でやる。ソースがぶわーってなるのがどうも苦手で。

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で色変えれるし。

19:ID: · 削除
20:ID: · 2019-02-21

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

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

一緒に読まれている質問

ページ上部に戻る