SVG Documentation

Comprehensive guides, tutorials, and references for creating and manipulating SVG graphics.

Getting Started with SVG

Create Your First SVG

Start by defining an SVG element with basic shapes like circles or rectangles.

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

Add Custom Styles

Use SVG attributes like fill, stroke, and opacity to customize your vector graphics.

<svg width="200" height="100">
  <rect width="100" height="80" fill="violet" stroke="white" stroke-width="4" />
</svg>

Make It Interactive

Add hover effects, animations, or JavaScript interactions to bring your graphics to life.

<svg width="100" height="100" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="indigo" 
          onmouseover="this.setAttribute('fill', 'purple')" />
</svg>

Core SVG Concepts

SVG Elements

SVG is built with elements like path, rect, circle, and groupings with g. Each element has attributes defining shape, position, and style.

path

For complex shapes and curves

circle

For circular shapes

rect

For rectangles and squares

g

Groups multiple elements

Key Attributes

Control your SVG with these essential attributes:

fill - Specifies fill color
stroke - Define border color
opacity - Set transparency level
transform - Apply scaling, rotation

<rect width="100" height="50" 
        fill="purple" 
        stroke="white" 
        opacity="0.8" 
        transform="rotate(45 50 50)" />

Related Resources

📘 SVG API Reference 🛠 Interactive Examples 🌟 Advanced Examples