131

HTML5 캔버스에 SVG 파일을 그리는 기본 방법이 있습니까? Chrome은 SVG를 이미지로로드 (및 단순히 사용 drawImage) 하는 것을 지원 하지만 개발자 콘솔은 경고합니다 resource interpreted as image but transferred with MIME type image/svg+xml.

SVG를 캔버스 명령으로 변환 할 가능성이 있음을 알고 있지만 ( 이 질문 과 같이 ) 필요하지 않기를 바랍니다. 구형 브라우저는 신경 쓰지 않습니다 (따라서 FireFox 4와 IE 9가 무언가를 지원한다면 충분합니다).

html canvas svg

— 랜디 보이트
소스

4

이 질문에 대한 답변은 라이브 데모 stackoverflow.com/questions/5495952/…

— Drew LeSueur

122

2019 년 12 월 16 일 수정

Path2D는 현재 모든 주요 브라우저에서 지원됩니다

2014 년 11 월 5 일 수정

일부 브라우저ctx.drawImage 에는 .svg 소스가있는 HTMLImageElements를 그리는 데 사용할 수 있습니다 . Chrome, IE11 및 Safari가 작동하면 Firefox는 일부 버그와 함께 작동하지만 야간에는 버그가 수정되었습니다.

var img = new Image();
img.onload = function() {
    ctx.drawImage(img, 0, 0);
}
img.src = "http://upload.wikimedia.org/wikipedia/commons/d/d2/Svg_example_square.svg";

여기에 실례가 있습니다 . 캔버스에 녹색 사각형이 나타납니다. 페이지의 두 번째 녹색 사각형은 참조 <svg>를 위해 DOM에 삽입 된 것과 동일한 요소입니다.

새로운 Path2D 객체를 사용하여 SVG (문자열) 경로를 그릴 수도 있습니다. 즉, 다음과 같이 쓸 수 있습니다.

var path = new Path2D('M 100,100 h 50 v 50 h 50');
ctx.stroke(path);

여기에 실례가 있습니다.

오래된 후손 답변 :

기본적으로 캔버스에서 SVG 경로를 사용할 수있는 기본 요소는 없습니다. 직접 변환하거나 라이브러리를 사용해야합니다.

canvg를 살펴 보는 것이 좋습니다.

http://code.google.com/p/canvg/

http://canvg.googlecode.com/svn/trunk/examples/index.htm

— 사이먼 사리스
소스

4

왜 이것이 필요한가요? SVG는로 캔버스에 완벽하게 그리는 것처럼 보입니다 drawImage. 그러나 나는 여전히 그 경고를 받는다. 그거 어디서 났어?

— shoosh

1

사이먼, 네 말이 틀렸어 둘째, Chrome에서 확인 된 버그입니다.

— Mathias Lykkegaard Lorenzen

4

Wikimedia는 SVG 사용을 좋아하지 않습니다. 내가 찾은 첫 번째 SVG로 snapsvg.io/assets/images/logo.svg 를 교체했습니다 . FF에서 일했습니다. jsfiddle.net/Na6X5/331

— Thomas

1

이를 위해 Data URI를 사용할 수도 있습니다 . jsfiddle.net/020k543w

— Swivel

9

참고 : 오래 지속되는 FireFox 버그로 인해 슬프게도 width 및 height 태그가없는 svgs는 캔버스에서 전혀 렌더링되지 않습니다. 또한 너비와 높이는 백분율이 아니어야합니다.

— Hatoru Hansou

26

죄송합니다, @Matyas 답변에 대한 의견이 충분하지 않지만 svg의 이미지가 base64에 있으면 출력으로 그려집니다.

데모:

var svg = document.querySelector('svg');
var img = document.querySelector('img');
var canvas = document.querySelector('canvas');

// get svg data
var xml = new XMLSerializer().serializeToString(svg);

// make it base64
var svg64 = btoa(xml);
var b64Start = 'data:image/svg+xml;base64,';

// prepend a "header"
var image64 = b64Start + svg64;

// set it as the source of the img element
img.onload = function() {
    // draw the image onto the canvas
    canvas.getContext('2d').drawImage(img, 0, 0);
}
img.src = image64;

svg, img, canvas {
  display: block;
}

SVG

<svg height="40">
  <rect width="40" height="40" style="fill:rgb(255,0,255);" />
  <image xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAEX0lEQVQ4jUWUyW6cVRCFv7r3/kO3u912nNgZgESAAgGBCJgFgxhW7FkgxAbxMLwBEmIRITbsQAgxCEUiSIBAYIY4g1EmYjuDp457+Lv7n+4tFjbwAHVOnVPnlLz75ht67OhhZg/M0p6d5tD9C8SNBBs5XBJhI4uNLC4SREA0UI9yJr2c4e6QO+v3WF27w+rmNrv9Pm7hxDyHFg5yYGEOYxytuRY2SYiSCIwgRgBQIxgjEAKuZWg6R9S0SCS4qKLZElY3HC5tp7QPtmlMN7HOETUTXBJjrEGsAfgPFECsQbBIbDGJZUYgGE8ugQyPm+o0STtTuGZMnKZEjRjjLIgAirEOEQEBDQFBEFFEBWLFtVJmpENRl6hUuFanTRAlbTeZarcx0R6YNZagAdD/t5N9+QgCYAw2jrAhpjM3zaSY4OJGTDrVwEYOYw2qioigoviq5MqF31m9fg1V5fCx+zn11CLNVnufRhBrsVFE1Ihpthu4KDYYwz5YQIxFBG7duMZnH31IqHL6wwnGCLFd4pez3/DaG2/x4GNPgBhEZG/GGlxkMVFkiNMYay3Inqxed4eP33uf7Y0uu90xWkGolFAru7sZn5w5w921m3u+su8vinEO02hEWLN/ANnL2rkvv2an2yd4SCKLM0JVBsCgAYZZzrnPP0eDRzXgfaCuPHXwuEYjRgmIBlQVVLl8/hKI4fRzz3L6uWe5+PMvnHz6aa4uX+D4yYe5vXaLH86eoyoLjLF476l9oKo9pi5HWONRX8E+YznOef7Vl1h86QWurlwjbc+QpikPPfoIcZLS39pmMikp8pzae6q6oqgriqrGqS+xeLScoMYSVJlfOMTl5RXW1+5w5fJVnFGWf1/mxEMnWPppiclkTLM5RdJoUBYFZVlQ5DnZMMMV167gixKLoXXsKGqnOHnqOJ/+/CfZ+XUiZ0jTmFv5mAvf/YjEliQ2vPD8Ir6qqEcZkzt38cMRo5WruFvfL9FqpyRxQhj0qLOax5I2S08+Tu/lFiGUGOPormxwuyfMnjrGrJa88uIixeYWl776lmrzNjmw8vcG8sU7ixpHMXFsCUVg9tABjEvRgzP82j7AhbyiX5Qcv2+Bvy7dYGZ1k7efeQB/Y4PBqGBtdYvb3SFzLcfqToZc/OB1zYeBSpUwLBlvjZidmWaSB1yaYOfn6LqI/r0hyU6P+cRSlhXjbEI2zvnt7y79oqQ3qeg4g6vKjCIXehtDmi6m0UnxVnCRkPUHVNt9qkLJxgXOCYNOg34v48raPaamU2o89/KKsQ9sTSpc0JK7NwdcX8s43Ek5cnSOLC/Z2R6Rj0ra0w2W1/t0xyWn51uk2Ri1QtSO6OU5d7OSi72cQeWxKG7p/Dp//JXTy6C1Pcbc6DMpPRtjTxChEznWhwVZUCKrjCrPoPDczHLmnLBdBgZlRRWUEBR3ZKrme5TlrTGlV440Y1IrXM9qQGi6mkG5V6uza7tUIeCDElTZ1L26elX+fcH/ACJBPYTJ4X8tAAAAAElFTkSuQmCC" height="20px" width="20px" x="10" y="10"></image>
</svg>
<hr/><br/>

IMAGE
<img/>
<hr/><br/>
   
CANVAS
<canvas></canvas>
<hr/><br/>

스 니펫 확장

— 헨리 케 캄포스
소스

1

글꼴과 마찬가지로 SVG에 포함되어야합니다. jsfiddle.net/ykx7kp8L/121

— Sphinxxx

1

의 img태그 를 반복 svg하고 나중에 캔버스에 이미지를 별도로 그릴 수 있습니다.

— luckydonald

24

다음과 같이 간단한을 svg캔버스에 쉽게 그릴 수 있습니다 .

svg의 소스를 base64 형식의 이미지에 지정
캔버스에 이미지 그리기

참고 : 이 방법의 유일한 단점은에 포함 된 이미지를 그릴 수 없다는 것 svg입니다. (데모 참조)

데모:

(포함 된 이미지는에서만 볼 수 있습니다. svg)

var svg = document.querySelector('svg');
var img = document.querySelector('img');
var canvas = document.querySelector('canvas');

// get svg data
var xml = new XMLSerializer().serializeToString(svg);

// make it base64
var svg64 = btoa(xml);
var b64Start = 'data:image/svg+xml;base64,';

// prepend a "header"
var image64 = b64Start + svg64;

// set it as the source of the img element
img.src = image64;

// draw the image onto the canvas
canvas.getContext('2d').drawImage(img, 0, 0);

svg, img, canvas {
  display: block;
}

SVG

<svg height="40">
  <rect width="40" height="40" style="fill:rgb(255,0,255);" />
  <image xlink:href="https://en.gravatar.com/userimage/16084558/1a38852cf33713b48da096c8dc72c338.png?size=20" height="20px" width="20px" x="10" y="10"></image>
</svg>
<hr/><br/>

IMAGE
<img/>
<hr/><br/>
   
CANVAS
<canvas></canvas>
<hr/><br/>

스 니펫 확장

— 마티아스
소스

2

언급 한 문제를 해결할 방법이 있습니까? svg에 포함 된 이미지.

— Vijay Baskaran

죄송하지만 포함 된 이미지 문제에 대한 해결책을 찾지 못했습니다.

— Matyas

괜찮아. 감사합니다 마 탸스 :

— 비제이 Baskaran

6

모질라라는 캔버스에 SVG를 그리기위한 간단한 방법이있다 " 그리기 DOM 캔버스에 개체 "

— 나티 크리스이
소스

이것은 @Simon의 첫 번째 방법과 같은 단점이 있습니다. Firefox, Chrome에서는 작동하지 않습니다.

— amergin

3

더 이상 링크가 작동하지 않습니다. 나는 아직도 모질라 방법에 관심이

— Alirezak

6

Simon이 위에서 말했듯이 drawImage를 사용하면 작동하지 않습니다. 그러나 canvg 라이브러리를 사용하여 다음을 수행하십시오 .

var c = document.getElementById('canvas');
var ctx = c.getContext('2d');
ctx.drawSvg(SVG_XML_OR_PATH_TO_SVG, dx, dy, dw, dh);

이것은 Simon이 위에서 제공 한 링크에서 비롯되었으며, 여기에는 canvg.js 및 rgbcolor.js에 링크하거나 다운로드하려는 여러 가지 제안 사항이 있습니다. 이를 통해 JavaScript 함수 내에서 URL을 통해 또는 svg 태그간에 인라인 SVG 코드를 사용하여 SVG를 조작하고로드 할 수 있습니다.

— 맥스 웨스트
소스

HTML5 캔버스에 SVG 파일 그리기

2019 년 12 월 16 일 수정

2014 년 11 월 5 일 수정

오래된 후손 답변 :

데모:

데모: