SVG画像がflexboxやfloat要素内で表示されない場合はサイズ指定が必要

もうタイトルで全部言っちゃってるんですが。SVG画像をimgタグで読み込もうと思ったら表示されない場合の解決方法のメモです。

原因によって必要な解決方法はいろいろ異なるとは思いますが、親要素やSVG御本人のdisplayがflexboxやfloat指定されている場合はサイズ指定すると表示されるよという内容です。

    現象:SVG画像が 0×0 pixelと認識されて表示されない

    choromeの開発者ツールでSVG画像のサイズを確認すると0×0 pixelとなっています

    chromeの開発者ツールで確認するとSVG画像が 0×0 pixelとなっています。このような状態に対応します。

    厳密にいうと、表示されないのではなく0×0 pixelのサイズで表示されているので見えないということですね。

    対応1:SVG画像にwidthとheightを含めて書き出す:「レスポンシブ」のチェックを外す

    illustratorの書き出し時に「レスポンシブ」のチェックを外す

    illustratorの場合、書き出し時に「レスポンシブ」のチェックを外すとsvgファイルにwidthとheightが追加されます。

    ちなみに「レスポンシブ」にチェックを入れて書き出した場合、親要素がflexboxやfloatでなければ、親要素いっぱいに表示されるということのようです。

    対応2:CSSからサイズを指定する

    CSSからwidthやheightを指定してやることでも対応できます。

    おわり

    以上、flexboxやfloat要素内ではサイズ指定のないSVG画像が表示されないので、それぞれ指定してやりましょうという記事でした。今回は調べていませんが、他にも同様の状態になってしまうdisplayの値がありそうな気がします。あったらぜひ教えてください。

    あとなんかおま環かもしれませんが、書き出しで既存のSVGファイルを上書きする際、一回消してからじゃないとうまく上書きされないとか、PhotoshopからSVGが書き出せないとか色々ハマりどころもあって未解決なので、これもご存じの方があればぜひご教示ください…!

    シェア
    広告
    野良人 代表
    新免祥太
    1988年岡山生まれ。外食企業のWEB・EC担当を経験したのち、2013年12月より「野良人(のらんど)」の屋号で独立しWEBデザイン・プログラミングなどWEBサイト制作の工程全般を請け負っています。お気軽にご相談ください。
    <次の記事(2018/10/23)
    【WordPress】プラグインのパスやURLの取得関数の出力結果出し比べ
    前の記事>(2018/10/11)
    【読んだ】メタメタな時代の曖昧な私の文学(高橋 文樹)
    記事一覧