Web制作

【CSS】FirefoxでSVG画像が表示されない時の対処方法【with指定で解決】

Written by o-saka

FirefoxSVG画像が表示されない時の対処方法をご紹介します。

現象

今回は「Bootstrap 4」を使用して<nav class="navbar">内に<a>で囲ったSVGファイルFirefoxでのみ表示されないという現象が起こりました。

原因

class="navbar"のstyle display:flex がバグの原因のようです。

解決方法

画像ファイルを「jpg」や「png」に変換すれば解決します。

SVGファイルを使用したい場合は <a> タグにwithの指定をすると解決します。

ソース例

HTML

 <nav class="navbar">
  <a class="navbar-brand" href="#"><img src="images/logo.svg" class="img-fluid" alt="image"></a>
</nav>

CSS

.navbar-brand{
  200px
}

FirefoxでSVG画像が表示されない時は

  • jpgpngにする
  • aタグにwithを指定する

この記事を書いた人

o-saka(@abiko41)

大坂デザイン事務所代表。WEB作ったりバンドロゴ作ったりしてます。
お仕事のご依頼は下記フォームより承っております 。お気軽にご連絡ください。

お問い合わせ