Web制作関連のサイレントな不具合って、原因不明で本当に困ります。
その時の体験で、SVGがChromeだけ部分的に表示されなかったことがありました。
なぜかChromeだけにSVGが表示されない問題が発生する悩ましき事態に遭遇しました。
なぜChromeだけなのか…。
苦悩した結果、この不具合について解決策はSVG画像生成にはIllustratorが必要
最近のPhotoshopではシェイプなどからもSVG画像の生成が可能なので、PhotoshopでさくっとSVGの生成を行っていたのですが
これが良くなかったようでシェイプ意外のものをSVGにしてしまうとそのままDataURL形式で保存されそのせいで、Chromeブラウザでは表示がうまくいかないようなのです。
SVG画像対策のコーディング的アプローチ
imgタグではなく、Objectタグで設置すれば問題なく表示されますが
CSSのbackgroundやimgタグで配置すると全く表示されないという不具合です。
さすがにobjectタグでコーディングをしていくのはソース的に良くないと思いますし
他のモダンブラウザではこの現象発生しないこともありこの方法は不採用です。
最終的なChromeのSVG不具合解決策としては
・シェイプだけならphotoshopでSVG生成
.ラスタライズされたレイヤーベクターでしっかりとSVGを作るならIllustratorで書き出しが必須。
この方法で書き出したSVGであれば
オブジェクトタグでなくても、imgタグ、cssのbackgroundでも問題なく表示されます。
同じような不具合にお悩みの方はまずは
Illustratorでの書き出しをお試しください。