SVG ve HTML5 Canvas arasındaki farklar nelerdir? İkisi de bana aynı şeyi yapıyor gibi görünüyor. Temel olarak, her ikisi de koordinat noktalarını kullanarak vektör resmi çizerler.
Neyi kaçırıyorum? SVG ve HTML5 Canvas arasındaki temel farklar nelerdir? Neden birini diğerine tercih etmeliyim?
Yanıtlar:
Wikipedia'ya bakın: http://en.wikipedia.org/wiki/Canvas_element
SVG, tarayıcılarda şekil çizmek için daha eski bir standarttır. Bununla birlikte, SVG temelde daha yüksek bir seviyededir çünkü çizilen her şekil, daha sonra bir bit haritasına dönüştürülen bir sahne grafiğinde veya DOM'da bir nesne olarak hatırlanır. Bu, bir SVG nesnesinin nitelikleri değiştirilirse, tarayıcının sahneyi otomatik olarak yeniden oluşturabileceği anlamına gelir.
Yukarıdaki örnekte dikdörtgen çizildikten sonra çizildiği gerçeği sistem tarafından unutulmaktadır. Konumu değiştirilecekse, dikdörtgenin kapladığı nesneler de dahil olmak üzere tüm sahnenin yeniden çizilmesi gerekecektir. Ancak eşdeğer SVG durumunda, dikdörtgenin konum öznitelikleri basitçe değiştirilebilir ve tarayıcı onu nasıl yeniden boyayacağını belirler. Bir tuvali katmanlara boyamak ve ardından belirli katmanları yeniden oluşturmak da mümkündür.
SVG görüntüleri XML olarak temsil edilir ve karmaşık sahneler XML düzenleme araçlarıyla oluşturulabilir ve korunabilir.
SVG sahne grafiği, olay işleyicilerin nesnelerle ilişkilendirilmesini sağlar, böylece bir dikdörtgen bir onClick olayına yanıt verebilir. Kanvas ile aynı işlevselliği elde etmek için, tıklanıp tıklanmadığını belirlemek için fare tıklamasının koordinatlarını çizilen dikdörtgenin koordinatlarıyla manuel olarak eşleştirmeniz gerekir.
Kavramsal olarak, tuval, SVG'nin üzerine inşa edilebileceği daha düşük seviyeli bir protokoldür. [Kaynak belirtilmeli] Ancak, durum (normalde) bu değildir - bunlar bağımsız standartlardır. Durum karmaşıktır çünkü Canvas için sahne grafiği kitaplıkları vardır ve SVG'nin bazı bit eşlemi işleme işlevleri vardır.
GÜNCELLEME: Biçimlendirme dili yetenekleri nedeniyle SVG kullanıyorum - XSLT tarafından işlenebilir ve düğümlerinde başka biçimlendirmeleri tutabilir. Benzer şekilde, işaretlememde (kimya) SVG tutabilirim. Bu, işaretleme kombinasyonlarıyla SVG özniteliklerini (ör. Oluşturma) değiştirmeme izin veriyor. Bu Canvas'ta mümkün olabilir ama bunun çok daha zor olduğundan şüpheleniyorum.
SVG, bir "çizim" programı gibidir. Çizim, her şekil için çizim talimatları olarak belirtilir ve herhangi bir şeklin herhangi bir parçası değiştirilebilir. Çizimler şekil odaklıdır.
Canvas bir "boyama" programı gibidir. Pikseller ekrana geldiğinde, bu sizin çiziminizdir. Şekillerin üzerine başka pikseller yazmak dışında şekilleri değiştiremezsiniz. Resimler piksel odaklıdır.
Çizimleri değiştirebilmek bazı programlar için çok önemlidir; örneğin uygulama taslağı oluşturma, diyagram oluşturma araçları vb. Yani SVG'nin burada bir avantajı var.
Ayrı pikselleri kontrol edebilmek, bazı sanatsal programlar için önemlidir.
Mouse ile sürükleyerek kullanıcı manipülasyonu için harika animasyon performansı elde etmek, Canvas ile SVG'den daha kolaydır.
Bilgisayar ekranındaki tek bir piksel genellikle 4 bayt bilgi tüketir ve bu günlerde bir bilgisayar ekranı birkaç megabayt alır. Bu nedenle, kullanıcının bir görüntüyü düzenlemesine ve ardından yeniden yüklemesine izin vermek istiyorsanız Canvas uygun olmayabilir.
Bunun aksine, SVG kullanarak tüm ekranı kaplayan bir avuç şekil çizmek birkaç bayt alır, hızlı bir şekilde indirilir ve diğer yöne geldiğinde aynı avantajlarla tekrar kolayca yüklenebilir. Yani SVG, Canvas'tan daha hızlı olabilir.
Google, Google Haritalar'ı SVG ile uyguladı. Bu, web uygulamasına hızlı bir performans ve sorunsuz kaydırma sağlar.
Yüksek Düzeyde Canvas - SVG Özeti
Tuval
SVG
Ayrıntılı fark için http://msdn.microsoft.com/en-us/library/ie/gg193983(v=vs.85).aspx okuyun
Onların ne oldukları ve sizin için yaptıkları arasında bir fark var.
API'ye karşı format konusunda biraz ayrıntı vermek gerekirse:
Svg ile dosyayı birçok farklı araçta görüntüleyebilir, kaydedebilir ve düzenleyebilirsiniz. Kanvas ile sadece çizersiniz ve ekranda ortaya çıkan görüntüden başka ne yaptığınızla ilgili hiçbir şey tutulmaz. Her ikisini de canlandırabilirsiniz, SVG yeniden çizimi sizin için yalnızca belirtilen öğelere ve özniteliklere bakarak gerçekleştirirken, tuval ile her çerçeveyi API'yi kullanarak kendiniz yeniden çizmeniz gerekir. Her ikisini de ölçekleyebilirsiniz, ancak SVG bunu otomatik olarak yapar, yine canvas ile verilen boyut için çizim komutlarını yeniden yayınlamanız gerekir.
SVG ve Canvas için beni en çok etkileyen iki şey şunlardı:
Canvas'ı DOM olmadan kullanabilme özelliği, SVG'nin büyük ölçüde DOM'a bağlı olduğu ve karmaşıklık arttıkça performans yavaşlar. Oyun tasarımında olduğu gibi.
SVG kullanmanın avantajı, çözünürlüğün Canvas'ta bulunmayan platformlarda aynı kalmasıdır.
Bu sitede çok daha fazla ayrıntı verilmektedir. http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/
Kesinlikle ihtiyacınıza / ihtiyacınıza bağlıdır.
Bir ekranda sadece bir resim / grafik göstermek istiyorsanız, önerilen yaklaşım tuvaldir. (Örnek PNG, GIF, BMP vb.)
Grafiklerinizin özelliklerini genişletmek istiyorsanız, örneğin fareyi grafik üzerinde görüntü kalitesini bozmadan belirli bir alanı yakınlaştırmak istiyorsanız, SVG'yi seçersiniz. (İyi bir örnek AutoCAD, Visio, GIS dosyalarıdır).
Şekil konektörlü dinamik bir akış diyagramı oluşturma aracı oluşturmak istiyorsanız, CANVAS yerine SVG'yi seçmek daha iyidir.
Ekranın boyutu arttığında, daha fazla pikselin çizilmesi gerektiğinden kanvas bozulmaya başlar.
Ekrandaki nesnelerin sayısı arttığında,
biz onları sürekli olarak DOM'a eklediğimiz için SVG düşmeye başlar .
Ayrıca lütfen şu adrese bakın: http://msdn.microsoft.com/en-us/library/gg193983(v=vs.85).aspx
SVG
Kullanım durumuna bağlı olarak SVG, logolar ve çizelgeler için kullanılır, çünkü çizdiğiniz ve unuttuğunuz vektör grafikleri. Görüntü bağlantı noktası yeniden boyutlandırma (veya yakınlaştırma) gibi değiştiğinde, kendini ayarlayacak ve yeniden çizmeye gerek kalmayacaktır.
Tuval
Tuval, piksellerin ekrana boyanmasıyla yapılan bitmaptir (veya rasterdir). Belirli bir alanda oyun veya grafik deneyimi ( https://www.chromeexperiments.com/webgl ) geliştirmek için kullanılır, piksel boyar ve başka bir alanı yeniden çizerek değişir. Bir raster türü olduğu için, görünüm portu değiştikçe tamamen yeniden çizmemiz gerekiyor.
Referans
http://www.sitepoint.com/7-reasons-to-consider-svgs-instead-of-canvas
http://en.wikipedia.org/wiki/WebGL
http://vector-conversions.com/vectorizing/raster_vs_vector.html
SVGbir dosya formatı gibi bir çizimin özelliğidir. SVG bir belgedir. SVG dosyalarını HTML dosyaları gibi değiş tokuş edebilirsiniz. Ayrıca, SVG öğeleri ve HTML öğeleri aynı DOM API'sini paylaştığından, bir HTML DOM oluşturmakla aynı şekilde bir SVG DOM oluşturmak için JavaScript kullanmak da mümkündür. Ancak SVG dosyası oluşturmak için JavaScript'e ihtiyacınız yoktur. SVG yazmak için basit bir metin editörü yeterlidir. Ancak çizimdeki şekillerin koordinatlarını hesaplamak için en azından bir hesap makinesine ihtiyacınız var.
CANVASsadece bir çizim alanıdır. Bir tuvalin içeriğini oluşturmak için JavaScript kullanmak gerekir. Bir tuvali değiştiremezsiniz. Belge değil. Ve tuvalin öğeleri DOM ağacının bir parçası değildir. Bir tuvalin içeriğini değiştirmek için DOM API'yi kullanamazsınız. Bunun yerine, tuvale şekiller çizmek için özel bir tuval API'si kullanmanız gerekir.
A'nın avantajı SVG, çizimi bir belge olarak değiştirebilmenizdir. Bunun avantajı CANVAS, içeriği oluşturmak için daha az ayrıntılı bir JavaScript API'sine sahip olmasıdır.
İşte benzer sonuçlar elde edebileceğinizi gösteren bir örnek, ancak bunu JavaScript'te nasıl yapacağınız çok farklı.
// Italic S in SVG
(function () {
const ns='http://www.w3.org/2000/svg';
let s = document.querySelector('svg');
let p = document.createElementNS (ns, 'path');
p.setAttribute ('id', 'arc');
p.setAttribute ('d', 'M 0.9 -0.9 a 0.8,0.4 -10 0,0 -0.9,0.9');
s.appendChild (p);
let u = document.createElementNS (ns, 'use');
u.setAttribute ('href', '#arc');
u.setAttribute ('transform', 'rotate(180)');
s.appendChild (u);
})();
// Italic S in CANVAS
(function () {
let c = document.querySelector('canvas');
let w = c.width = c.clientWidth;
let h = c.height = c.clientHeight;
let x = c.getContext('2d');
x.lineWidth = 0.05 * w;
x.moveTo (w/2, h/2);
x.bezierCurveTo (w*0.02, h*0.4,
w*0.4, -h*0.02,
w*0.95, h*0.05);
x.moveTo (w/2, h/2);
x.bezierCurveTo (w*(1-0.02), h*(1-0.4),
w*(1-0.4), h*(1+0.02),
w*(1-0.95), h*(1-0.05));
x.stroke();
})();svg, canvas {
width: 3em;
height: 3em;
}
svg {
vertical-align: text-top;
stroke: black;
stroke-width: 0.1;
fill: none;
}
canvas {
vertical-align: text-bottom;
}
div {
float: left;
}<div><svg viewBox="-1 -1 2 2"></svg>VG</div>
<div>CANVA<canvas></canvas></div>Gördüğünüz gibi sonuç hemen hemen aynı, ancak JavaScript kodu tamamen farklı.
SVG createElement, setAttributeve kullanılarak DOM API ile oluşturulur appendChild. Tüm grafikler öznitelik dizelerindedir. SVG'nin daha güçlü ilkelleri vardır. Örneğin, CANVAS'ın SVG ark yoluna eşdeğer hiçbir şeyi yoktur. CANVAS örneği, SVG yayını Bezier eğrisiyle taklit etmeye çalışır. SVG'de öğeleri dönüştürmek için yeniden kullanabilirsiniz. CANVAS'ta öğeleri yeniden kullanamazsınız. Bunun yerine, onu iki kez çağırmak için bir JavaScript işlevi yazmanız gerekir. SVG'de, viewBoxdönüşleri basitleştiren normalleştirilmiş koordinatların kullanılmasına izin veren bir vardır. CANVAS size kendiniz dayalı koordinatlarını hesaplamak zorunda clientWidthveclientHeight. Ve tüm SVG öğelerini CSS ile biçimlendirebilirsiniz. CANVAS'ta CSS ile hiçbir şeye stil veremezsiniz. SVG bir DOM olduğundan, tüm SVG öğelerine olay işleyicileri atayabilirsiniz. CANVAS'taki öğelerin DOM'si ve DOM olay işleyicisi yoktur.
Ancak diğer yandan CANVAS kodunun okunması çok daha kolaydır. XML isim boşluklarını önemsemenize gerek yok. Ve bir DOM oluşturmanıza gerek olmadığı için grafik işlevlerini doğrudan çağırabilirsiniz.
Ders açık: Hızlı bir şekilde bazı grafikler çizmek istiyorsanız, CANVAS'ı kullanın. Grafikleri CSS ile stil vermek gibi paylaşmanız gerekiyorsa veya grafiklerinizde DOM olay işleyicileri kullanmak istiyorsanız, bir SVG oluşturun.
yukarıdaki noktalara ekleyerek:
SVG, JPEG, GIF vb. İle karşılaştırıldığında web üzerinden aktarım için hafiftir ve ayrıca, Kaliteyi kaybetmeden yeniden boyutlandırıldığında son derece ölçeklenir.
SVG
Nesne Modeli tabanlıdır.
Geniş işleme alanları kullanmak için uygundur.
SVG, olay işleyicileri için her türlü desteği sağlar.
Değişikliğe komut dosyası ve CSS aracılığıyla izin verilir.
SVG'nin daha iyi ölçeklenebilirliği vardır
SVG, Vektör tabanlıdır (şekillerden oluşur).
SVG, Oyunlar grafikleri için uygun değildir. SVG, çözünürlüğe bağlı değildir.
SVG, API animasyonu için uygundur.
SVG, yüksek kalitede ve her türlü çözünürlükte baskı için uygundur.
Tuval öğeleri
Piksel tabanlıdır.
Küçük render kullanmak için uygundur
Canvas, olay işleyiciler için herhangi bir başvuru sağlamaz.
Değişikliğe yalnızca komut dosyası aracılığıyla izin verilir.
Tuvalin ölçeklenebilirliği zayıf.
Kanvas, Raster tabanlıdır (bir pikselden oluşur).
Kanvas, oyun grafikleri için uygundur.
Tuval tamamen çözünürlüğe bağlıdır.
Canvas'ın animasyon için herhangi bir API'si yoktur.
Kanvas, yüksek kaliteli ve yüksek çözünürlüklü baskıya uygun değildir.