HTML SVG Tutorial

Learn how to create scalable vector graphics directly in your HTML

Introduction to SVG

SVG (Scalable Vector Graphics) is an XML-based markup language for describing two-dimensional vector graphics. SVG is resolution-independent and can scale to any size without losing quality.

Basic SVG Example:

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="purple" />
</svg><svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="purple" />
</svg>

Basic SVG Examples

1. Basic Shapes

SVG includes basic shape elements like rectangles, circles, and lines.

<svg width="300" height="150">
  <rect x="10" y="10" width="80" height="80" fill="#4f46e5" />
  <circle cx="200" cy="50" r="40" fill="#10b981" />
  <line x1="10" y1="120" x2="290" y2="120" stroke="#ef4444" stroke-width="5" />
</svg><svg width="300" height="150">
  <rect x="10" y="10" width="80" height="80" fill="#4f46e5" />
  <circle cx="200" cy="50" r="40" fill="#10b981" />
  <line x1="10" y1="120" x2="290" y2="120" stroke="#ef4444" stroke-width="5" />
</svg>

2. Path Element

The <path> element is the most powerful SVG element, allowing you to create complex shapes.

<svg width="200" height="200">
  <path d="M10 10 L100 10 L100 100 L10 100 Z" fill="#f59e0b" />
  <path d="M120 10 C170 10, 170 100, 120 100 S70 190, 120 190" fill="none" stroke="#3b82f6" stroke-width="3" />
</svg><svg width="200" height="200">
  <path d="M10 10 L100 10 L100 100 L10 100 Z" fill="#f59e0b" />
  <path d="M120 10 C170 10, 170 100, 120 100 S70 190, 120 190" fill="none" stroke="#3b82f6" stroke-width="3" />
</svg>

3. Text and Styling

SVG includes powerful text capabilities and CSS styling options.

<svg width="400" height="150">
  <rect x="0" y="0" width="100%" height="100%" fill="#f3f4f6" />
  <text x="50" y="50" font-family="Arial" font-size="30" fill="#4f46e5" style="filter: drop-shadow(3px 3px 5px rgba(0,0,0,0.5))">
    Hello SVG!
  </text>
  <text x="50" y="100" font-family="Georgia" font-style="italic" font-size="24" fill="none" stroke="#ef4444" stroke-width="2">
    Styled Text
  </text>
  <text x="50" y="140" font-family="Verdana" font-weight="bold" font-size="28" fill="url(#gradient)">
    Gradient Text
  </text>
  <defs>
    <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#10b981" />
      <stop offset="100%" stop-color="#3b82f6" />
    </linearGradient>
  </defs>
</svg><svg width="400" height="150">
  <rect x="0" y="0" width="100%" height="100%" fill="#f3f4f6" />
  <text x="50" y="50" font-family="Arial" font-size="30" fill="#4f46e5" style="filter: drop-shadow(3px 3px 5px rgba(0,0,0,0.5))">
    Hello SVG!
  </text>
  <text x="50" y="100" font-family="Georgia" font-style="italic" font-size="24" fill="none" stroke="#ef4444" stroke-width="2">
    Styled Text
  </text>
  <text x="50" y="140" font-family="Verdana" font-weight="bold" font-size="28" fill="url(#gradient)">
    Gradient Text
  </text>
  <defs>
    <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#10b981" />
      <stop offset="100%" stop-color="#3b82f6" />
    </linearGradient>
  </defs>
</svg>

SVG Elements Reference

Element	Description	Example
`<svg>`	The container element that defines the SVG document	`<svg width="100" height="100"></svg>`
`<rect>`	Creates a rectangle	`<rect x="10" y="10" width="80" height="60" fill="blue" />`
`<circle>`	Creates a circle	`<circle cx="50" cy="50" r="40" fill="red" />`
`<ellipse>`	Creates an ellipse	`<ellipse cx="50" cy="50" rx="40" ry="30" fill="green" />`
`<line>`	Creates a line	`<line x1="10" y1="10" x2="90" y2="90" stroke="black" />`
`<polyline>`	Creates a series of connected straight lines	`<polyline points="10,10 40,40 10,70" fill="none" stroke="black" />`
`<polygon>`	Creates a closed shape consisting of connected straight lines	`<polygon points="50,10 90,90 10,90" fill="yellow" />`
`<path>`	Creates complex shapes using path commands	`<path d="M10 10 L90 10 L90 90 L10 90 Z" fill="blue" />`
`<text>`	Creates text	`<text x="10" y="50" font-family="Arial" font-size="20">Hello</text>`
`<g>`	Groups SVG elements together	`<g fill="red"><circle cx="50" cy="50" r="40" /></g>`
`<defs>`	Defines reusable elements	`<defs><linearGradient id="grad1">...</linearGradient></defs>`

Advanced SVG Techniques

1. Gradients and Patterns

SVG supports linear and radial gradients, as well as pattern fills.

<svg width="400" height="200">
  <defs>
    <linearGradient id="linearGradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#4f46e5" />
      <stop offset="100%" stop-color="#10b981" />
    </linearGradient>
    <radialGradient id="radialGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" stop-color="#f59e0b" />
      <stop offset="100%" stop-color="#ef4444" />
    </radialGradient>
    <pattern id="pattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
      <circle cx="10" cy="10" r="5" fill="#3b82f6" />
    </pattern>
  </defs>
  
  <rect x="10" y="10" width="120" height="120" fill="url(#linearGradient)" />
  <circle cx="300" cy="70" r="60" fill="url(#radialGradient)" />
  <rect x="10" y="140" width="120" height="50" fill="url(#pattern)" />
</svg><svg width="400" height="200">
  <defs>
    <linearGradient id="linearGradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#4f46e5" />
      <stop offset="100%" stop-color="#10b981" />
    </linearGradient>
    <radialGradient id="radialGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" stop-color="#f59e0b" />
      <stop offset="100%" stop-color="#ef4444" />
    </radialGradient>
    <pattern id="pattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
      <circle cx="10" cy="10" r="5" fill="#3b82f6" />
    </pattern>
  </defs>
  
  <rect x="10" y="10" width="120" height="120" fill="url(#linearGradient)" />
  <circle cx="300" cy="70" r="60" fill="url(#radialGradient)" />
  <rect x="10" y="140" width="120" height="50" fill="url(#pattern)" />
</svg>

2. Filters and Effects

SVG provides powerful filter effects like blurring, lighting, and more.

<svg width="400" height="200">
  <defs>
    <filter id="blur" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
    </filter>
    <filter id="shadow" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceGraphic" dx="5" dy="5" />
      <feColorMatrix result="matrixOut" in="offOut" type="matrix"
        values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0" />
      <feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="2" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
  
  <rect x="10" y="10" width="100" height="100" fill="#4f46e5" filter="url(#blur)" />
  <rect x="150" y="10" width="100" height="100" fill="#10b981" filter="url(#shadow)" />
  <text x="50" y="150" font-family="Arial" font-size="20" fill="#ef4444" filter="url(#shadow)">
    Filter Effects
  </text>
</svg><svg width="400" height="200">
  <defs>
    <filter id="blur" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
    </filter>
    <filter id="shadow" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceGraphic" dx="5" dy="5" />
      <feColorMatrix result="matrixOut" in="offOut" type="matrix"
        values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0" />
      <feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="2" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
  
  <rect x="10" y="10" width="100" height="100" fill="#4f46e5" filter="url(#blur)" />
  <rect x="150" y="10" width="100" height="100" fill="#10b981" filter="url(#shadow)" />
  <text x="50" y="150" font-family="Arial" font-size="20" fill="#ef4444" filter="url(#shadow)">
    Filter Effects
  </text>
</svg>

3. SVG Animation

SVG can be animated using SMIL (Synchronized Multimedia Integration Language) or CSS.

<svg width="300" height="200">
  <rect x="10" y="10" width="50" height="50" fill="#3b82f6">
    <animate attributeName="x" from="10" to="240" dur="3s" repeatCount="indefinite" />
  </rect>
  <circle cx="150" cy="120" r="20" fill="#ef4444">
    <animate attributeName="fill" values="#ef4444;#10b981;#3b82f6;#ef4444" dur="4s" repeatCount="indefinite" />
  </circle>
  <text x="50" y="180" font-family="Arial" font-size="16" fill="#000">
    <animate attributeName="opacity" values="0;1;0" dur="2s" repeatCount="indefinite" />
    Animated SVG
  </text>
</svg><svg width="300" height="200">
  <rect x="10" y="10" width="50" height="50" fill="#3b82f6">
    <animate attributeName="x" from="10" to="240" dur="3s" repeatCount="indefinite" />
  </rect>
  <circle cx="150" cy="120" r="20" fill="#ef4444">
    <animate attributeName="fill" values="#ef4444;#10b981;#3b82f6;#ef4444" dur="4s" repeatCount="indefinite" />
  </circle>
  <text x="50" y="180" font-family="Arial" font-size="16" fill="#000">
    <animate attributeName="opacity" values="0;1;0" dur="2s" repeatCount="indefinite" />
    Animated SVG
  </text>
</svg>

Conclusion

SVG is a powerful tool for creating resolution-independent graphics that can be styled with CSS and animated with JavaScript. It's perfect for icons, logos, charts, and complex illustrations.

Try HTML Editor More HTML Tutorials

< Previous (Canvas)Next (Geolocation) >