FSM Full Stack Masterclass
Platform under construction
HTML course badge

HTML Elements

Intermediate

HTML Graphics Elements

Learn canvas, svg as part of the HTML element system: when to use it, how it fits inside a document and what mistakes to avoid.

Graphics

Graphics elements draw visuals with SVG or canvas.

SVG is markup for scalable vector graphics. Canvas is a drawing surface controlled with JavaScript.

Use SVG when the graphic has meaningful shapes, icons or scalable illustration. Use canvas when you need dynamic drawing, charts, games or pixel-level rendering.

Element group: canvas, svg. Programmatic drawing and scalable vector markup.

What belongs here

Learn the tags by job, not by memorizing a random list.

svg

Vector markup that scales cleanly and can be styled.

canvas

A bitmap drawing surface controlled with JavaScript.

viewBox

Defines the coordinate system for SVG scaling.

aria-label

Can describe meaningful graphics when needed.

Syntax in context

Choose SVG for semantic vector markup and canvas for drawing logic.

SVG content is part of the DOM. Canvas pixels are not meaningful unless you provide alternative text or surrounding explanation.

<svg viewBox="0 0 120 120" role="img" aria-label="Green progress circle">
  <circle cx="60" cy="60" r="48"></circle>
</svg>

<canvas width="320" height="180" aria-label="Live chart preview"></canvas>

Good versus weak

The difference is usually meaning, not only syntax.

Good

<svg viewBox="0 0 120 120" role="img" aria-label="Green progress circle">
  <circle cx="60" cy="60" r="48"></circle>
</svg>

<canvas width="320" height="180" aria-label="Live chart preview"></canvas>

Weak

<canvas width="900" height="400"></canvas>

Rules that matter

Use these rules before publishing real HTML.

SVG scales

Use SVG for icons, logos, diagrams and simple illustrations.

Canvas needs fallback

Canvas pixels are not automatically understandable.

Name meaningful graphics

Use role, aria-label or surrounding text when the graphic matters.

Do not overuse canvas

Normal UI and text should remain HTML, not painted pixels.

Production thinking

HTML is also for accessibility, SEO, security and maintenance.

Why does this matter?

Beginners often ask why this is not just a div with styling. The reason is that HTML is read by browsers, search engines, screen readers and future developers. Clear meaning makes the page easier to use and maintain.

Accessibility

SVG can be labeled. Canvas needs an accessible alternative when it communicates information.

Production note

SVG is excellent for UI assets. Canvas is excellent for visual engines, games and complex dynamic rendering.

Live code lab

Change the code and run the example.

Edit the HTML or CSS, then use Run to refresh the preview. The preview is isolated, so links and forms stay inside this practice area.

Mini assignment

Try this now.

  • Change one tag, attribute or text value in the example.
  • Run the preview and describe exactly what changed.
  • Reset the lab and repeat the same change without looking at the original.

Practice assignment

Do this before moving to the next lesson.

  1. Change one meaningful part of the HTML, not only the visible text.
  2. Run the preview and check whether the result still makes semantic sense.
  3. Explain why the element or attribute you changed belongs in this exact place.

Try it yourself

Render a simple SVG graphic

Live preview

Self-check

Before you continue, prove that you own this lesson.

Intermediate

Do not only read this page. Answer these questions out loud or write the answers in your own notes. If one answer feels vague, revisit the examples before moving on.

  1. Can you explain what problem this lesson solves in a real website?
  2. Can you identify the most important tag or attribute from this lesson?
  3. Can you name one accessibility mistake this lesson helps prevent?
  4. Can you write one good example and one weak example without copying the page?
  5. Can you explain when you would use this in production and when you would avoid it?