Introduction to SVG

SVG in HTML

SVG (Scalable Vector Graphics) is an XML-based format for vector images. Unlike raster images, SVG scales without losing quality at any size.

Example

<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
  <rect width="200" height="100" fill="steelblue" rx="10"/>
  <text x="100" y="60" text-anchor="middle" fill="white" font-size="20">SVG!</text>
</svg>

HTML

Full Editor

Pro Tip

SVG is resolution-independent — always prefer it for logos and icons.

Related Resources

HTML Reference

Complete tag & property list

HTML How-To Guides

Step-by-step practical guides

HTML Exercises

Practice what you've learned