Quali sono le differenze tra SVG e HTML5 Canvas? Entrambi sembrano fare lo stesso con me. Fondamentalmente, entrambi disegnano grafica vettoriale utilizzando punti di coordinate.
Cosa mi sto perdendo? Quali sono le principali differenze tra SVG e HTML5 Canvas? Perché dovrei sceglierne uno piuttosto che l'altro?
Risposte:
Vedi Wikipedia: http://en.wikipedia.org/wiki/Canvas_element
SVG è uno standard precedente per disegnare forme nei browser. Tuttavia, SVG è a un livello fondamentalmente più alto perché ogni forma disegnata viene ricordata come un oggetto in un grafico di scena o DOM, che viene successivamente renderizzato su una mappa di bit. Ciò significa che se gli attributi di un oggetto SVG vengono modificati, il browser può automaticamente rieseguire il rendering della scena.
Nell'esempio sopra, una volta disegnato il rettangolo, il fatto che sia stato disegnato viene dimenticato dal sistema. Se la sua posizione dovesse essere cambiata, l'intera scena dovrebbe essere ridisegnata, compresi gli oggetti che potrebbero essere stati coperti dal rettangolo. Ma nel caso SVG equivalente, si potrebbero semplicemente cambiare gli attributi di posizione del rettangolo e il browser determinerebbe come ridipingerlo. È anche possibile dipingere una tela a strati e quindi ricreare strati specifici.
Le immagini SVG sono rappresentate in XML e le scene complesse possono essere create e gestite con strumenti di modifica XML.
Il grafico della scena SVG consente ai gestori di eventi di essere associati agli oggetti, quindi un rettangolo può rispondere a un evento onClick. Per ottenere la stessa funzionalità con la tela, è necessario abbinare manualmente le coordinate del clic del mouse con le coordinate del rettangolo disegnato per determinare se è stato cliccato.
Concettualmente, canvas è un protocollo di livello inferiore su cui SVG potrebbe essere costruito. [Citazione necessaria] Tuttavia, questo non è (normalmente) il caso: sono standard indipendenti. La situazione è complicata perché ci sono librerie di grafici di scene per Canvas e SVG ha alcune funzionalità di manipolazione delle bit map.
AGGIORNAMENTO: Uso SVG per le sue capacità di linguaggio di markup: può essere elaborato da XSLT e può contenere altri markup nei suoi nodi. Allo stesso modo posso tenere SVG nel mio markup (chimica). Questo mi consente di manipolare gli attributi SVG (ad esempio il rendering) mediante combinazioni di markup. Questo potrebbe essere possibile in Canvas, ma sospetto che sia molto più difficile.
SVG è come un programma di "disegno". Il disegno è specificato come istruzioni di disegno per ciascuna forma e qualsiasi parte di qualsiasi forma può essere modificata. I disegni sono orientati alla forma.
Canvas è come un programma di "pittura". Una volta che i pixel colpiscono lo schermo, questo è il tuo disegno. Non è possibile modificare le forme se non sovrascrivendole con altri pixel. I dipinti sono orientati ai pixel.
La possibilità di modificare i disegni è molto importante per alcuni programmi; es. disegnare app, strumenti per la creazione di diagrammi, ecc. Quindi SVG ha un vantaggio qui.
Essere in grado di controllare i singoli pixel è importante per alcuni programmi artistici.
Ottenere ottime prestazioni di animazione per la manipolazione da parte dell'utente tramite trascinamento del mouse è più facile con Canvas che con SVG.
Un singolo pixel sullo schermo del computer consumerà spesso 4 byte di informazioni e lo schermo di un computer in questi giorni richiede diversi megabyte. Quindi Canvas potrebbe essere scomodo se si desidera consentire all'utente di modificare un'immagine e quindi caricarla di nuovo.
Al contrario, disegnare una manciata di forme che coprono l'intero schermo utilizzando SVG richiede pochi byte, si scarica rapidamente e può essere caricato di nuovo facilmente con gli stessi vantaggi in quella direzione come quando scende nell'altra direzione. Quindi SVG può essere più veloce di Canvas.
Google ha implementato Google Maps con SVG. Ciò conferisce all'app Web le sue prestazioni scattanti e lo scorrimento fluido.
Riepilogo di alto livello di Canvas vs. SVG
Tela
SVG
Per la differenza dettagliata, leggi http://msdn.microsoft.com/en-us/library/ie/gg193983(v=vs.85).aspx
C'è una differenza in quello che sono e in quello che fanno per te.
Per elaborare un po ', sul formato rispetto all'API:
Con svg puoi visualizzare, salvare e modificare il file in molti strumenti diversi. Con la tela devi semplicemente disegnare e nulla viene mantenuto di ciò che hai appena fatto a parte l'immagine risultante sullo schermo. Puoi animare entrambi, SVG gestisce il ridisegno per te semplicemente guardando gli elementi e gli attributi specificati, mentre con il canvas devi ridisegnare ogni frame tu stesso usando l'API. Puoi ridimensionare entrambi, ma SVG lo fa automaticamente, mentre con la tela di nuovo, devi emettere nuovamente i comandi di disegno per la dimensione data.
Due cose che mi hanno colpito di più per SVG e Canvas sono state,
Possibilità di utilizzare Canvas senza DOM, dove SVG dipende fortemente da DOM e all'aumentare della complessità le prestazioni rallentano. Come nel game design.
Il vantaggio dell'utilizzo di SVG sarebbe che la risoluzione rimane la stessa su tutte le piattaforme che mancano in Canvas.
Molti più dettagli sono forniti in questo sito. http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/
Dipende assolutamente dalle tue necessità / requisiti.
Se vuoi solo mostrare un'immagine / un grafico su uno schermo, l'approccio consigliato è il canvas. (L'esempio è PNG, GIF, BMP ecc.)
Se desideri estendere le funzionalità della tua grafica, ad esempio se passi il mouse sul grafico per ingrandire una determinata area senza compromettere la qualità di visualizzazione, seleziona SVG. (Un buon esempio è AutoCAD, Visio, file GIS).
Se vuoi creare uno strumento per la creazione di diagrammi di flusso dinamico con connettore di forma, è meglio selezionare SVG piuttosto che CANVAS.
Quando le dimensioni dello schermo aumentano, la tela inizia a deteriorarsi poiché è necessario disegnare più pixel.
Quando il numero di oggetti sullo schermo aumenta, SVG inizia a
diminuire poiché vengono continuamente aggiunti al DOM.
Fare inoltre riferimento a: http://msdn.microsoft.com/en-us/library/gg193983(v=vs.85).aspx
SVG
In base al caso d'uso SVG viene utilizzato per i loghi, i grafici perché la sua grafica vettoriale si disegna e se ne dimentica. Quando la porta di visualizzazione cambia come il ridimensionamento (o lo zoom) si adatterà da sola e non sarà necessario ridisegnare.
Tela
La tela è bitmap (o raster) realizzata dipingendo i pixel sullo schermo. Viene utilizzato per sviluppare giochi o esperienza grafica ( https://www.chromeexperiments.com/webgl ) in una determinata area dipinge pixel e cambia ridisegnandone un altro. Dato che è di tipo raster, dobbiamo ridisegnare completamente quando cambia la porta di visualizzazione.
Riferimento
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
SVGè una specifica di un disegno come un formato di file. Un SVG è un documento. Puoi scambiare file SVG come file HTML. Inoltre, poiché gli elementi SVG e gli elementi HTML condividono la stessa API DOM, è possibile utilizzare JavaScript per generare un DOM SVG nello stesso modo in cui è possibile creare un DOM HTML. Ma non è necessario JavaScript per generare il file SVG. Un semplice editor di testo è sufficiente per scrivere un SVG. Ma hai bisogno almeno di una calcolatrice per calcolare le coordinate delle forme nel disegno.
CANVASè solo un'area di disegno. È necessario utilizzare JavaScript per generare i contenuti di una tela. Non puoi scambiare una tela. Non è un documento. E gli elementi della tela non fanno parte dell'albero DOM. Non è possibile utilizzare l'API DOM per manipolare il contenuto di una tela. Invece devi usare un'API canvas dedicata per disegnare forme nella tela.
Il vantaggio di a SVGè che puoi scambiare il disegno come documento. Il vantaggio diCANVAS è che ha un'API JavaScript meno dettagliata per generare i contenuti.
Ecco un esempio, che mostra che puoi ottenere risultati simili, ma il modo in cui farlo in JavaScript è molto diverso.
// 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>Come puoi vedere il risultato è quasi lo stesso, ma il codice JavaScript è completamente diverso.
SVG viene creato con l'API DOM utilizzando createElement, setAttributee appendChild. Tutti gli elementi grafici sono nelle stringhe degli attributi. SVG ha primitive più potenti. La CANVAS, ad esempio, non ha nulla di equivalente al percorso dell'arco SVG. L'esempio CANVAS cerca di emulare l'arco SVG con una curva di Bézier. In SVG puoi riutilizzare gli elementi per trasformarli. Nella TELA non puoi riutilizzare gli elementi. Invece devi scrivere una funzione JavaScript per chiamarla due volte. SVG ha una viewBoxche consente di utilizzare coordinate normalizzate, che semplifica le rotazioni. Nella TELA devi calcolare tu stesso le coordinate in base a clientWidtheclientHeight. E puoi modellare tutti gli elementi SVG con CSS. In CANVAS non puoi modellare nulla con i CSS. Poiché SVG è un DOM, puoi assegnare gestori di eventi a tutti gli elementi SVG. Gli elementi in CANVAS non hanno DOM e nessun gestore di eventi DOM.
Ma d'altra parte il codice CANVAS è molto più facile da leggere. Non è necessario preoccuparsi degli spazi dei nomi XML. E puoi chiamare direttamente le funzioni grafiche, perché non è necessario creare un DOM.
La lezione è chiara: se vuoi disegnare velocemente dei grafici, usa la TELA. Se hai bisogno di condividere la grafica, ti piace modellarla con CSS o vuoi usare i gestori di eventi DOM nella tua grafica, crea un SVG.
aggiungendo ai punti precedenti:
SVG è leggero per il trasferimento sul web rispetto a JPEG, GIF ecc. E si ridimensiona anche in modo estremamente ridotto quando viene ridimensionato senza perdere la qualità.
SVG
È basato sul modello a oggetti.
È adatto per l'utilizzo di ampie aree di rendering.
SVG fornisce qualsiasi supporto per i gestori di eventi.
La modifica è consentita tramite script e CSS.
SVG ha una migliore scalabilità
SVG è basato su vettori (composto da forme).
SVG non è adatto per la grafica dei giochi. SVG non dipende dalla risoluzione.
SVG è in grado di animare le API.
SVG è adatto per la stampa con alta qualità e qualsiasi risoluzione.
Elementi della tela
È basato sui pixel.
È adatto per l'utilizzo di piccoli rendering
Canvas non fornisce alcun ricorso per i gestori di eventi.
La modifica è consentita solo tramite script.
Canvas ha una scarsa scalabilità.
Canvas è basato su Raster (composto da un pixel).
Canvas è adatto per la grafica dei giochi.
La tela dipende completamente dalla risoluzione.
Canvas non ha API per l'animazione.
La tela non è adatta per la stampa di alta qualità e alta risoluzione.