HTML SVG

Learn SVG (Scalable Vector Graphics) for creating crisp, scalable graphics, icons, and illustrations that look perfect at any size.

Introduction to SVG

SVG (Scalable Vector Graphics) is an XML-based vector image format that creates graphics using mathematical descriptions of shapes, paths, and colors. Unlike bitmap images, SVG graphics are infinitely scalable without quality loss and can be styled with CSS and animated with JavaScript.

SVG is perfect for logos, icons, simple illustrations, and graphics that need to look crisp on high-resolution displays and at various sizes. It integrates seamlessly with HTML and can be manipulated like any other DOM element.

📐 Key Concept

SVG creates graphics using math-based shapes and paths, making them infinitely scalable and perfect for responsive web design and high-DPI displays.

Basic SVG Structure

SVG graphics are defined within the <svg> element with coordinate system and viewBox: 

<!-- Basic SVG container -->
<svg width="200" height="200" viewBox="0 0 200 200">
    <!-- SVG content goes here -->
</svg>

<!-- SVG with namespace (recommended for standalone files) -->
<svg xmlns="http://www.w3.org/2000/svg" 
     width="100" height="100" 
     viewBox="0 0 100 100">
    
    <!-- Simple circle -->
    <circle cx="50" cy="50" r="40" 
            fill="#007bff" stroke="#333" stroke-width="2">
    </circle>
</svg>
SVG Coordinate System:
  • Origin (0,0) is at top-left corner
  • X-axis increases rightward
  • Y-axis increases downward
  • viewBox defines the coordinate system
  • width/height set display dimensions

Basic SVG Shapes

<svg width="500" height="300" viewBox="0 0 500 300">
    <!-- Rectangle -->
    <rect x="20" y="20" width="100" height="80"
          fill="#ff6b6b" stroke="#333" stroke-width="2">
    </rect>
    
    <!-- Rounded rectangle -->
    <rect x="140" y="20" width="100" height="80"
          rx="15" ry="15"
          fill="#4ecdc4">
    </rect>
    
    <!-- Circle -->
    <circle cx="320" cy="60" r="40"
            fill="#45b7d1" stroke="#333" stroke-width="3">
    </circle>
    
    <!-- Ellipse -->
    <ellipse cx="430" cy="60" rx="30" ry="50"
             fill="#f7b731">
    </ellipse>
    
    <!-- Line -->
    <line x1="20" y1="150" x2="120" y2="200"
          stroke="#5f27cd" stroke-width="4">
    </line>
    
    <!-- Polyline (connected lines) -->
    <polyline points="150,150 200,120 250,180 300,140"
              fill="none" stroke="#ff9ff3" stroke-width="3">
    </polyline>
    
    <!-- Polygon (closed shape) -->
    <polygon points="350,150 400,120 450,150 430,200 370,200"
             fill="#54a0ff" stroke="#333" stroke-width="2">
    </polygon>
</svg>

SVG Paths

Paths are the most powerful SVG element, allowing complex shapes using drawing commands: 

<svg width="400" height="300" viewBox="0 0 400 300">
    <!-- Simple path with move and line commands -->
    <path d="M 50 50 L 150 50 L 100 150 Z"
          fill="#ff6b6b" stroke="#333" stroke-width="2">
    </path>
    
    <!-- Curved path with quadratic Bezier -->
    <path d="M 200 50 Q 250 20 300 50 T 350 80"
          fill="none" stroke="#4ecdc4" stroke-width="3">
    </path>
    
    <!-- Cubic Bezier curve -->
    <path d="M 50 150 C 75 100, 125 200, 150 150"
          fill="none" stroke="#45b7d1" stroke-width="4">
    </path>
    
    <!-- Arc path -->
    <path d="M 200 150 A 50 30 0 1 1 300 150"
          fill="none" stroke="#f7b731" stroke-width="3">
    </path>
    
    <!-- Complex shape -->
    <path d="M 50 220 
             L 80 200 
             Q 110 180 140 200 
             L 170 220 
             C 180 240, 160 260, 140 250
             Q 110 240 80 250
             C 60 260, 40 240, 50 220 Z"
          fill="#5f27cd" stroke="#333" stroke-width="2">
    </path>
</svg>
Path Commands:
  • M - Move to (start new path)
  • L - Line to
  • H - Horizontal line
  • V - Vertical line
  • Q - Quadratic Bezier curve
  • C - Cubic Bezier curve
  • A - Arc
  • Z - Close path

SVG Text and Styling

<svg width="500" height="200" viewBox="0 0 500 200">
    <!-- Basic text -->
    <text x="50" y="50" 
          font-family="Arial, sans-serif" 
          font-size="24" 
          fill="#333">
        SVG Text
    </text>
    
    <!-- Styled text -->
    <text x="200" y="50" 
          font-family="Arial, sans-serif" 
          font-size="20" 
          font-weight="bold"
          fill="#007bff" 
          stroke="#333" 
          stroke-width="1">
        Styled Text
    </text>
    
    <!-- Text along a path -->
    <defs>
        <path id="textPath" 
              d="M 50 100 Q 150 50 250 100 T 450 100">
        </path>
    </defs>
    
    <text font-family="Arial" font-size="18" fill="#ff6b6b">
        <textPath href="#textPath">
            Text Following a Curved Path
        </textPath>
    </text>
    
    <!-- Multi-line text with tspan -->
    <text x="50" y="150" font-family="Arial" font-size="16">
        <tspan x="50" dy="0" fill="#4ecdc4">Line 1</tspan>
        <tspan x="50" dy="20" fill="#45b7d1">Line 2</tspan>
        <tspan x="50" dy="20" fill="#f7b731">Line 3</tspan>
    </text>
</svg>

Gradients and Patterns

<svg width="400" height="300" viewBox="0 0 400 300">
    <defs>
        <!-- Linear gradient -->
        <linearGradient id="linearGrad" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" stop-color="#ff6b6b">
            <stop offset="100%" stop-color="#4ecdc4">
        </linearGradient>
        
        <!-- Radial gradient -->
        <radialGradient id="radialGrad" cx="50%" cy="50%" r="50%">
            <stop offset="0%" stop-color="#f7b731">
            <stop offset="100%" stop-color="#5f27cd">
        </radialGradient>
        
        <!-- Pattern -->
        <pattern id="dotPattern" x="0" y="0" width="20" height="20" 
                 patternUnits="userSpaceOnUse">
            <circle cx="10" cy="10" r="5" fill="#45b7d1">
        </pattern>
    </defs>
    
    <!-- Rectangle with linear gradient -->
    <rect x="50" y="50" width="120" height="80" 
          fill="url(#linearGrad)">
    
    <!-- Circle with radial gradient -->
    <circle cx="280" cy="90" r="50" 
            fill="url(#radialGrad)">
    
    <!-- Rectangle with pattern -->
    <rect x="50" y="180" width="200" height="80" 
          fill="url(#dotPattern)" 
          stroke="#333" stroke-width="2">
</svg>

SVG Icons Example

<!-- Icon library using SVG -->
<div class="icon-gallery">
    <!-- Home icon -->
    <svg width="32" height="32" viewBox="0 0 24 24" fill="currentColor">
        <path d="M12 2L2 7v10c0 5.55 3.84 10 9 11 5.16-1 9-5.45 9-11V7l-10-5z">
        <path d="M12 2l-8 5v8l8 5 8-5v-8l-8-5zm6 11l-6 3.5L6 13V9l6-3.5L18 9v4z">
    </svg>
    
    <!-- User icon -->
    <svg width="32" height="32" viewBox="0 0 24 24" fill="none" 
         stroke="currentColor" stroke-width="2">
        <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2">
        <circle cx="12" cy="7" r="4">
    </svg>
    
    <!-- Settings icon -->
    <svg width="32" height="32" viewBox="0 0 24 24" fill="none"
         stroke="currentColor" stroke-width="2">
        <circle cx="12" cy="12" r="3">
        <path d="m12 1 4.5 2.8L21 1v6l-2.5 4.5L21 16v6l-4.5-2.8L12 23l-4.5-2.8L3 23v-6l2.5-4.5L3 8V2l4.5 2.8L12 1z">
    </svg>
    
    <!-- Heart icon -->
    <svg width="32" height="32" viewBox="0 0 24 24" fill="#ff6b6b">
        <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z">
    </svg>
</div>

<!-- CSS styling for icons -->
<style>
.icon-gallery {
    display: flex;
    gap: 20px;
    align-items: center;
    padding: 20px;
}

.icon-gallery svg {
    color: #333;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.icon-gallery svg:hover {
    transform: scale(1.1);
    color: #007bff;
}
</style>

SVG vs Other Graphics

SVG Advantages

  • Infinitely scalable without quality loss
  • Small file sizes for simple graphics
  • Can be styled with CSS
  • Interactive with JavaScript
  • Searchable and accessible text
  • Works in all modern browsers

When to Use SVG

  • Icons and logos
  • Simple illustrations
  • Data visualizations
  • Interactive graphics
  • Print-quality graphics
  • Responsive images

Best Practices

✅ Do

  • Use viewBox for scalable graphics
  • Optimize SVG files for web delivery
  • Use semantic naming for IDs and classes
  • Include title and desc elements for accessibility
  • Group related elements with <g>
  • Use CSS for styling when possible

❌ Avoid

  • Using SVG for complex photographs
  • Inline SVG for large graphics
  • Excessive decimal precision in coordinates
  • Unused gradients and patterns
  • Missing fallbacks for older browsers
  • Complex animations in critical rendering paths