Section 32: SVG, Canvas and Embedded Graphics

Learning Objectives

• Understand the difference between SVG and Canvas.
• Create basic vector graphics using SVG.
• Understand how Canvas works with JavaScript.
• Embed graphics accessibly in an HTML document.

1. What Is SVG?

SVG stands for Scalable Vector Graphics. It describes graphics using XML-based markup. SVG shapes can scale without the pixelation associated with enlarging raster images.

2. Create a Basic SVG

<svg xmlns="http://www.w3.org/2000/svg"
     width="300" height="150"
     viewBox="0 0 300 150"
     role="img"
     aria-labelledby="svg-title">
  <title id="svg-title">Blue circle and green rectangle</title>
  <rect x="10" y="10" width="280" height="130" rx="12" fill="#eeeeee"/>
  <circle cx="75" cy="75" r="40" fill="blue"/>
  <rect x="140" y="40" width="100" height="70" fill="green"/>
</svg>

The SVG element creates a coordinate system. The viewBox defines the coordinate area, while width and height define the displayed dimensions.

3. Common SVG Elements

• svg: the root container.
• circle: creates a circle.
• rect: creates a rectangle.
• line: creates a straight line.
• path: draws complex paths.
• text: displays text within the graphic.
• title: provides a title for the graphic.

4. SVG as an External Image

<img src="/images/logo.svg" alt="Codementrix logo" width="200" height="60">

When SVG is used through img, the image's alternative text should communicate its purpose. Inline SVG provides more control over its internal elements.

5. What Is Canvas?

The canvas element provides a drawing surface. JavaScript is commonly used to draw pixels, shapes, charts, animations and game graphics on that surface.

<canvas id="drawing" width="300" height="150">
  Your browser does not support the canvas element.
</canvas>

<script>
  const canvas = document.querySelector("#drawing");
  const context = canvas.getContext("2d");

  if (context) {
    context.fillStyle = "blue";
    context.fillRect(20, 20, 100, 60);

    context.beginPath();
    context.arc(200, 75, 35, 0, Math.PI * 2);
    context.fillStyle = "orange";
    context.fill();
  }
</script>

6. SVG vs Canvas

7. Accessibility Considerations

Provide an accessible name or equivalent description for meaningful graphics. Canvas content may need a textual explanation and accessible controls outside the drawing surface. Do not communicate important information through graphics alone.

Common Mistakes

• Forgetting an accessible description for meaningful graphics.
• Assuming Canvas drawings automatically expose individual shapes to assistive technology.
• Confusing the SVG viewBox with CSS dimensions.
• Using Canvas when simple HTML or SVG would be easier to maintain.

Practice Exercises

1. Create an SVG containing a circle, rectangle and line.
2. Create a Canvas drawing with two shapes using JavaScript.
3. Display an SVG logo using an img element.
4. Explain which technology you would choose for an interactive chart and why.

Revision Quiz

1. What does SVG stand for?
2. Which SVG attribute defines the internal coordinate system?
3. Which HTML element provides a Canvas drawing surface?
4. Which JavaScript method obtains a 2D drawing context?
5. Are individual Canvas shapes automatically represented as DOM elements?
6. Which technology is well suited to scalable vector icons?

Answer Key and Explanations

1. Scalable Vector Graphics — SVG represents graphics using vector-based markup.
2. viewBox — It defines the coordinate area used by the graphic.
3. canvas — It provides a surface for drawing.
4. getContext("2d") — It requests the 2D drawing context.
5. No. Canvas drawing operations generally produce pixels, not separate DOM elements.
6. SVG — It scales cleanly and supports individual vector elements.