svgをimgタグで埋め込んだ際にchromeで表示されない

Photoshopでsvgを書き出してimgタグで埋め込んだ時に、chromeでだけうまく表示されない不具合に遭遇したので対応方法をメモ。
chromeのバージョンは72.0.3626.121、Photoshopのバージョンは20.0.0を使用しています。

発生した条件

Photoshop上でスマートオブジェクトをsvg形式で書き出します。

以下のような内容で書き出されました。

star.svg

<svg id="star.svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="190" viewBox="0 0 200 190">
  <image id="star" width="200" height="190" xlink:href="data:img/png;base64,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"/>
</svg>

このsvgファイルをimgタグで埋め込みます。

<img src="star.svg">

この場合chromeでうまく表示できませんでした。
うまく表示できなかった場合のデモページ

原因としては、svgのimage要素でxlink:hrefの値がdata:img/png; 〜 となっていると発生するようです。
data:image/png; とすると表示されるようになりました。

<svg id="star.svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="190" viewBox="0 0 200 190">
  <image id="star" width="200" height="190" xlink:href="data:image/png;base64,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"/>
</svg>

対応後のデモページ
　

【参考サイト】

• ChromeでSVGが表示されない現象 – Qiita