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

現象

今回は「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
}