HTML SVG
Scalable Vector Graphics for the web
🔷 What is SVG?
SVG (Scalable Vector Graphics) defines vector-based graphics in XML format. SVG graphics are scalable and don't lose quality when resized, making them perfect for icons and simple illustrations.
<!-- Basic SVG circle -->
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" fill="red" />
</svg>
Output:
SVG Elements
Circle
Draw perfect circles
<circle cx="50" cy="50" r="30" />Rectangle
Create rectangles and squares
<rect x="10" y="10" width="80" height="50" />Line
Draw straight lines
<line x1="0" y1="0" x2="100" y2="50" />Text
Add scalable text
<text x="10" y="30">Hello SVG</text>🔹 Basic SVG Shapes
Let's create different shapes with SVG:
<svg width="300" height="150">
<!-- Rectangle -->
<rect x="10" y="10" width="60" height="40" fill="blue" />
<!-- Circle -->
<circle cx="120" cy="30" r="25" fill="green" />
<!-- Line -->
<line x1="10" y1="80" x2="100" y2="120" stroke="red" stroke-width="3" />
<!-- Text -->
<text x="150" y="100" font-family="Arial" font-size="16" fill="purple">SVG Text</text>
</svg>Output:
🔹 SVG Path Element
Create complex shapes using the path element:
<svg width="200" height="100">
<!-- Simple triangle using path -->
<path d="M 50 10 L 90 80 L 10 80 Z" fill="orange" />
<!-- Curved path -->
<path d="M 120 20 Q 150 10 180 20 T 200 50"
stroke="blue" stroke-width="2" fill="none" />
</svg>Output:
🔹 SVG vs Canvas
Understanding when to use SVG vs Canvas:
Use SVG when:
- Scalability: Graphics need to scale without quality loss
- Simple graphics: Icons, logos, simple illustrations
- Interactivity: Need to style with CSS or add event listeners
- Accessibility: Screen readers can access SVG content
Use Canvas when:
- Complex graphics: Detailed drawings or image manipulation
- Animations: Frame-by-frame animations or games
- Performance: Many elements that change frequently
- Pixel manipulation: Need to work with individual pixels