? SVG in HTML

SVG (Scalable Vector Graphics) is an XML-based format for describing 2D vector graphics directly in HTML.

Why Use SVG?

• Scales perfectly without losing quality (resolution independent)

• Can be styled and animated with CSS and JavaScript

• Great for icons, logos, charts, and illustrations

How to Use SVG in HTML

1. Inline SVG

Embed SVG code directly inside your HTML:

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /></svg>

2. Using <img> Tag

Reference an external .svg file like an image:

<img src="image.svg" alt="Example SVG" width="100" height="100" />

3. Using <object> or <iframe>

Embed external SVG files:

<object data="image.svg" type="image/svg+xml"></object>

Basic SVG Shapes Example

<svg width="200" height="150" xmlns="http://www.w3.org/2000/svg">  <rect x="10" y="10" width="100" height="50" fill="blue" />  <circle cx="150" cy="50" r="40" fill="red" />  <line x1="0" y1="140" x2="200" y2="140" stroke="black" stroke-width="2" /></svg>

Styling and Animation

You can use CSS to style SVG elements and JavaScript to animate them for interactive graphics.

Want me to help create custom SVG icons or show how to animate SVG?