SVG Summary

SVG is the standard for scalable icons, charts, and illustrations. Key concepts: shapes, path commands, viewBox, gradients, clipPath, filter, symbol/use sprites, and accessibility.

Example

<!-- Responsive accessible SVG template -->
<svg xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 100 100"
     role="img"
     aria-labelledby="svg-title">
  <title id="svg-title">Shape description</title>
  <!-- shapes here -->
</svg>

<!-- Key elements:
  rect, circle, ellipse, line, polygon, polyline
  path (d="M L C Z")
  text, tspan
  g (group), defs, symbol, use
  linearGradient, radialGradient, clipPath, filter
-->

HTML

Full Editor

Pro Tip

Always add a viewBox — it is the most important SVG attribute for responsive behavior.

Related Resources

HTML Reference

Complete tag & property list

HTML How-To Guides

Step-by-step practical guides

HTML Exercises

Practice what you've learned