Scalable Vector Graphics (SVG)

Creating SVG Graphics

SVG can be embedded directly in HTML using the <svg> tag.

The viewBox attribute defines the coordinate system and aspect ratio.

Width and height attributes (or CSS) control the display size.

SVG elements like <rect>, <circle>, <line>, <path>, and <text> create shapes.

SVG coordinates start at the top-left corner (0,0) like Canvas.

<!-- Inline SVG -->
<svg width="200" height="200" viewBox="0 0 100 100">
  <!-- Rectangle -->
  <rect x="10" y="10" width="80" height="80" fill="blue" />
  
  <!-- Circle -->
  <circle cx="50" cy="50" r="30" fill="red" opacity="0.5" />
  
  <!-- Line -->
  <line x1="0" y1="0" x2="100" y2="100" stroke="black" stroke-width="2" />
</svg>

SVG Basic Shapes

<rect> creates rectangles with x, y, width, height, and optional rx/ry for rounded corners.

<circle> creates circles with cx (center x), cy (center y), and r (radius).

<ellipse> creates ellipses with cx, cy, rx (horizontal radius), and ry (vertical radius).

<line> creates straight lines with x1, y1 (start) and x2, y2 (end).

<polyline> and <polygon> create multi-point lines and closed shapes with a points attribute.

<svg width="400" height="300">
  <!-- Rectangle with rounded corners -->
  <rect x="10" y="10" width="100" height="60" rx="10" ry="10" fill="lightblue" />
  
  <!-- Circle -->
  <circle cx="200" cy="40" r="30" fill="orange" stroke="black" stroke-width="2" />
  
  <!-- Ellipse -->
  <ellipse cx="320" cy="40" rx="50" ry="30" fill="pink" />
  
  <!-- Line -->
  <line x1="10" y1="100" x2="390" y2="100" stroke="gray" stroke-width="2" />
  
  <!-- Polygon (triangle) -->
  <polygon points="200,120 250,200 150,200" fill="green" />
  
  <!-- Polyline -->
  <polyline points="10,250 50,220 90,270 130,240" 
            fill="none" stroke="blue" stroke-width="3" />
</svg>

SVG Paths

The <path> element is the most powerful SVG shape, capable of drawing any shape.

The d (data) attribute contains path commands: M (moveto), L (lineto), H (horizontal line), V (vertical line), C (curve), etc.

Uppercase commands use absolute coordinates, lowercase use relative coordinates.

Z or z closes the path by drawing a line back to the start.

Paths can create complex shapes, curves, and even custom fonts.

<svg width="400" height="300">
  <!-- Simple path (triangle) -->
  <path d="M 50 50 L 100 150 L 0 150 Z" fill="yellow" stroke="black" />
  
  <!-- Path with curves (heart shape) -->
  <path d="M 200 80 
           C 200 60, 220 40, 240 40 
           C 260 40, 280 60, 280 80 
           C 280 110, 240 140, 200 170 
           C 160 140, 120 110, 120 80 
           C 120 60, 140 40, 160 40 
           C 180 40, 200 60, 200 80 Z" 
        fill="red" />
  
  <!-- Bezier curve -->
  <path d="M 10 250 Q 100 180 200 250" 
        fill="none" stroke="blue" stroke-width="3" />
</svg>

SVG Text and Styling

The <text> element adds text to SVG graphics.

Use x and y attributes to position text, and text-anchor to align (start, middle, end).

SVG supports many CSS properties: fill, stroke, opacity, font-family, font-size, etc.

Use <tspan> for multi-line text or styled portions within text.

SVG can be styled with CSS classes and :hover effects.

<svg width="400" height="200">
  <!-- Basic text -->
  <text x="10" y="30" font-family="Arial" font-size="20" fill="black">
    Hello SVG!
  </text>
  
  <!-- Centered text -->
  <text x="200" y="80" text-anchor="middle" font-size="24" fill="blue">
    Centered Text
  </text>
  
  <!-- Multi-line text with tspan -->
  <text x="10" y="120" font-size="16">
    <tspan x="10" dy="0">Line 1</tspan>
    <tspan x="10" dy="20">Line 2</tspan>
    <tspan x="10" dy="20" fill="red">Line 3 (red)</tspan>
  </text>
</svg>

<style>
  svg text:hover { fill: red; }
</style>

SVG Gradients and Patterns

SVG supports linear and radial gradients defined in a <defs> section.

<linearGradient> creates color transitions along a line.

<radialGradient> creates radial color transitions.

Add <stop> elements within gradients to define colors at positions (0% to 100%).

Reference gradients using fill="url(#gradientId)" or stroke="url(#gradientId)".

<svg width="400" height="300">
  <defs>
    <!-- Linear gradient -->
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
    
    <!-- Radial gradient -->
    <radialGradient id="grad2">
      <stop offset="0%" style="stop-color:white" />
      <stop offset="100%" style="stop-color:blue" />
    </radialGradient>
  </defs>
  
  <!-- Use gradients -->
  <rect x="10" y="10" width="180" height="100" fill="url(#grad1)" />
  <circle cx="300" cy="60" r="50" fill="url(#grad2)" />
</svg>

SVG Animation

SVG can be animated with CSS animations and transitions.

The <animate> element animates SVG attributes over time.

The <animateTransform> element animates transformations (rotate, scale, translate).

CSS animations provide more control and are preferred in modern development.

SVG animations can be triggered by events or run continuously.

<svg width="200" height="200">
  <!-- SVG animate element -->
  <circle cx="100" cy="100" r="30" fill="red">
    <animate attributeName="r" from="30" to="50" 
             dur="1s" repeatCount="indefinite" 
             direction="alternate" />
  </circle>
</svg>

<!-- CSS animation (preferred) -->
<svg width="200" height="200">
  <circle class="pulse" cx="100" cy="100" r="30" fill="blue" />
</svg>

<style>
  @keyframes pulse {
    0%, 100% { r: 30px; }
    50% { r: 50px; }
  }
  .pulse {
    animation: pulse 2s infinite;
  }
</style>