SVG Editor & Viewer
Edit SVG code with real-time preview and export options
SVG Code
Preview
100%
Preview Settings
SVG bounds
Export
PNG export uses the current background setting (except checkerboard = transparent).
SVG Quick Reference
Basic Shapes
- <rect x y width height />
- <circle cx cy r />
- <ellipse cx cy rx ry />
- <line x1 y1 x2 y2 />
- <polygon points />
Paths
- M x y - Move to
- L x y - Line to
- H x - Horizontal line
- V y - Vertical line
- C x1 y1 x2 y2 x y - Curve
- Z - Close path
Styling
- fill="color"
- stroke="color"
- stroke-width="n"
- opacity="0-1"
- transform="..."
Features
- Real-time SVG preview
- Syntax highlighting for SVG code
- Multiple background options (transparent, white, black, checker, custom)
- Zoom in/out preview
- Show grid overlay
- Show SVG bounds outline
- Format and minify SVG code
- Export as SVG or PNG
- Upload existing SVG files
- SVG quick reference guide
Frequently Asked Questions
What is SVG?
SVG (Scalable Vector Graphics) is an XML-based format for vector images. Unlike PNG or JPG, SVGs can scale to any size without losing quality.
Why use the checkerboard background?
The checkerboard pattern helps visualize transparency in your SVG. Areas showing the checker pattern are transparent.
Can I convert SVG to PNG?
Yes! Click "Download PNG" to export your SVG as a raster image. The PNG will use your selected background (except checkerboard = transparent).
How do I make my SVG responsive?
Remove fixed width/height attributes and use viewBox instead. For example: <svg viewBox="0 0 100 100"> will scale to fit its container.