Back to Blog
By AriesZhou · · 3 min read

SVG vs. Canvas

UI

SVG (Scalable Vector Graphics) and Canvas are two primary web technologies for drawing graphics on a webpage, but they differ in usage, performance, and suitable scenarios.

SVG

SVG is a language for describing 2D graphics using XML. SVG graphics are vector-based, meaning they can scale to any size without losing quality. SVG is well-suited for scenarios with rich detail and complex structure that do not require frequent redrawing.

Using SVG in React is intuitive because SVG elements can be declared directly in JSX, just like any other React element. This means SVG graphics can be easily integrated into components, and React state and props can be used to dynamically update SVG attributes, enabling rich interactive effects. For example:

function MyComponent() {
  const [color, setColor] = React.useState('blue');

  return (
    <svg width="100" height="100" onClick={() => setColor('red')}>
      <circle cx="50" cy="50" r="40" stroke="black" strokeWidth="3" fill={color} />
    </svg>
  );
}

In this example, a circle’s color changes from blue to red after being clicked. React’s state and event handling make interacting with SVG straightforward.

Advantages:

  • Vector graphics: scaling without quality loss, suitable for scenarios requiring high-quality graphic output.
  • DOM interface: SVG elements are DOM elements and can be easily controlled via JavaScript and CSS.
  • Search Engine Optimization (SEO): Since SVG graphics are text files, search engines can index them.

Disadvantages:

  • Performance issues: when graphics are very complex or used in large quantities, performance issues may arise, especially with animation and interaction.
  • Compatibility: although most modern browsers support SVG, older browsers may require additional compatibility handling.

Canvas

Canvas is an HTML element used to draw graphics (including lines, shapes, images, and even video) via JavaScript. Unlike SVG, Canvas provides pixel-level operations and is mainly used in graphics-intensive games, image processing, and real-time video processing.

Compared with SVG, Canvas is slightly more complex to use in React because Canvas draws through an imperative API. Usually you need to handle Canvas drawing logic in component lifecycle methods or with useEffect hooks. For example:

function MyCanvasComponent() {
  const canvasRef = React.useRef(null);

  React.useEffect(() => {
    const canvas = canvasRef.current;
    const context = canvas.getContext('2d');

    // 绘制蓝色矩形
    context.fillStyle = 'blue';
    context.fillRect(10, 10, 150, 100);
  }, []); // 依赖数组为空，表示仅在组件挂载时执行

  return <canvas ref={canvasRef} width="170" height="120"></canvas>;
}

Pros:

  • Performance: For animation-heavy and graphics-intensive applications, Canvas usually delivers better performance because it is pixel-based.
  • Flexibility: Canvas provides a low-level API, so developers can draw complex 2D and 3D graphics.

Cons:

  • Not vector graphics: Canvas draws bitmaps, so zooming in causes pixelation.
  • Poor accessibility and SEO: Content drawn on Canvas is not a DOM element, is not indexed by search engines, and is not easy to make accessible.
  • More code required: Compared with SVG, drawing complex graphics may require more JavaScript code.

Choosing

Choosing between SVG and Canvas depends mainly on the use case:

  • If your application needs complex graphics, such as charts, graphic editors, or requires search engine optimization (SEO), SVG is likely the better choice.
  • If your application needs heavy animation, such as games, image editing, or other scenarios requiring intensive graphics processing, Canvas may be more suitable.