Inline SVG

SVG 本身被視為圖檔，那麼能不能畫好一個 SVG 後，即時拿來用在 html 中的 img 或 background-image 呢 ? 方法還是有的，只是必須透過 javascript 才行 主要用的技巧是 **<font color="#00f">data:image/svg+xml;base64,[data]</font>** <br> 那麼如果不用 base64 呢 ? 也可以用 **<font color="#00f">data:image/svg+xml;charset=UTF-8,[data]</font>** 或 **<font color="#00f">data:image/svg+xml;utf8,[data]</font>** 而這個 **[data]** 必須用 escape 轉換 在實測過程中發現，平常使用 SVG 時並沒有加上完整檔頭，以致於花了些時間才找到圖片出不來的原因 SVG 檔頭宣告 : **<font color="#00f">xmlns="http://www.w3.org/2000/svg"</font>** ``` <svg xmlns="http://www.w3.org/2000/svg"></svg> ``` 範例如下 : ``` $mmcode(r1) ``` <div class="mmresult r1"> <style> #a1113a_iddiv { width:300px; height:200px; background-image:url(bomb.png); background-size:50px; } </style> <svg id="a1113a_idsvg" xmlns="http://www.w3.org/2000/svg" style="background-color:#ff0" width=200 height=200> <path d="M30,200 L100,0 L170,200 L0,70 L200,70Z" fill="#00f"/> </svg> <img id="a1113a_idimg" width=100/> <img id="a1113a_idimg1" width=100/> <br> <div id="a1113a_iddiv"></div> <script> $(function() { var kk=document.querySelector("#a1113a_idsvg").outerHTML; var k8="data:image/svg+xml;base64,"+btoa(kk); var kt="data:image/svg+xml;charset=UTF-8,"+escape(kk); $("#a1113a_idimg").attr("src",k8); $("#a1113a_idimg1").attr("src",kt); $("#a1113a_idsvg path").attr("fill","#e70"); kk=document.querySelector("#a1113a_idsvg").outerHTML; k8="data:image/svg+xml;base64,"+btoa(kk); $("#a1113a_iddiv").css("background-image","url("+k8+")"); }); </script> </div>

SVG 本身被視為圖檔，那麼能不能畫好一個 SVG 後，即時拿來用在 html 中的 img 或 background-image 呢 ? 方法還是有的，只是必須透過 javascript 才行

主要用的技巧是 data:image/svg+xml;base64,[data]
那麼如果不用 base64 呢 ? 也可以用 data:image/svg+xml;charset=UTF-8,[data] 或 data:image/svg+xml;utf8,[data] 而這個 [data] 必須用 escape 轉換

在實測過程中發現，平常使用 SVG 時並沒有加上完整檔頭，以致於花了些時間才找到圖片出不來的原因

SVG 檔頭宣告 : xmlns="http://www.w3.org/2000/svg"

  <svg xmlns="http://www.w3.org/2000/svg"></svg>  

範例如下 :

<style>
#a1113a_iddiv
{
  width:300px;
  height:200px;
  background-image:url(bomb.png);
  background-size:50px;
}
</style>  
<svg id="a1113a_idsvg" xmlns="http://www.w3.org/2000/svg" style="background-color:#ff0" width="200" height="200">
<path d="M30,200 L100,0 L170,200 L0,70 L200,70Z" fill="#00f"></path>
</svg>

<img id="a1113a_idimg" width="100/">
<img id="a1113a_idimg1" width="100/">
<br>
<div id="a1113a_iddiv"></div>

<script>
$(function()
{
  var kk=document.querySelector("#a1113a_idsvg").outerHTML;
  var k8="data:image/svg+xml;base64,"+btoa(kk);
  var kt="data:image/svg+xml;charset=UTF-8,"+escape(kk);

  $("#a1113a_idimg").attr("src",k8);
  $("#a1113a_idimg1").attr("src",kt);
  $("#a1113a_idsvg path").attr("fill","#e70");

  kk=document.querySelector("#a1113a_idsvg").outerHTML;
  k8="data:image/svg+xml;base64,"+btoa(kk);

  $("#a1113a_iddiv").css("background-image","url("+k8+")");
});
</script>