HTML SVG
SVG (Scalable Vector Graphics) is XML-based vector graphics. Unlike a bitmap, SVG stays sharp at any size and each shape is a real DOM node you can style and animate.
Inline SVG
You can paste SVG directly inside HTML — no separate file needed:
Core SVG elements
| Element | Draws |
|---|---|
<rect> | A rectangle. |
<circle> | A circle. |
<ellipse> | An ellipse. |
<line> | A straight line. |
<polyline> / <polygon> | A series of points. |
<path d="…"> | An arbitrary path described by commands. |
<text> | Text rendered as part of the graphic. |
<g> | A group — apply transforms to many shapes at once. |
Tip: Use SVG for icons, logos, charts, and any artwork that needs to scale crisply. Use bitmap formats (WebP, JPG) for photographs.
Example
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML SVG</title>
</head>
<body>
<h1>HTML SVG</h1>
<p>This is a demo page for the "HTML SVG" lesson.</p>
</body>
</html>
Try it Yourself »
Exercise
Draw a red circle of radius 30 centered at (50,50).
<svg width="100" height="100">
<
cx="50" cy="50" r="30" fill="red" />
</svg>
The SVG primitive for round shapes.
Discussion
Loading…