HTML Tutorial
INTRODUCTION
HTML BASIC TAGS
INLINE & BLOCK ELEMENTS
HTML LISTS
HTML TABLES
HTML FORMS
HEAD ELEMENTS
HTML MEDIA
MISCELLANEOUS TAGS
SVG in HTML
SVG (Scalable Vector Graphics) allows you to embed crisp, resolution-independent graphics directly into your HTML. It’s a perfect for icons, logos, charts, and other visuals that need to scale without quality loss.
What is SVG?
- SVG stands for Scalable Vector Graphics.
- Unlike JPG or ONG images, SVGs are made of vectors (mathematical shapes) rather than pixels.
- This means they can be resized infinitely without becoming blurry.
Benefit of Using SVG:
- Scalable: Always sharp on all screen sizes and resolution.
- Lightweight: Smaller file size for simple graphics.
- Customizable: You can style and animate SVGs using CSS and JavaScript.
How to Embed SVG in HTML
There are three common ways to use SVG in webpage.
Inline SVG
You write the SVG code directly in your HTML document.
<svg height="100" width="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
Using the <img> tag
Use the SVG file like any image.
<img decoding="async" src="image.svg" alt="Sample SVG">
As a CSS Background
Set an SVG as a background image via CSS.
.background {
background-image: url('image.svg');
}
Key SVG Attributes
width/height: Set the size of the SVG.viewBox: Define the coordinate system and makes the SVG responsive.fill: Sets the fill color.stroke: Sets the border color of shapes.
Practical Example:
Simple Icon (square)
<svg height="30" width="30">
<rect width="30" height="30" style="fill:blue;stroke:black;stroke-width:1" />
</svg>
Simple Icon (circle)
<svg height="100" width="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
Complex shape (polygon)
<svg height="100" width="100">
<polygon points="50,15 90,85 10,85" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>
Conclusion
SVG is a modern, scalable, and flexible graphics format that works seamlessly with HTML. Whether you’re designing simple icons or detailed illustrations, SVG ensure quality, performance, and ease of use. It’s a must-learn tool for any web developer.