Bir SVG HTML5 tuval üzerine çizim dosyasını varsayılan bir yolu var mı? Google Chrome görüntü olarak SVG yükleme destekler (sadece drawImage kullanarak), ama geliştirici resource interpreted as image but transferred with MIME type image/svg xml warn konsol.

Bir ihtimal tuval komutları (this question) gibi SVG dönüştürmek olacağını biliyorum ama buna gerek yok diye umuyorum. Eski tarayıcılar FireFox 4 ve IE 9 destek olacak bir şey varsa, o kadar iyi yani () umurumda değil.

5 Kasım 2014 DÜZENLEYİN

Şimdi ctx.drawImage olan HTMLİmageElements çizmek için kullanabilirsiniz .svg kaynakama tüm tarayıcılar biraz. , İE11, Chrome ve Safari işine, Firefox bazı hatalar (ama gece onları sabit) ile çalışır.

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";

Live example here. Canvas yeşil bir kare görmelisiniz. Bu sayfada ikinci yeşil Kare <svg> aynı öğe başvurusu için DOM eklenir.

Ayrıca yeni Path2D nesneleri (dizi) SVG yollar çizmek için kullanabilirsinizsadece Chrome şu anda çalışır). Diğer bir deyişle, yazabilirsiniz:

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

Live example of that here.

Eski kuşaklar cevap:

Doğal olarak sağlayan yerel canvas SVG yolları kullanın bir şey yok. Kendini dönüştürmek ya da sizin için bunu yapmak için bir kütüphane kullanmanız gerekir.

İçinde canvg isteyen öneririm:

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

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