SVG (Scalable Vector Graphics) allows you to create graphics that scale perfectly at any size. Unlike pixel-based images, SVG graphics are resolution-independent and can be embedded directly in HTML.
What is SVG?
SVG is an XML-based format for vector graphics. It's perfect for:
- Icons and logos
- Charts and diagrams
- Illustrations
- Responsive graphics that scale without quality loss
- Animations and interactive graphics
Basic SVG Element
basic-svg.html
<!-- Inline SVG -->
<svg width="200" height="200">
<circle cx="100" cy="100" r="80" fill="#2196F3" />
</svg>SVG Shapes
Circle
svg-circle.html
<svg width="200" height="200">
<circle cx="100" cy="100" r="50" fill="#4CAF50" />
<circle cx="100" cy="100" r="70" fill="none" stroke="#2196F3" stroke-width="3" />
</svg>Rectangle
svg-rect.html
<svg width="300" height="200">
<!-- Basic rectangle -->
<rect x="20" y="20" width="100" height="80" fill="#FF5722" />
<!-- Rounded corners -->
<rect x="150" y="20" width="100" height="80" rx="10" ry="10" fill="#9C27B0" />
</svg>Line
svg-line.html
<svg width="300" height="200">
<line x1="50" y1="50" x2="250" y2="150"
stroke="#333" stroke-width="3" />
</svg>Polygon (Star)
svg-polygon.html
<svg width="200" height="200">
<!-- Triangle -->
<polygon points="100,20 20,180 180,180" fill="#FFC107" />
<!-- Star -->
<polygon points="100,10 40,198 190,78 10,78 160,198"
fill="none" stroke="#f44336" stroke-width="2" />
</svg>SVG Text
svg-text.html
<svg width="300" height="100">
<text x="10" y="40" font-family="Arial" font-size="24" fill="#333">
Hello SVG!
</text>
<text x="10" y="80" font-size="20" fill="#2196F3" font-weight="bold">
Scalable Text
</text>
</svg>SVG Paths
Paths are the most flexible SVG element for creating complex shapes:
svg-path.html
<svg width="200" height="200">
<!-- Heart shape -->
<path d="M100,150 Q80,100 50,100 Q20,100 20,130 Q20,160 50,180 L100,200
L150,180 Q180,160 180,130 Q180,100 150,100 Q120,100 100,150 Z"
fill="#e91e63" />
</svg>SVG Gradients
svg-gradient.html
<svg width="300" height="200">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#FF6B6B;stop-opacity:1" />
<stop offset="100%" style="stop-color:#4ECDC4;stop-opacity:1" />
</linearGradient>
</defs>
<rect width="300" height="200" fill="url(#grad1)" />
</svg>Creating Icons
svg-icons.html
<!-- Home icon -->
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
<polyline points="9 22 9 12 15 12 15 22" />
</svg>
<!-- Heart icon -->
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" />
</svg>Responsive SVG
responsive-svg.html
<!-- ViewBox makes SVG responsive -->
<svg viewBox="0 0 100 100" style="width: 100%; height: auto;">
<circle cx="50" cy="50" r="40" fill="#4CAF50" />
</svg>
<style>
svg {
max-width: 300px;
display: block;
}
</style>Simple SVG Animation
svg-animation.html
<svg width="200" height="200">
<circle cx="100" cy="100" r="50" fill="#2196F3">
<animate attributeName="r"
from="50" to="80"
dur="1s"
repeatCount="indefinite" />
</circle>
</svg>Styling SVG with CSS
svg-css.html
<style>
.my-circle {
fill: #4CAF50;
transition: fill 0.3s;
}
.my-circle:hover {
fill: #45a049;
}
.my-text {
font-size: 24px;
fill: #333;
}
</style>
<svg width="200" height="200">
<circle class="my-circle" cx="100" cy="100" r="50" />
<text class="my-text" x="50" y="110">SVG</text>
</svg>Using External SVG Files
external-svg.html
<!-- As img tag -->
<img src="logo.svg" alt="Logo" width="100">
<!-- As background image -->
<style>
.logo {
background-image: url('logo.svg');
width: 100px;
height: 100px;
}
</style>
<!-- As object -->
<object data="logo.svg" type="image/svg+xml"></object>SVG vs Canvas
Use SVG when:
- You need scalable, resolution-independent graphics
- Creating icons, logos, or simple shapes
- Elements need to be interactive or accessible
- You want to style with CSS
Use Canvas when:
- Creating complex animations or games
- Working with pixel manipulation
- Rendering thousands of objects
- Creating dynamic, real-time graphics
Practical Example: Logo
svg-logo.html
<svg width="200" height="80" viewBox="0 0 200 80">
<!-- Background -->
<rect width="200" height="80" rx="10" fill="#2196F3" />
<!-- Icon -->
<circle cx="40" cy="40" r="20" fill="white" />
<!-- Text -->
<text x="75" y="50" font-family="Arial" font-size="28"
font-weight="bold" fill="white">
MyBrand
</text>
</svg>Best Practices
Use viewBox for Responsive SVG
viewbox-practice.html
<!-- Good: Scales properly -->
<svg viewBox="0 0 100 100" width="100%" height="auto">
<circle cx="50" cy="50" r="40" />
</svg>
<!-- Less flexible: Fixed dimensions -->
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" />
</svg>Optimize SVG Files
Remove unnecessary attributes and whitespace:
- Use tools like SVGO to optimize
- Remove editor metadata
- Simplify paths when possible
- Use CSS for repeated styles
Make SVG Accessible
accessible-svg.html
<svg role="img" aria-labelledby="title desc">
<title id="title">Company Logo</title>
<desc id="desc">A blue circle with company name</desc>
<circle cx="50" cy="50" r="40" fill="#2196F3" />
</svg>Key Takeaways
- SVG graphics scale perfectly at any size
- Can be embedded directly in HTML
- Perfect for icons, logos, and illustrations
- Stylable with CSS and animatable
- Use
viewBoxfor responsive SVG - SVG is resolution-independent
- Better for simple graphics; Canvas for complex animations
- Accessible and SEO-friendly
What's Next?
Now that you understand SVG, the next lesson will cover the Geolocation API, which allows you to get the user's location with their permission.