What is SVG?
SVG (Scalable Vector Graphics) is used to create vector-based graphics in HTML. Unlike images, SVG graphics scale without losing quality.
Basic Syntax
HTMLRead-only
1
Common SVG Shapes
| Shape | Example |
|---|---|
| Circle | <circle cx="50" cy="50" r="40" /> |
| Rectangle | <rect width="100" height="50" /> |
| Line | <line x1="0" y1="0" x2="100" y2="100" /> |
| Ellipse | <ellipse cx="100" cy="50" rx="80" ry="30" /> |
| Polygon | <polygon points="50,0 100,100 0,100" /> |
SVG Attributes
| Attribute | Purpose |
|---|---|
| cx, cy | Center position |
| r | Radius |
| width, height | Size |
| fill | Fill color |
| stroke | Border color |
| stroke-width | Border thickness |
Example: Multiple Shapes
HTMLRead-only
1
SVG vs Canvas
| Feature | SVG | Canvas |
|---|---|---|
| Type | Vector-based | Pixel-based |
| Scalability | High | Low |
| Interactivity | Built-in DOM | Requires JS |
| Use Case | Icons, diagrams | Games, animations |
Inline vs External SVG
SVG can be used inline in HTML or as an external file.
HTMLRead-only
1
Best Practices
- Use SVG for scalable graphics
- Optimize SVG files for performance
- Use inline SVG for styling and animation
- Keep SVG code clean and minimal
- Use CSS and JS for interactivity
Common Mistakes
- Using raster images instead of SVG for icons
- Overcomplicated SVG paths
- Not optimizing SVG size
- Using SVG where canvas is better suited
Conclusion
SVG is ideal for scalable and high-quality graphics. It is widely used for icons, charts, and responsive designs.