Search tools...
CMDK
← Tools
SVG

SVG Editor

Write and preview SVG markup in real time. Insert shapes, load presets, and download your file.

SVG Markup550 chars
PreviewValid SVG
SVG Editor

SVG Basics

SVG (Scalable Vector Graphics) is an XML-based format for 2D vector graphics. Unlike raster images, SVGs scale to any size without quality loss — ideal for icons, logos, and illustrations on the web.

Every SVG starts with a <svg> root element. The viewBox attribute defines the coordinate system (x y width height), while width/height set the rendered pixel size.

Shape Elements

  • <rect> — Rectangle; add rx/ry for rounded corners
  • <circle> — Circle with centre cx, cy and radius r
  • <ellipse> — Ellipse with independent rx and ry
  • <line> — Straight line between two points
  • <polygon> — Closed shape from a list of x,y points
  • <path> — Arbitrary curves via M L C Q A Z commands
  • <text> — Scalable, styleable text

Tips & Shortcuts

  • Click an Insert button to add a shape snippet at the cursor
  • Tab inserts 2 spaces for comfortable indentation
  • Wrap related shapes in <g> to share opacity or transform
  • Define reusable gradients in <defs>; reference with fill="url(#id)"
  • Use <animate> for SMIL animations — no JavaScript needed
  • Download .svg saves a standalone file ready for use in HTML or Figma

Frequently Asked Questions

Can I use the downloaded SVG in HTML?

Yes. Inline it directly in HTML, use it as <img src="image.svg">, or reference it in CSS as a background. Inline SVGs support CSS styling and JavaScript interaction.

What does viewBox do?

viewBox="0 0 400 300" defines the internal coordinate space. The SVG scales to fill its container while preserving aspect ratio. The width/height attributes set the default rendered pixel size.

How do gradients work?

Define a <linearGradient> or <radialGradient> inside <defs> with a unique id, then reference it with fill="url(#id)" on any shape.

Why is my SVG not rendering?

Check that the root element is <svg> with the xmlns attribute set. Unclosed tags or mismatched brackets break parsing. The badge in the preview header shows whether the markup looks valid.