Base64 SVG 이미지

Question

Base64 데이터 URI를 가져올 수 없으며 SVG가 이미지로 표시됩니다.

나는 <img>과 <canvas>을 시도했으며 어느 쪽도 SVG를 표시하지 않습니다.

var url = 'data:image/svg+xml;base64,' + btoa('<svg height="100" width="100"><circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red"/></svg>'); 
 

 
document.getElementById('image').src = url; 
 

 
var context = document.getElementById('canvas').getContext('2d'); 
 
var image = new Image(); 
 
image.src = url; 
 
context.drawImage(image, 0, 0);

canvas, img { 
 
    border: 1px solid black; 
 
}

<img id="image" width="200" height="200"> 
 

 
<canvas id="canvas" width="200" height="200"></canvas>

는 크롬과 파이어 폭스에서 테스트.

SVG가 표시되지 않는 것은 무엇입니까?

Answer 1

이 같은 SVG를 embeding 때, svg에 대한 xmlns을 설정 기억

var url = 'data:image/svg+xml;base64,' + 
      btoa('<svg xmlns="http://www.w3.org/2000/svg" height="100" width="100"><circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red"/></svg>'); 

당신의 SVG 요소에 사용되는 xlink 접두사가있는 경우, 당신은 또한 xmlns:xlink="http://www.w3.org/1999/xlink"