SVG Basics Guide

What is SVG? Scalable Vector Graphics — XML-based format that scales infinitely without quality loss.

Best for: Logos, icons, illustrations, charts, animations, interactive graphics

Not for: Photographs and complex images with millions of colors (use JPEG/WebP)

Advantages: Infinite scaling, small file size for simple graphics, CSS/JS animatable, SEO-friendly (text is readable by search engines)

Usage methods:
1. Inline SVG (best for animation/interaction)
2. <img src="icon.svg"> (simplest)
3. CSS background-image (for decorative use)

<!-- Basic SVG circle -->
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" fill="#6c63ff" />
</svg>

संबंधित टूल