HTML '<svg>' Element

🖼️ Introduction to HTML SVG

SVG stands for Scalable Vector Graphics. It's a powerful way to define vector-based graphics using XML directly in HTML. Unlike raster images (like PNG or JPEG), SVGs do not lose quality when zoomed or resized. Perfect for icons, charts, logos, and illustrations. 💡

>>“SVG is the language of resolution-independent graphics on the web.” 🌐

📌 Basic SVG Syntax

Basic Inline SVG Example

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

Note

🧠 SVG elements are written in XML syntax. You can include them directly in HTML or load them as external files.

🔍 Common SVG Elements

ElementDescription
<circle>Draws a circle using cx, cy, and r
<rect>Draws a rectangle using x, y, width, and height
<line>Draws a line from point A to B using x1, y1, x2, y2
<path>Draws complex shapes using path data (d attribute)
<text>Displays text within the SVG

🎨 Styling SVGs

SVGs can be styled using fill, stroke, and stroke-width attributes directly in the element, or via CSS. Here's an example of styling with attributes:

SVG Styling Example

<svg width="120" height="120">
  <rect x="10" y="10" width="100" height="100" fill="blue" stroke="black" stroke-width="5"/>
</svg>

Note

💡 Use fill="none" to make a shape transparent and stroke to outline it.

🔧 Animating SVG with SMIL

Simple Animation

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="red">
    <animate attributeName="r" from="10" to="40" dur="1s" repeatCount="indefinite" />
  </circle>
</svg>

Note

⚠️ SMIL animations are not supported in all browsers. Prefer CSS or JavaScript-based animation if needed.

🧪 SVG Use Cases

  • 📈 Data Visualizations (graphs, charts)
  • 🔍 Resolution-Independent Icons and Logos
  • 🎯 Interactive Maps and Diagrams
  • 🌀 Animations and Infographics
  • 🖌️ Drawing Apps or Tools

🔗 External vs Inline SVG

You can embed SVG inline in your HTML (recommended for styling/interactions) or include it as an external image using <img> or <object>.

External SVG Example

<img src="graphic.svg" alt="vector image" />

📚 Learn More

>>“With SVG, every pixel bends to your will. Code it, scale it, own it.” 💪