HTML SVG Graphics
HTML SVG Graphics
SVG (Scalable Vector Graphics) is an XML-based format for creating vector graphics directly in HTML.
Unlike <canvas>, SVG graphics are resolution-independent and remain sharp at any size. They are ideal for icons, logos, charts, and illustrations.
Basic SVG Syntax
-
widthandheightdefine the canvas size. -
You can add shapes, text, and paths inside the
<svg>tag. -
Styles can be applied via attributes or CSS.
Common SVG Elements
| Element | Description | Example |
|---|---|---|
<rect> |
Rectangle | <rect x="10" y="10" width="100" height="50" fill="blue"/> |
<circle> |
Circle | <circle cx="150" cy="50" r="40" fill="red"/> |
<ellipse> |
Ellipse | <ellipse cx="200" cy="100" rx="80" ry="40" fill="green"/> |
<line> |
Line | <line x1="10" y1="150" x2="200" y2="150" stroke="black" stroke-width="2"/> |
<polygon> |
Closed shape with multiple points | <polygon points="50,150 150,150 100,50" fill="orange"/> |
<polyline> |
Open shape with multiple points | <polyline points="0,0 50,50 100,0" stroke="blue" fill="none"/> |
<text> |
Display text | <text x="10" y="190" font-family="Arial" font-size="20">Hello SVG</text> |
<path> |
Complex shapes with curves | <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/> |
Example SVG Graphics
Output Preview
-
Blue rectangle with black border
-
Red circle with black border
-
Green horizontal line
-
Text “Hello SVG” at the bottom
Key Points
-
SVG is scalable; graphics do not lose quality when resized.
-
Elements in SVG are part of the DOM → Can be styled with CSS and manipulated with JavaScript.
-
Ideal for icons, logos, charts, and interactive graphics.
-
SVG supports animations, gradients, filters, and events.
SVG vs Canvas:
-
SVG → Vector-based, retains sharpness, easier to style and animate with DOM.
-
Canvas → Pixel-based, better for real-time graphics and games.
