サイレントな不具合って原因が不明で本当に困ります。 SVGがChromeだけ部分的に表示されなかった件 なんともChromeだけに発生する悩ましき事態に遭遇しました。 なぜChromeだけなのか私にわかりません。。。
この不具合について、解ったことSVG画像の生成はIllustratorが必要
最近のPhotoshopでもSVGの生成が可能なので、photoshopでSVGの生成を行っていたのですが どうにも
シェイプ意外のものをSVGにしてしまうとそのままDataURL形式で保存されているようなのです。 そのせいで画像が荒い（そりゃそうだベクター画像じゃないもの） 画像が荒いだけなら判断が早いのですが、 この影響でChromeブラウザでは表示がうまくいかないようなのです(T_T) 苦肉の策でimgタグではなく、Objectタグで設置すれば問題なく表示されますが、 CSSのbackgroundやimgタグで配置すると全く表示されないという不具合です。 さすがにobjectタグでコーディングをしていくのはソース的に良くないと思いますし 他のモダンブラウザではこの現象発生しないこともありこの方法は不採用です。
ということでChromeのSVG不具合解決策としては
・SVGを仕込むならシェイプだけならphotoshopでOK .ラスタライズされたレイヤーやら色々あるときはIllustratorで書き出しが必須 この方法で書き出したSVGであれば オブジェクトタグでなくても、imgタグ、cssのbackgroundでも問題なく表示されます。 同じような不具合にお悩みの方はまずは Ｉｌｌｕｓｔｒａｔｏｒでの書き出しをお試しください。
