Data URIでSVGを指定する
imgのsrcにdataURIでSVGを指定する際の手順をメモ。
1. IllustratorでSVGを書き出す。
[別名で保存]、若しくは[WEBおよびデバイス用に保存]でSVGを書き出す。ロゴくらいならデフォルトの書き出しでいいかも。パスの数が膨大でファイルサイズの削減が必須な場合はカヤックさんの下記記事のようにオプションをゴニョゴニョするみたい。
2. SVGファイルを編集
100px×95pxの星を書き出したSVGファイルをテキストエディタで開くと下記みたいなXMLで構成されている。
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 13.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 14948) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" width="100px" height="95px" viewBox="0 0 100 95" enable-background="new 0 0 100 95" xml:space="preserve">
<polygon fill="#231815" points="50,0 65.451,31.271 100,36.287 75,60.629 80.902,95 50,78.771 19.098,95 25,60.629 0,36.287
34.549,31.271 "/>
</svg>
コメントタグとか余計なIDがあるのでこれを削除したのが下記。
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100" height="95" viewBox="0 0 100 95">
<polygon fill="#231815" points="50,0 65.451,31.271 100,36.287 75,60.629 80.902,95 50,78.771 19.098,95 25,60.629 0,36.287
34.549,31.271 "/>
</svg>
3. XMLをURIエンコードする
src属性にXMLを挿入するのでURIエンコードすると下記のようになる。 encodeURI()ではなくencodeURIComponent()でエンコードする。
%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%22%20height%3D%2295%22%20viewBox%3D%220%200%20100%2095%22%3E%0A%3Cpolygon%20fill%3D%22%23231815%22%20points%3D%2250%2C0%2065.451%2C31.271%20100%2C36.287%2075%2C60.629%2080.902%2C95%2050%2C78.771%2019.098%2C95%2025%2C60.629%200%2C36.287%20%0A%0934.549%2C31.271%20%22%2F%3E%0A%3C%2Fsvg%3E
4. src属性に挿入
下記参考リンクにあるようにdataスキームであること、svg画像であることを示すために[data:image/svg+xml,]を指定した後、エンコードしたXMLを挿入する。
<img src="data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%22%20height%3D%2295%22%20viewBox%3D%220%200%20100%2095%22%3E%0A%3Cpolygon%20fill%3D%22%23231815%22%20points%3D%2250%2C0%2065.451%2C31.271%20100%2C36.287%2075%2C60.629%2080.902%2C95%2050%2C78.771%2019.098%2C95%2025%2C60.629%200%2C36.287%20%0A%0934.549%2C31.271%20%22%2F%3E%0A%3C%2Fsvg%3E">
下記実行結果。
ちなみに注意点は旧IEやAndroid2.xではSVGは表示できないので代替えの画像パスに置換する等の作業が必要になる。
