1. このページの目的
データURLでsvg要素を埋め込む。
2. デモで使うSVG
HTML
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0, 0, 200, 200" style="background: #eee">
<circle cx="100" cy="100" r="100" fill="blue" />
</svg>
3. デモ（URL Encode）
コード
HTML
<div style="width:200px;height:200px;
background-image:url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22200%22%20height%3D%22200%22%20viewBox%3D%220%2C%200%2C%20200%2C%20200%22%20style%3D%22background%3A%20%23eee%22%3E%0A%20%20%3Ccircle%20cx%3D%22100%22%20cy%3D%22100%22%20r%3D%22100%22%20fill%3D%22blue%22%20%2F%3E%0A%3C%2Fsvg%3E');"></div>
<svg>タグを URL Encode して、データURLのデータに指定する。
4. デモ（Full URL Encode）
コード
HTML
<div style="width:200px;height:200px;
background-image:url('data:image/svg+xml;charset=utf8,%3C%73%76%67%20%78%6D%6C%6E%73%3D%22%68%74%74%70%3A%2F%2F%77%77%77%2E%77%33%2E%6F%72%67%2F%32%30%30%30%2F%73%76%67%22%20%77%69%64%74%68%3D%22%32%30%30%22%20%68%65%69%67%68%74%3D%22%32%30%30%22%20%76%69%65%77%42%6F%78%3D%22%30%2C%20%30%2C%20%32%30%30%2C%20%32%30%30%22%20%73%74%79%6C%65%3D%22%62%61%63%6B%67%72%6F%75%6E%64%3A%20%23%65%65%65%22%3E%0A%20%20%3C%63%69%72%63%6C%65%20%63%78%3D%22%31%30%30%22%20%63%79%3D%22%31%30%30%22%20%72%3D%22%31%30%30%22%20%66%69%6C%6C%3D%22%62%6C%75%65%22%20%2F%3E%0A%3C%2F%73%76%67%3E');"></div>
<svg>タグを Full URL Encode して、データURLのデータに指定する。
5. デモ（Base64 Encode）
コード
HTML
<div style="width:200px;height:200px;
background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIiB2aWV3Qm94PSIwLCAwLCAyMDAsIDIwMCIgc3R5bGU9ImJhY2tncm91bmQ6ICNlZWUiPgogIDxjaXJjbGUgY3g9IjEwMCIgY3k9IjEwMCIgcj0iMTAwIiBmaWxsPSJibHVlIiAvPgo8L3N2 Zz4=');"></div>
<svg>タグを Base64 Encode して、データURLのデータに指定する。