SVGのimage要素での外部画像ファイル参照をbase64コード（URIスキーマ）に変換する - Qiita

この記事は、SVG Advent Calendar 2016の6日目の記事です。 また、説明つきの画面キャプチャー図をSVGでつくるの続編です。 はじめに 説明つきの画面キャプチャー図をSVGでつくるで取り上げたようにSVGのimage要素を使って外部の画像ファイルを参照させると、いろいろ便利です。 しかし、外部の画像ファイルを参照させたSVGファイルをHTMLのimgタグなどで参照しようとすると、うまくいきません。画像ファイルが欠落してしまうのです。 とりあえずの対策として、SVGファイルをPNGなどの画像に変換するという方法もあります。 だけど、せっかく世の中の大多数のWebブラウザーでSVGを扱えるようになった時代、できればSVGのままHTMLから使いたいものです。 いろいろ調べると、image要素で参照する画像ファイルをbase64コードに変換してURIスキーマを使えば、HTMLの