When to Use SVG vs. When to Use Canvas

Publikováno: 12.11.2019

SVG and canvas are both technologies that can draw stuff in web browsers, so they are worth comparing and understanding when one is more suitable than the other. Even a light understanding of them makes the choice of choosing one over the other pretty clear.

  • A little flat-color icon? That's clearly SVG territory.
  • An interactive console-like game? That's clearly canvas territory.

I know we didn't cover why yet, but I hope that will become clear as we dig into it.… Read article

The post When to Use SVG vs. When to Use Canvas appeared first on CSS-Tricks.

Celý článek

SVG and canvas are both technologies that can draw stuff in web browsers, so they are worth comparing and understanding when one is more suitable than the other. Even a light understanding of them makes the choice of choosing one over the other pretty clear.

  • A little flat-color icon? That's clearly SVG territory.
  • An interactive console-like game? That's clearly canvas territory.

I know we didn't cover why yet, but I hope that will become clear as we dig into it.

SVG is vector and declarative

If you know you need vector art, SVG is the choice. Vector art is visually crisp and tends to be a smaller file size than raster graphics like JPG.

That makes logos a very common SVG use case. SVG code can go right within HTML, and are like declarative drawing instructions:

<svg viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="50" />
</svg>

If you care a lot about the flexibility and responsiveness of the graphic, SVG is the way.

Canvas is a JavaScript drawing API

You put a <canvas> element in HTML, then do the drawing in JavaScript. In other words, you issue commands to tell it how to draw (which is more imperative than declarative).

<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');
  var centerX = canvas.width / 2;
  var centerY = canvas.height / 2;
  var radius = 70;

  context.beginPath();
  context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
  context.fillStyle = 'green';
  context.fill();
</script>

SVG is in the DOM

If you're familiar with DOM events like click and mouseDown and whatnot, those are available in SVG as well. A <circle> isn't terribly different than a <div> in that respect.

<svg viewBox="0 0 100 100">
  
  <circle cx="50" cy="50" r="50" />
  
  <script>
    document.querySelector('circle').addEventListener('click', e => {
      e.target.style.fill = "red";
    });
  </script>
  
</svg>

SVG for accessibility

You can have a text alternative for canvas:

<canvas aria-label="Hello ARIA World" role="img"></canvas>

You can do that in SVG too, but since SVG and its guts can be right in the DOM, we generally think of SVG as being what you use if you're trying to build an accessible experience. Explained another way, you can build an SVG that assistive technology can access and find links and sub-elements with their own auditory explanations and such.

Text is also firmly in SVG territory. SVG literally has a <text> element, which is accessible and visually crisp — unlike canvas where text is typically blurry.

Canvas for pixels

As you'll see in Sarah Dranser's comparison below, canvas is a way of saying dance, pixels, dance!. That's a fun way of explaining the concept that drives it home better than any dry technical sentiment could do.

Highly interactive work with lots and lots of complex detail and gradients is the territory of canvas. You'll see a lot more games built with canvas than SVG for this reason, although there are always exceptions (note the simple vector-y-ness of this game).

CSS can play with SVG

We saw above that SVG can be in the DOM and that JavaScript can get in there and do stuff. The story is similar with CSS.

<svg viewBox="0 0 100 100">
  
  <circle cx="50" cy="50" r="50" />
  
  <style>
    circle { fill: blue; }
  </style>
  
</svg>

Note how I've put the <script> and <style> blocks within the <svg> for these examples, which is valid. But assuming you've put the SVG literally in the HTML, you could move those out, or have other external CSS and JavaScript do the same thing.

We have a massive guide of SVG Properties and CSS. But what is great to know is that the stuff that CSS is great at is still possible in SVG, like :hover states and animation!

See the Pen
ExxbpBE
by Chris Coyier (@chriscoyier)
on CodePen.

Combinations

Technically, they aren't entirely mutually exclusive. A <svg> can be painted to a <canvas>.

As Blake Bowen proves, you can even keep the SVG on the canvas very crisp!

See the Pen
SVG vs Canvas Scaling
by Blake Bowen (@osublake)
on CodePen.

Ruth John's comparison

See the Pen
SVG vs Canvas
by Rumyra (@Rumyra)
on CodePen.

Sarah Drasner's comparison

Tablized from this tweet.

DOM/Virtual DOMCanvas
Pros
Great for UI/UX animationDance, pixels, dance!
Great for SVG that is resolution independentGreat for really impressive 3D or immersive stuff
Easier to debugMovement of tons of objects
Cons
Tanks with lots of objectsHarder to make accessible
Because you have to care about the way you anmimateNot resolution independent out of the box
Breaks to nothing

Shirley Wu's comparison

Tablized from this tweet.

SVGCanvas
Pros Easy to get startedVery performant
Easier to register user interactionsEasy to update
Easy to animate
Cons Potentially complex DOMMore work to get started
Not performant for a large number of elementsMore work to handle interactions
Have to write custom animations

Many folks consider scenarios with a lot of objects (1,000+, as Shirley says) is the territory of canvas.

SVG is the default choice; canvas is the backup

A strong opinion, but it feels right to me:

Wrap up

So, if we revisit those first two bullet points...

  • A little flat-color icon? SVG goes in the DOM, so something like an icon inside a button makes a lot of sense for SVG — not to mention it can be controlled with CSS and have regular JavaScript event handlers and stuff
  • An interactive console-like game? That will have lots and lots of moving elements, complex animation and interaction, performance considerations. Those are things that canvas excels at.

And yet there is a bunch of middle ground here. As a day-to-day web designer/developer kinda guy, I find SVG far more useful on a practical level. I'm not sure I've done any production work in canvas ever. Part of that is because I don't know canvas nearly as well. I wrote a book on SVG, so I've done far more research on that side, but I know enough that SVG is doing the right stuff for my needs.

The post When to Use SVG vs. When to Use Canvas appeared first on CSS-Tricks.

Nahoru
Tento web používá k poskytování služeb a analýze návštěvnosti soubory cookie. Používáním tohoto webu s tímto souhlasíte. Další informace