What is SVG?

What You'll Learn

What SVG is and why use it
Common SVG elements
Styling with CSS

SVG (Scalable Vector Graphics) is an XML-based format for vector images. Unlike bitmap images (PNG, JPG), SVGs scale to any size without losing quality.

Perfect For

Logos
Icons
Illustrations
Charts

Basic Example

index.htmlHTML

<svg width="200" height="200" viewBox="0 0 200 200">
  <!-- Rectangle -->
  <rect x="10" y="10" width="80" height="60" fill="blue"/>

  <!-- Circle -->
  <circle cx="150" cy="50" r="40" fill="red"/>

  <!-- Line -->
  <line x1="10" y1="100" x2="190" y2="100"
        stroke="green" stroke-width="2"/>

  <!-- Text -->
  <text x="100" y="180" text-anchor="middle" fill="black">
    SVG Text
  </text>
</svg>

CSS Styling

styles.cssCSS

svg rect:hover { fill: darkblue; }
svg circle { transition: fill 0.3s; }

External SVG

index.htmlHTML

<img src="logo.svg" alt="Logo">