Javascriptでbase64 SVGをHTML DOMに挿入するeasiet方法はありますか？

Question

今、私はCSSの背景画像としてBase64 SVGを実際に使用しています。しかし、私はSVGの色をCSSで簡単に書き換えることができるように、SVGをHTMLに書きたいと思っています。

ここで質問しています：Base64 SVGをSVGタグに変換してDOM？

var base64SVG = $('#svgHolder').css('background-image'); 
base64SVG = base64SVG.replace('url("', '').replace('")', ''); 

// Now I have a Base64 SVG, so what else should I do to be able to put in into the DOM? 

実際base64SVG変数の内容は以下の通りです：

var base64SVG = "data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='#ccc'/%3E%3C/svg%3E"; 

Answer 1

私はこれを達成するための方法を見つけた：

var svg = decodeURI($('#svgHolder').css('background-image').replace('url("data:image/svg+xml;charset=utf8,', '').replace('")', '')); 
$('#svgHolder').append(svg); // append the SVG image into the element 
$('#svgHolder').css('background-image', 'none'); // And remove the cssbackground-image, as we don't need it anymore 

それは素晴らしい作品！しかし、誰かがより良い方法を知っているなら、私はそれを知ってうれしいです:)