Back to Tools

SVG Generator

Create scalable vector graphics with an interactive drawing tool

Drawing Canvas

Click and drag to draw shapes

0 Elements Tip: Hold shift while drawing for perfect squares/circles

Output

Preview, code, or export your drawing

This SVG scales infinitely without losing quality

How Vector Graphics (SVGs) Work

SVG (Scalable Vector Graphics) is an XML-based format for describing two-dimensional graphics. Unlike raster images (PNG, JPEG) that store pixel data, SVGs store mathematical descriptions of shapes.

Vector vs Raster

Vector (SVG)
  • Math-based: "Circle at (100,100) with radius 50"
  • Infinitely scalable without quality loss
  • Small file sizes for simple graphics
  • Can be styled with CSS
  • Searchable and accessible text
Raster (PNG/JPEG)
  • Pixel-based: "Pixel at (100,100) is #FF0000"
  • Gets blurry when scaled up
  • Better for photos and complex images
  • Fixed resolution
  • Universal browser support

SVG Shape Elements

  • <rect>: Rectangles with x, y, width, height
  • <circle>: Circles with cx, cy, r (center and radius)
  • <line>: Lines with x1, y1, x2, y2 endpoints
  • <path>: Complex shapes using path commands (M, L, C, etc.)
  • <polygon>: Closed shapes with multiple points

When to Use SVG

  • Logos and icons (scale to any size)
  • Charts and data visualizations
  • Illustrations and diagrams
  • Animated graphics
  • Interactive elements (hover effects, click handlers)

Common Attributes

  • stroke: Outline color
  • fill: Interior color
  • stroke-width: Outline thickness
  • viewBox: Coordinate system and aspect ratio
  • transform: Rotate, scale, translate