SVG in HTML
SVG (Scalable Vector Graphics) is a vector graphics format that can be embedded directly in HTML.
SVG Basics
Creating an SVG
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<!-- Basic shapes -->
</svg>
Basic Shapes
Rectangle
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="100" height="80"
fill="#3498db" stroke="#2c3e50" stroke-width="2" />
</svg>
Circle
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="50"
fill="#e74c3c" stroke="#c0392b" stroke-width="2" />
</svg>
Ellipse
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="100" cy="100" rx="80" ry="40"
fill="#2ecc71" stroke="#27ae60" stroke-width="2" />
</svg>
Line
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<line x1="10" y1="10" x2="190" y2="190"
stroke="#9b59b6" stroke-width="3" />
</svg>
Polygon
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<polygon points="100,10 190,190 10,190"
fill="#f39c12" stroke="#f1c40f" stroke-width="2" />
</svg>
Polylines
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<polyline points="10,10 50,100 90,50 130,120 170,30"
fill="none" stroke="#1abc9c" stroke-width="2" />
</svg>
Path
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<path d="M10 10 L190 10 L190 190 L10 190 Z"
fill="#34495e" stroke="#2c3e50" stroke-width="2" />
</svg>
Text
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
<text x="10" y="50"
font-family="Arial" font-size="24" fill="#333">
Hello SVG!
</text>
</svg>
Gradients
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#3498db;stop-opacity:1" />
<stop offset="100%" style="stop-color:#e74c3c;stop-opacity:1" />
</linearGradient>
</defs>
<rect width="200" height="50" fill="url(#grad1)" />
</svg>
Case Study: Campus System Flowchart
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Campus System Flowchart</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', sans-serif;
background: #f0f2f5;
padding: 2rem;
}
.container {
max-width: 1000px;
margin: 0 auto;
background: white;
padding: 2rem;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
h1 {
color: #1e3a5f;
margin-bottom: 1rem;
text-align: center;
}
.subtitle {
color: #666;
text-align: center;
margin-bottom: 2rem;
}
svg {
width: 100%;
height: auto;
display: block;
}
.node {
cursor: pointer;
}
.node:hover rect {
filter: brightness(1.1);
}
.node:hover circle {
filter: brightness(1.1);
}
</style>
</head>
<body>
<div class="container">
<h1>Registration System Flowchart</h1>
<p class="subtitle">New student registration process flow</p>
<svg viewBox="0 0 800 400" xmlns="http://www.w3.org/2000/svg">
<!-- Gradient definitions -->
<defs>
<linearGradient id="gradStart" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#2ecc71;stop-opacity:1" />
<stop offset="100%" style="stop-color:#27ae60;stop-opacity:1" />
</linearGradient>
<linearGradient id="gradProcess" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#3498db;stop-opacity:1" />
<stop offset="100%" style="stop-color:#2980b9;stop-opacity:1" />
</linearGradient>
<linearGradient id="gradDecision" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#f39c12;stop-opacity:1" />
<stop offset="100%" style="stop-color:#e67e22;stop-opacity:1" />
</linearGradient>
<linearGradient id="gradEnd" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#e74c3c;stop-opacity:1" />
<stop offset="100%" style="stop-color:#c0392b;stop-opacity:1" />
</linearGradient>
<!-- Arrow marker -->
<marker id="arrow" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto" markerUnits="strokeWidth">
<path d="M0,0 L0,6 L9,3 z" fill="#333" />
</marker>
</defs>
<!-- Start -->
<g class="node" transform="translate(50, 150)">
<rect x="0" y="0" width="100" height="50" rx="25" fill="url(#gradStart)" />
<text x="50" y="30" text-anchor="middle" fill="white" font-weight="bold">Start</text>
</g>
<!-- Arrow 1 -->
<line x1="150" y1="175" x2="200" y2="175" stroke="#333" stroke-width="2" marker-end="url(#arrow)" />
<!-- Process 1: Fill in the form -->
<g class="node" transform="translate(200, 150)">
<rect x="0" y="0" width="120" height="50" fill="url(#gradProcess)" />
<text x="60" y="30" text-anchor="middle" fill="white" font-size="12">Fill in Form</text>
</g>
<!-- Arrow 2 -->
<line x1="320" y1="175" x2="370" y2="175" stroke="#333" stroke-width="2" marker-end="url(#arrow)" />
<!-- Decision: Valid? -->
<g class="node" transform="translate(370, 150)">
<polygon points="60,0 120,50 60,100 0,50" fill="url(#gradDecision)" />
<text x="60" y="55" text-anchor="middle" fill="white" font-size="11">Valid?</text>
</g>
<!-- Arrow 3: Yes -->
<line x1="490" y1="175" x2="540" y2="175" stroke="#333" stroke-width="2" marker-end="url(#arrow)" />
<text x="515" y="165" fill="#27ae60" font-size="12" font-weight="bold">Yes</text>
<!-- Arrow 4: No (downwards) -->
<line x1="430" y1="250" x2="430" y2="320" stroke="#333" stroke-width="2" marker-end="url(#arrow)" />
<text x="445" y="280" fill="#e74c3c" font-size="12" font-weight="bold">No</text>
<!-- Error Box -->
<g class="node" transform="translate(380, 320)">
<rect x="0" y="0" width="100" height="40" fill="#e74c3c" />
<text x="50" y="25" text-anchor="middle" fill="white" font-size="11">Show Error</text>
</g>
<!-- Arrow back -->
<line x1="380" y1="340" x2="260" y2="340" stroke="#333" stroke-width="2" />
<line x1="260" y1="340" x2="260" y2="200" stroke="#333" stroke-width="2" marker-end="url(#arrow)" />
<!-- Process 2: Upload documents -->
<g class="node" transform="translate(540, 150)">
<rect x="0" y="0" width="120" height="50" fill="url(#gradProcess)" />
<text x="60" y="30" text-anchor="middle" fill="white" font-size="11">Upload Document</text>
</g>
<!-- Arrow 5 -->
<line x1="660" y1="175" x2="710" y2="175" stroke="#333" stroke-width="2" marker-end="url(#arrow)" />
<!-- End -->
<g class="node" transform="translate(710, 150)">
<rect x="0" y="0" width="80" height="50" rx="25" fill="url(#gradEnd)" />
<text x="40" y="30" text-anchor="middle" fill="white" font-weight="bold">Done</text>
</g>
<!-- Labels -->
<text x="260" y="140" text-anchor="middle" fill="#333" font-size="12" font-weight="bold">Step 1</text>
<text x="430" y="140" text-anchor="middle" fill="#333" font-size="12" font-weight="bold">Validation</text>
<text x="600" y="140" text-anchor="middle" fill="#333" font-size="12" font-weight="bold">Step 2</text>
</svg>
</div>
</body>
</html>
Everyday Case Study
Case: A developer needs to create simple icons with SVG.
<!-- User Icon -->
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
<circle cx="12" cy="7" r="4"></circle>
</svg>
<!-- Home Icon -->
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
<polyline points="9 22 9 12 15 12 15 22"></polyline>
</svg>
<!-- Search Icon -->
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="11" cy="11" r="8"></circle>
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
</svg>
SVG vs Canvas
| Aspect | SVG | Canvas |
|---|---|---|
| Format | Vector | Bitmap |
| Resolution | Scalable | Depends on resolution |
| Interaction | Built-in events | Manual hit-testing |
| Performance | Good for few objects | Good for many objects |
| SEO | Searchable | Not searchable |
Best Practices
- Use viewBox: For responsive scaling
- Optimize paths: Reduce the number of points
- Use defs: For reusable elements
- Accessibility: Add title and desc
- CSS styling: Use CSS for styling
Summary
SVG is a powerful, scalable vector graphics format. It's well suited for icons, diagrams, and graphics that need to be scaled without losing quality.