SVG in HTML (<svg>)
SVG (Scalable Vector Graphics) is used for 2D graphics. It is resolution-independent, meaning it looks sharp on any device.
- Icons & logos
- Charts & graphs
- Infographics & interactive visuals
Basic SVG Structure :
<svg width="400" height="200" style="border:1px solid #000;">
<rect x="10" y="10" width="100" height="80" fill="red"/>
<circle cx="200" cy="60" r="50" fill="green"/>
<ellipse cx="300" cy="150" rx="50" ry="30" fill="blue"/>
<text x="150" y="180" font-family="Arial" font-size="20" fill="orange">Hello SVG!</text>
</svg>Stroke and Fill :
SVG allows separate stroke and fill settings:
Example :
<svg width="400" height="150">
<rect x="10" y="10" width="100" height="80" fill="yellow" stroke="black" stroke-width="3"/>
<circle cx="200" cy="50" r="40" fill="none" stroke="purple" stroke-width="5"/>
</svg>Lines, Polygons, and Polylines :
<svg width="400" height="200">
<!-- Line -->
<line x1="10" y1="10" x2="200" y2="50" stroke="blue" stroke-width="2"/>
<!-- Polygon -->
<polygon points="250,10 300,60 200,60" fill="orange"/>
<!-- Polyline -->
<polyline points="10,100 50,150 90,100 130,150" fill="none" stroke="green" stroke-width="3"/>
</svg>SVG Gradients :
SVG supports linear and radial gradients:
Example :
<svg width="400" height="150">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:red;stop-opacity:1" />
<stop offset="100%" style="stop-color:yellow;stop-opacity:1" />
</linearGradient>
</defs>
<rect x="10" y="10" width="200" height="80" fill="url(#grad1)" />
</svg>5. Inline vs External SVG
Inline SVG
Written directly in HTML.
Can be styled with CSS and scripted with JavaScript.
Example :
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" fill="blue"/>
</svg>External SVG
Stored in a separate .svg file and embedded using <img> or <object>:
Example :
<img src="logo.svg" alt="Company Logo">Interactivity and Animation
SVG supports CSS and JavaScript for interactivity:
Exapmle : Hover Effect
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" fill="blue" class="hoverCircle"/>
</svg>
<style>
.hoverCircle:hover {
fill: orange;
cursor: pointer;
}
</style>Accessibility Tips
Use <title> and <desc> inside SVG for screen readers:
Example :
<svg width="100" height="100" role="img">
<title>Blue Circle</title>
<desc>A simple blue circle graphic</desc>
<circle cx="50" cy="50" r="40" fill="blue"/>
</svg>HTML example covering the main SVG graphics :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG Full Example</title>
<style>
.hoverCircle:hover {
fill: orange;
cursor: pointer;
}
</style>
</head>
<body>
<h1 style="text-align:center;">SVG Full Example: Shapes, Text, Gradients & Animation</h1>
<svg width="600" height="400" style="border:1px solid #000;" role="img">
<!-- Title & Description for accessibility -->
<title>SVG Demo</title>
<desc>Demonstrates rectangles, circles, gradients, text, hover effects, and animation</desc>
<!-- Rectangle with stroke and fill -->
<rect x="20" y="20" width="150" height="80" fill="lightblue" stroke="blue" stroke-width="3"/>
<!-- Circle with gradient fill -->
<defs>
<radialGradient id="gradCircle" cx="50%" cy="50%" r="50%">
<stop offset="0%" style="stop-color:yellow; stop-opacity:1" />
<stop offset="100%" style="stop-color:red; stop-opacity:1" />
</radialGradient>
</defs>
<circle cx="300" cy="60" r="50" fill="url(#gradCircle)" stroke="black" stroke-width="2"/>
<!-- Ellipse -->
<ellipse cx="500" cy="80" rx="60" ry="30" fill="green"/>
<!-- Polygon -->
<polygon points="50,200 150,200 100,250" fill="purple"/>
<!-- Polyline -->
<polyline points="200,180 250,220 300,180 350,220" fill="none" stroke="orange" stroke-width="3"/>
<!-- Text -->
<text x="200" y="300" font-family="Arial" font-size="24" fill="blue">Hello SVG!</text>
<!-- Hover Circle -->
<circle cx="100" cy="350" r="30" fill="pink" class="hoverCircle"/>
<!-- Animated Circle -->
<circle cx="400" cy="350" r="25" fill="red">
<animate attributeName="cx" from="400" to="500" dur="2s" repeatCount="indefinite"/>
</circle>
</svg>
</body>
</html>Output :
