A free SVG code editor with schema-aware autocomplete and live preview. The optional AI assistance (marked Pro) runs on credits — every account gets 50 free each month — while everything else is free.
AI Chat
Type a request like "make the circles red", "add a drop shadow to all text", or "translate all text to German". The AI reads your current SVG, generates modified code, and shows a diff. You review the changes and accept or reject. Multi-turn conversations work — each message builds on the previous context. Also useful for translating text content in SVGs to other languages.
Image Generation & Vectorizer
Describe an image in text and the AI generates a raster PNG. The built-in vectorizer then converts it to SVG paths. You can tune the vectorization: number of colors, speckle filtering threshold, corner threshold, curve optimization, and path simplification. The result is inserted directly into the editor.
Image Modification
Ask the AI to modify a previously generated image — add elements, change colors, or refine details. The AI edits the existing raster image based on your instructions, then re-vectorizes it to SVG. Multiple modifications can be chained in the same conversation.
Model Selector
Switch between AI models (GPT-4o, Claude, o4-mini, etc.) from a dropdown. Each model has different strengths — faster responses vs. better reasoning. A "reasoning effort" slider lets you trade speed for quality on complex edits.
Icon Search
Search across 200,000+ open-source icons (Material, FontAwesome, Lucide, etc.) by keyword. Select one and the AI inserts it into your SVG as inline paths, positioned and scaled to fit the existing viewBox. No external dependencies — pure SVG.
Monaco Editor
The same editor engine used in VS Code. Provides syntax highlighting, bracket matching, code folding, multi-cursor editing, find/replace with regex, and minimap. The SVG preview updates live as you type.
Element Autocomplete
Type "<" to get a list of all valid SVG elements with descriptions. The completion list is generated from the SVG spec schema and includes elements like <filter>, <clipPath>, <linearGradient> that are hard to remember.
Hover Documentation
Hover over any SVG element or attribute name to see a tooltip with its description from the SVG specification. Useful when you need to check what an attribute does without leaving the editor.
Attribute Completion
Inside an element tag, trigger autocomplete to see all valid attributes for that specific element. Each suggestion includes a description. For example, inside <rect> you get x, y, width, height, rx, ry — not the full list of every possible attribute.
Value Completion
For attributes with a fixed set of allowed values (like cursor, stroke-linecap, font-style), the editor suggests the valid options. No need to look up which values are accepted.
Color Picker
Color values in the code show an inline color swatch. Click it to open a color picker that supports hex, RGB, HSL, and named SVG colors. The picked color is written back into the attribute.
Zoom Controls
Toolbar buttons for zoom in, zoom out, reset to 100%, and fit to window. Ctrl+scroll also works. The current zoom percentage is shown in the toolbar.
Background Modes
Four background options: light checkerboard, dark checkerboard, solid white, and solid black. Checkerboard patterns make transparent regions visible. Dark/light solid backgrounds help check contrast.
Click-to-Select
Click an element in the preview and the editor jumps to the corresponding line in the source code. A bounding box is drawn around the selected element. Works with nested groups and transformed elements.
Cloud Storage
Files are saved to Firebase with auto-generated SVG thumbnails. Each file can be toggled between public (shareable link) and private. The files page shows a grid of all saved files with their thumbnails.