Canvas vs SVG: Kies de juiste tool voor de klus

HTML5 Canvas en SVG zijn beide standaardgebaseerde HTML5-technologieën die u kunt gebruiken om geweldige grafische en visuele ervaringen te creëren. De vraag die ik in dit artikel stel is de volgende: Zou het uitmaken welke je gebruikt in je project? Met andere woorden, zijn er bepaalde gebruiksscenario’s waarin HTML5 Canvas boven SVG wordt bevoordeeld?

Laten we eerst even kort inleiden over HTML5 Canvas en SVG.

Wat is HTML5 Canvas?

Hier is hoe de WHATWG-specificatie de canvas-element introduceert:

Het canvas-element biedt scripts een afhankelijk bitmap canvas van de resolutie, dat kan worden gebruikt voor het renderen van grafieken, spelgraphics, kunst of andere visuele beelden op het moment zelf.

Met andere woorden, het <canvas>-tag biedt een oppervlak waarop je rasterafbeeldingen pixel voor pixel kunt creëren en manipuleren met behulp van een JavaScript programmeerinterface.

Hier is een eenvoudig codevoorbeeld:

De HTML:

<canvas id="myCanvas" width="800" height="800"></canvas>

De JavaScript:

const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');
context.fillStyle = '#c00';
context.fillRect(10, 10, 100, 100);

U kunt de methoden en eigenschappen van de HTML5 Canvas API benutten door een referentie naar het 2D contextobject te krijgen. In het bovenstaande voorbeeld heb ik een eenvoudig rood vierkant getekend, 100 x 100 pixels groot, geplaatst 10px vanaf de linkerkant en 10px vanaf de bovenkant van het <canvas> tekenoppervlak.

Zijn afhankelijk van resolutie, kunnen afbeeldingen die je maakt op <canvas> kwaliteitsverlies ondervinden bij vergroting of weergave op Retina-displays.

Het tekenen van eenvoudige vormen is slechts de spits van de ijsberg. De HTML5 Canvas API stelt je in staat om bogen, paden, tekst, gradiënten, enz. te tekenen. Je kunt ook je afbeeldingen pixel voor pixel manipuleren. Dit betekent dat je in bepaalde gebieden van de graphics een kleur kunt vervangen door een andere, je kunt je tekeningen animeren en zelfs een video op het canvas tekenen en zijn uiterlijk wijzigen.

Wat Is SVG?

SVG staat voor Scalable Vector Graphics. Volgens de specificatie:

SVG is een taal voor het beschrijven van tweedimensionale graphics. Als een zelfstandig formaat of wanneer gemengd met ander XML, gebruikt het de XML-syntax. Wanneer gemengd met HTML5, gebruikt het de HTML5-syntax. …

SVG-tekeningen kunnen interactief en dynamisch zijn. Animaties kunnen opgegeven en geactiveerd worden zowel declaratief (dat wil zeggen, door SVG-animatie-elementen in SVG-inhoud te embedden) als via scripting.

SVG is een XML-bestandsindeling ontworpen om vectorgraphics te creëren. Het feit dat het schaalbaar is, heeft het voordeel dat je een vectorafbeelding kunt vergroten of verkleinen terwijl de scherpte en hoge kwaliteit behouden blijft. (Dit kan niet worden gedaan met HTML5 Canvas-gegenereerde afbeeldingen.)

Hier is dezelfde rode vierkant (eerder gemaakt met HTML5 Canvas) deze keer getekend met SVG:

<svg xmlns="https://www.w3.org/2000/svg" viewbox="0 0 600 600">
  <desc>Red rectangle shape</desc>
  <rect x="10" y="10" width="100" height="100" fill="#c00"  />  
</svg>

Je kunt met SVG het meeste doen wat je ook met Canvas kunt doen – zoals het tekenen van vormen en paden, gradiënten, patronen, animatie, enzovoort. Echter werken deze twee technologieën fundamenteel anders. Anders dan een Canvas-gebaseerde afbeelding heeft SVG een DOM en daarom hebben zowel CSS als JavaScript toegang tot het. Je kunt bijvoorbeeld het uiterlijk van een SVG-afbeelding wijzigen met CSS, de knooppunten ermee animeren met CSS of JavaScript, en elk deel laten reageren op een muis- of toetsenbordgebeurtenis zoals een <div>. Het zal duidelijker worden in de volgende secties dat dit verschil een belangrijke rol speelt wanneer je moet kiezen tussen Canvas en SVG voor je volgende project.

Directe en Behouden Modus

Het is cruciaal om onderscheid te maken tussen directe modus en behoudende modus. HTML5 Canvas is een voorbeeld van de eerste, SVG van de laatste.

Directe modus betekent dat, zodra je tekening op het canvas staat, het canvas stopt met het bijhouden ervan. Met andere woorden, jij als ontwikkelaar, moet de opdrachten voor het tekenen van objecten uitwerken, het model of de scène van hoe het eindresultaat eruit moet zien creëren en onderhouden, en aangeven wat moet worden bijgewerkt. De Graphics API van de browser communiceert gewoon je tekenopdrachten naar de browser, die ze vervolgens uitvoert.

SVG gebruikt de behoudende aanpak, waarbij je gewoon je tekeninginstructies geeft van wat je op het scherm wilt weergeven, en de Graphics API van de browser een in-memory model of scène van de uiteindelijke output creëert en dit vertaalt in tekeningcommando’s voor je browser.

Als een directe grafische systeem, Canvas heeft geen DOM, of Document Object Model. Met Canvas teken je je pixels en vergeet het systeem alles over hen, waardoor er minder extra geheugen nodig is om een interne model van je tekening te onderhouden. Met SVG wordt elk object dat je tekent toegevoegd aan het interne model van de browser, wat je leven als ontwikkelaar enigszins vergemakkelijkt, maar met enkele kosten in termen van prestaties.

Op basis van het onderscheid tussen directe en behouden modus, evenals andere specifieke kenmerken van Canvas en SVG respectievelijk, is het mogelijk om enkele gevallen te omschrijven waarin het gebruik van de ene technologie boven de andere je projectdoelen beter zou kunnen dienen.

HTML5 Canvas: Voordelen en Nadelen

De HTML5 Canvas specificatie raadt duidelijk aan dat auteurs niet de <canvas> element moeten gebruiken waar ze andere meer geschikte middelen tot hun beschikking hebben.

Bijvoorbeeld, voor een grafisch rijk <header> element, zijn de beste tools HTML en CSS, niet <canvas> (en evenmin is SVG, trouwens). Dr. Abstract, maker en oprichter van het Zim JS canvas framework, bevestigt deze mening zoals hij schrijft:

De DOM en de DOM-frameworks zijn goed in het weergeven van informatie, met name tekstinformatie. In vergelijking is de canvas een afbeelding. Tekst kan aan de canvas worden toegevoegd en deze kan responsief worden gemaakt, maar de tekst kan niet gemakkelijk worden geselecteerd of doorzocht zoals op de DOM. Lange, scrollende pagina’s met tekst of tekst en afbeeldingen zijn een uitstekende toepassing van de DOM. De DOM is geweldig voor social media sites, forums, winkelen en alle informatie-apps waar we aan gewend zijn. — “Wanneer gebruik je een JavaScript Canvas-bibliotheek of -framework”

Dus, dat is een duidelijk voorbeeld van wanneer niet te gebruiken <canvas>. Maar wanneer is <canvas> een goede optie?

Deze tweet van Sarah Drasner geeft een overzicht van enkele belangrijke voor- en nadelen van canvas-functies en -mogelijkheden, die ons kan helpen enkele gebruiksvoorbeelden voor deze krachtige technologie te ontwikkelen:

I had this slide in a lot of talks and workshops over the years: pic.twitter.com/4K0C7mNzg2

— Sarah Drasner (@sarah_edo) October 2, 2019

U kunt de afbeelding uit de tweet bekijken hier.

Voor wat is HTML5 Canvas geweldig

Alvin Wan heeft Canvas en SVG gemeten in termen van prestaties, zowel in relatie tot het aantal objecten dat wordt getekend als in relatie tot de grootte van de objecten of de canvas zelf. Hij geeft zijn resultaten als volgt weer:

Samenvatting, de overhead van DOM-weergave is duidelijker wanneer honderden, zo niet duizenden objecten worden gewisseld; in dit scenario is Canvas de duidelijke winnaar. Beide Canvas en SVG zijn echter onveranderlijk voor objectgroottes. Gezien het eindcijfer biedt Canvas een duidelijke overwinning op prestaties.

Tekenen op wat we weten over Canvas, met name zijn uitstekende prestaties bij het tekenen van veel objecten, hier zijn enkele mogelijke scenario’s waarin het geschikt zou kunnen zijn, en zelfs de voorkeur boven SVG.

Games en Generatieve Kunst

Voor grafisch intensieve, zeer interactieve games, evenals voor generatieve kunst, is Canvas over het algemeen de manier om te gaan.

Ray Tracing

Ray tracing is een techniek voor het creëren van 3D-graphics.

Ray tracing kan worden gebruikt om een afbeelding te hydrateren door het pad van licht door pixels in een afbeeldingsvlak te volgen en de effecten van zijn ontmoetingen met virtuele objecten te simuleren. … De effecten bereikt door ray tracing, … variëren van … het creëren van realistische afbeeldingen uit anders eenvoudige vectorgraphics tot het toepassen van fotolike filters om rode ogen te verwijderen. — SVG vs Canvas: hoe te kiezen, Microsoft Docs.

Als je nieuwsgierig bent, hier is een raytracer-applicatie in actie door Mark Webster.

Echter, hoewel HTML5 Canvas zeker beter geschikt is voor deze taak dan SVG ooit zou kunnen zijn, volgt niet per se dat ray tracing het beste wordt uitgevoerd op een <canvas> element. Sterker nog, de belasting op de CPU kan aanzienlijk zijn, tot het punt dat je browser niet meer reageert.

Het tekenen van een groot aantal objecten op een kleine oppervlakte

Een ander voorbeeld is een situatie waarin je applicatie een aanzienlijk aantal objecten moet tekenen op een relatief klein oppervlak – zoals niet-interactieve real-time gegevensvisualisaties, zoals grafische weergaven van weervolgorden.

Het bovenstaande beeld is afkomstig uit dit MSDN artikel, dat deel uitmaakte van mijn onderzoek voor dit stuk.

Pixelvervanging in video’s

Zoals getoond in dit HTML5 Doctor artikel, is nog een voorbeeld waar Canvas geschikt zou zijn, wanneer de achtergrondkleur van een video wordt vervangen door een andere kleur, een ander scherm of een afbeelding.

Waar HTML5 Canvas niet zo geweldig voor is

Aan de andere kant zijn er een aantal gevallen waarin Canvas misschien niet de beste keuze is in vergelijking met SVG.

Schaalbaarheid

De meeste scenario’s waarin schaalbaarheid een pluspunt is, zijn beter afgehandeld met SVG’s in plaats van Canvas. Hoogwaardige, complexe afbeeldingen zoals bouw- en ingenieursdiagrammen, organogrammen, biologische diagrammen, enzovoort, zijn voorbeelden hiervan.

Wanneer ze worden getekend met SVG, behoudt het vergroten van de afbeeldingen of het afdrukken van ze alle details op een hoog niveau van kwaliteit. U kunt deze documenten ook genereren uit een database, wat de XML-indeling van SVG zeer geschikt maakt voor deze taak.

Bovendien zijn deze afbeeldingen vaak interactief. Denk bijvoorbeeld aan stoelkaarten bij het boeken van uw vliegticket online, wat ze een geweldige gebruikscase maakt voor een behouden graphicsysteem zoals SVG.

Dat gezegd hebbende, met behulp van fantastische bibliotheken zoals CreateJS en Zim (die CreateJS uitbreidt), kunnen ontwikkelaars relatief snel muisevenementen, hit tests, multitouchgebaren, sleep-en-dropmogelijkheden, bedieningselementen en meer integreren in hun Canvas-gebaseerde creaties.

Toegankelijkheid

Hoewel er stappen kunnen worden genomen om een Canvas-afbeelding toegankelijker te makentoegankelijk — en een goede Canvas-bibliotheek zoals Zim hier misschien behulpzaam is om het proces te versnellen — schiet Canvas op het gebied van toegankelijkheid niet echt tekort. Wat u op het canvas-oppervlak tekent, is gewoon een stel pixels, die niet kunnen worden gelezen of geïnterpreteerd door hulptechnologieën of zoekmachine robots. Dit is een ander gebied waar SVG de voorkeur heeft: SVG is gewoon XML, wat het leesbaar maakt voor zowel mensen als machines.

Geen afhankelijkheid van JavaScript

Als je geen JavaScript in je applicatie wilt gebruiken, dan is Canvas niet je beste vriend. Sterker nog, de enige manier om te werken met het <canvas> element is met JavaScript. Omgekeerd kun je SVG-graphics tekenen met behulp van een standaard vectorbewerkingsprogramma zoals Adobe Illustrator of Inkscape, en kun je puur CSS gebruiken om hun uiterlijk te beheersen en indrukwekkende, subtiele animaties en microinteracties uit te voeren.

Combination HTML5 Canvas en SVG voor geavanceerde scenario’s

Er zijn gevallen waarin je applicatie het beste van beide werelden kan krijgen door HTML5 Canvas en SVG te combineren. Bijvoorbeeld, een Canvas-gebaseerd spel zou sprites kunnen implementeren van SVG-afbeeldingen gegenereerd door een vectorbewerkingsprogramma, om te profiteren van de schaalbaarheid en de verkleinde downloadgrootte in vergelijking met een PNG-afbeelding. Of een tekenprogramma zou zijn gebruikersinterface kunnen ontwerpen met behulp van SVG, met een ingesloten <canvas> element, dat kan worden gebruikt voor tekenen.

Ten slotte maakt een krachtige bibliotheek zoals Paper.js het mogelijk om vectorgraphics te scripten bovenop HTML5 Canvas, waardoor ontwikkelaars een handige manier hebben om beide technologieën te gebruiken.

Conclusie

In dit artikel heb ik enkele belangrijke kenmerken van zowel HTML5 Canvas als SVG onderzocht om je te helpen beslissen welke technologie het meest geschikt kan zijn voor bepaalde taken.

Wat is het antwoord?

Chris Coyier is het eens met Benjamin De Cock, zoals de laatste tweets:

Een zeer eenvoudige manier om het te beantwoorden is “gebruik canvas wanneer je geen svg kunt gebruiken” (waarbij “kan niet” kan betekenen animatie van duizenden objecten, het manipuleren van elke individuele pixel, enzovoort). Met andere woorden, SVG zou je standaardkeuze moeten zijn, canvas je uitwijkplan.

— Benjamin De Cock (@bdc) October 2, 2019

Dr Abstract biedt een lange lijst van dingen die het beste gebouwd worden met Canvas, waaronder interactieve logos en reclame, interactieve infografieken, e-learning apps, en nog veel meer.

Naar mijn mening zijn er geen hard en snel regels voor wanneer het het beste is om Canvas in plaats van SVG te gebruiken. Het onderscheid tussen directe en geheugenmodus wijst erop dat HTML5 Canvas de onbetwiste winnaar is bij het bouwen van dingen zoals grafisch intensieve games, en dat SVG het meest geschikt is voor dingen zoals vlakke afbeeldingen, iconen en UI-elementen. Echter, daartussen is er ruimte voor HTML5 Canvas om zijn bereik uit te breiden, vooral gezien wat de verschillende krachtige Canvas-bibliotheken aan tafel kunnen brengen. Niet alleen maken ze het gemakkelijker om beide technologieën in hetzelfde grafische werk te gebruiken, maar ze maken het ook mogelijk dat sommige moeilijk te implementeren functies in een native Canvas-gebaseerd project – zoals interactieve controles en gebeurtenissen, reactiviteit, toegankelijkheidsfuncties, enzovoort – nu binnen handbereik zijn van de meeste ontwikkelaars, wat de deur openzet voor de mogelijkheid van steeds interessanter gebruik van HTML5 Canvas.

Veelgestelde vragen (FAQs) over Canvas versus SVG