Platform under construction

HTML Advanced

Advanced

HTML SVG

Learn HTML SVG with practical examples for rich HTML features, native browser behavior, accessibility, performance, SEO and live practice.

<svg viewBox="0 0 120 120" role="img">
  <circle cx="60" cy="60" r="50">
</svg>

HTML advanced

SVG describes vector graphics with real markup instead of pixels.

SVG is HTML-friendly XML markup for scalable vector graphics. It is excellent for icons, logos, diagrams, simple illustrations and data visuals.

Unlike canvas, SVG shapes are elements in the DOM. They can be styled, animated, labeled and inspected.

Inline SVG is powerful, but it should still be accessible and clean. Decorative icons can be hidden; meaningful graphics need labels or text alternatives.

svg

The root vector graphic element.

viewBox

Defines the internal coordinate system.

path

Draws complex shapes.

title

Can label meaningful inline SVG.

Syntax and behavior

SVG needs a viewBox and a clear accessibility decision.

If an SVG is decorative, hide it from assistive technology. If it is meaningful, give it a label.

Meaningful inline SVG

<svg viewBox="0 0 120 120" role="img" aria-labelledby="logo-title">
  <title id="logo-title">Course progress badge</title>
  <circle cx="60" cy="60" r="52" fill="#101a2d"></circle>
  <path d="M34 64 L52 82 L88 38" fill="none" stroke="#8cffc1" stroke-width="10"></path>
</svg>

Unlabeled meaningful SVG

<svg>
  <path d="M10 10 L90 90">
</svg>

Rules that matter

Advanced HTML is strongest when native behavior, accessibility and performance stay aligned.

These elements can create rich interfaces, but they still need clear purpose, safe fallbacks and production discipline.

Use viewBox

It makes SVG scalable and predictable.

Hide decorative SVG

Use aria-hidden="true" when the graphic adds no information.

Label meaningful SVG

Use title, aria-label or surrounding text.

Optimize exported SVG

Design tools often export unnecessary metadata.

Prefer currentColor for icons

Icons can inherit text color cleanly.

Avoid huge inline SVG blocks

Large illustrations can make HTML hard to maintain.

Production thinking

Advanced features are useful only when they still serve the user.

Why does this matter?

This matters because SVG can look like an image while behaving like structured markup. That gives developers control and responsibility.

Accessibility

Meaningful SVG needs an accessible name. Decorative SVG should not be announced as random graphic noise.

Production note

Use SVG sprites, optimized inline SVG or external files depending on caching, styling and reuse needs.

SEO note

SVG text and labels can provide context, but important page copy should still exist as normal HTML text.

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 the circle color.
Change the title text.
Add aria-hidden="true" and explain when that would be wrong.

Practice assignment

Do this before moving to the next lesson.

Create one decorative SVG icon.
Create one meaningful SVG badge.
Use a different accessibility pattern for each.

HTML CSS

Live preview

Self-check

Before you continue, prove that you own this lesson.