Overview

HTML SVG is part of the complete HTML syllabus. This lesson explains the concept deeply, shows the exact tags or attributes to use, and gives you a runnable browser example for practice.

HTML SVG is about choosing markup that carries meaning before styling begins. Good HTML gives the page a reliable structure, makes the content easier to maintain, and gives browsers, search engines, forms, and assistive technologies the information they need.

Core Ideas

• Use HTML SVG to improve the meaning of the document, not only the appearance.
• Keep labels, headings, landmarks, and relationships explicit.
• Prefer built-in browser behavior whenever it already solves the job.
• Check that the page still makes sense when CSS and JavaScript are unavailable.

Step by Step

1. Identify the content relationship that HTML SVG needs to express.
2. Choose the native element, attribute, or browser API that matches that relationship.
3. Add the smallest useful markup first, then add progressive enhancements.
4. Validate the result with keyboard navigation, browser tools, and source inspection.

Beginner Explanation

HTML SVG uses XML-like markup to draw vector graphics. SVG stays sharp at any size and is ideal for icons, logos, diagrams, and simple illustrations.

Unlike canvas, SVG shapes are real elements in the DOM. You can style them with CSS, label them for accessibility, and animate them.

Use title, role, and aria attributes when the graphic has meaning for the user.

Before You Start

• Sketch the simple shapes needed for HTML SVG: rectangles, circles, paths, lines, or text.
• Decide whether the SVG is meaningful content or only decoration.
• Pick a viewBox before fine-tuning width and height.

Key Tags and Attributes

• Element: an opening tag, content, and often a closing tag.
• Attribute: extra information placed in an opening tag.
• Nesting: placing one element inside another correctly.
• Text content: the actual words, numbers, and symbols users read.

Plain-English Glossary

• SVG: scalable vector graphics written as markup.
• viewBox: the coordinate system used by the SVG graphic.
• Path: a shape drawn from commands such as move, line, and curve.
• Stroke and fill: the outline color and inside color of an SVG shape.

What You Will Learn

• Understand that HTML SVG is real markup for vector graphics, not a flat image.
• Use shapes such as rect, circle, path, line, and text to build scalable graphics.
• Add title, role, aria-label, or aria-labelledby when an SVG has meaning.
• Style SVG with attributes or CSS while keeping the markup readable.

Where You Use This in Real Projects

You use HTML SVG for icons, logos, data badges, diagrams, decorative shapes, progress graphics, and scalable illustrations.

Because SVG is markup, it is easier to style, animate, and label than a flat image when the graphic is simple or symbolic.

When to Use This

• Use HTML SVG for icons, logos, badges, diagrams, and graphics that must stay sharp at any size.
• Use img when the SVG can be a separate file and does not need inline styling or scripting.
• Use canvas when you need heavy pixel drawing, frequent repainting, or game-like animation.

Browser and Accessibility Notes

• Inline SVG can receive accessible names with title, aria-label, or aria-labelledby.
• Decorative SVG should be hidden from assistive technology with aria-hidden="true".
• Text inside SVG may not wrap like normal HTML text, so test at the final size.
• The viewBox controls scaling; width and height control the displayed size.

Code Example

<svg width="240" height="160" viewBox="0 0 240 160" role="img" aria-labelledby="svg-title">
  <title id="svg-title">Simple SVG badge</title>
  <rect width="240" height="160" rx="16" fill="#eef2ff"></rect>
  <circle cx="80" cy="80" r="42" fill="#4f46e5"></circle>
  <text x="132" y="88" font-size="24" fill="#111827">SVG</text>
</svg>

Another Example

<svg viewBox="0 0 300 120" width="300" role="img" aria-label="Progress badge">
  <rect width="300" height="120" rx="14" fill="#ecfeff"></rect>
  <path d="M40 65 L80 92 L150 32" fill="none" stroke="#0891b2" stroke-width="12"></path>
  <text x="170" y="72" font-size="24">Done</text>
</svg>

Example Explained

• The graphic has a clear purpose and a predictable size.
• Canvas uses JavaScript drawing commands; SVG uses markup shapes.
• If the graphic communicates meaning, provide a label or nearby text.
• Keep the example small first, then add more shapes or data.

How to Read This Example

1. Start with the svg element and read the viewBox. It defines the coordinate system used by the HTML SVG shapes.
2. Read accessibility attributes next, such as role, title, aria-label, or aria-labelledby.
3. Then read each shape in order. rect, circle, path, and text become visible SVG elements.
4. Change one fill, stroke, x, y, width, or height value and rerun the editor to see exactly what changed.

Checklist

• Use the most specific native element before reaching for a div.
• Check the page with keyboard navigation and browser validation.
• Keep the markup readable before adding CSS or JavaScript.

Common Mistakes

• Using divs for everything and losing built-in semantics.
• Adding JavaScript for behavior the browser already provides.
• Forgetting labels, alt text, lang, viewport, or metadata that other tools rely on.

Do and Don't

• Do: use HTML SVG for scalable icons, diagrams, badges, and simple graphics.
• Do: name meaningful SVGs for accessibility.
• Don't: leave decorative SVGs announced as confusing content.
• Don't: treat viewBox as optional when the SVG must scale cleanly.

Practice Challenge

Recreate the HTML SVG example in the code editor, then inspect the DOM and check that labels, links, and metadata still make sense without CSS.

Try These Changes

• Change the text in the HTML SVG example and run it again.
• Add one new related element, such as another paragraph, list item, table row, input, or link.
• Add a class name and write a small CSS rule for it in the CSS tab.
• Break one tag on purpose, run it, then fix it so you understand how browsers recover from mistakes.

Quick Check

• Question: What is the main job of HTML SVG? Answer: To add meaning and structure to the page.
• Question: Should HTML be readable without CSS? Answer: Yes, the structure should still make sense.
• Question: What should you do after reading the example? Answer: Open it in the editor and change one thing.

Revision Questions

• What does the viewBox do in the HTML SVG example?
• Which SVG shapes are visible elements in the DOM?
• Is the SVG meaningful or decorative?
• How would you change the graphic without changing its meaning?

Debugging Checks

• Check that the viewBox matches the coordinate system used by the shapes.
• If the SVG should be accessible, confirm it has a clear name.
• If the SVG is decorative, confirm it is hidden from assistive technology.
• Inspect CSS rules when fills, strokes, or sizes do not appear as expected.

Mini Project

Create an inline SVG badge with a background shape, one icon-like shape, and text. Add an accessible name, then change the fill and stroke colors in the editor.

Mastery Check

• You can explain why the chosen HTML for HTML SVG is more meaningful than a generic div.
• You can identify the keyboard and accessibility behavior provided by the browser.
• You can extend the example without breaking validation.