HTML TUTORIALS-
HTML SVG Graphics Tag –
Introduction-
Complete Guide to HTML SVG Tag: How to Create, Style and Use Scalable Vector Graphics in Modern Websites
🔹All HTML SVG Graphics allow you to create scalable vector graphics directly within your HTML documents. SVG stands for Scalable Vector Graphics, and it is an XML-based format for describing vector graphics...
✅ Why Use SVG in HTML?:-
✅ Scalable: SVG images do not lose quality when zoomed or resized-
✅ Text-based: Easily editable and searchable (good for SEO)-
✅ Interactive: You can add animations, events, and styles via CSS or JavaScript-
✅ Lightweight: Often smaller file sizes compared to raster images for simple graphics-
✅ 1. Basic Syntax:-
<svg width="200" height="200">
<circle cx="100" cy="100" r="80" stroke="black" stroke-width="3" fill="red" />
</svg>
🎨 2.Example with Multiple Shapes:-
<svg width="300" height="200">
<rect x="10" y="10" width="100" height="50" fill="blue" />
<circle cx="200" cy="50" r="40" fill="green" />
<line x1="10" y1="100" x2="290" y2="100" stroke="black" stroke-width="2" />
</svg>
✅ 3. Styling SVG with CSS:-👇
<style>
circle {
fill: orange;
stroke: purple;
stroke-width: 4;
}
</style>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" />
</svg>
⚙️ 4. Animating SVG:-👇
<svg width="100" height="100">
<circle cx="50" cy="50" r="30" fill="blue">
<animate attributeName="r" from="10" to="30" dur="1s" repeatCount="indefinite" />
</circle>
</svg>