A free SVG code editor with schema-aware autocomplete and live preview. The optional AI assistance (marked Pro) runs on credits — every account gets 30 free each month — while everything else is free.
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, proposes the change with a one-line summary and shows it in the preview, and you accept or reject it. Multi-turn conversations work — each message builds on the previous context. Also useful for translating text content in SVGs to other languages.
Learn moreA traced picture is unnamed shapes, so "make the hat red" used to be worked out from colours and coordinates alone. Now the assistant can look first: it outlines up to four shapes it suspects, each in its own colour, sees which sit on the part you named, and edits those.
Learn moreDescribe an image in text and the AI generates a raster PNG. The built-in vectorizer then converts it to SVG paths. Or paste a picture of your own into the chat: trace it for free, or have it redrawn as an illustration first. 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.
Learn moreAsk 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.
Learn moreSwitch between AI models from a dropdown — the GPT-5 family, Claude, DeepSeek and Kimi, with more under "Show all". Each has different strengths, and cheaper models cost fewer credits per request. On the models that support it, a reasoning effort control lets you trade speed for care on complex edits.
Learn moreSearch across 200,000+ open-source icons (Material, FontAwesome, Lucide, etc.) by keyword. Pick one and the AI inserts it into your SVG as inline markup, sized and placed to fit the drawing. No external dependencies — pure SVG, under licences that need no attribution.
Learn moreThe same editor engine used in VS Code. Provides syntax highlighting, bracket matching, code folding, multi-cursor editing, find/replace with regex, and document formatting. The SVG preview updates live as you type.
Learn moreType "<" 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.
Learn moreHover over any SVG element or attribute name to see a tooltip with its description from the MDN SVG reference. Useful when you need to check what an attribute does without leaving the editor.
Learn moreInside 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.
Learn moreFor 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.
Learn moreHex, rgb() and hsl() color values in the code show an inline color swatch. Click it to open a color picker; the picked color is written back into the attribute, as hex, RGB or HSL.
Learn moreToolbar 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.
Learn moreFour background options: light checkerboard, dark checkerboard, solid white, and solid black. Checkerboard patterns make transparent regions visible. Dark/light solid backgrounds help check contrast.
Learn moreClick an element in the preview and the editor jumps to the corresponding line in the source code. The selected element is highlighted in the preview — and moving the cursor in the code highlights the element under it.
Learn moreSave the drawing as a picture at its own size, at 2× and 3× for sharp screens — one at a time, or all together as a zip with the <img srcset> line that uses them — or at any width and height, on a transparent, white or coloured background; or copy it straight to the clipboard. Unlock the proportions to export into a box of another shape, such as a square logo on a 1200 × 630 social card, and pick where the drawing sits; it stays whole and is never stretched. A preview and the exact pixel size are shown before anything is saved.
Learn moreTurn the drawing into the icons a website links to: a favicon.ico with 16, 32 and 48 pixel icons, an SVG favicon, the 180 pixel iPhone home-screen icon, and the 192 and 512 pixel icons for a web app manifest. Download the favicon on its own, or everything as a zip with the lines to paste into your page. The small sizes are previewed, so you can see whether the drawing still reads at 16 pixels.
Learn moreCopy the drawing in the form you are about to paste it into: the SVG markup, a data URI for an <img>, Base64, a CSS background, or a React component with its attributes spelled the way React expects and editor leftovers removed. The code is shown before it is copied, and the form you used last is remembered.
Learn moreSave a drawing to the cloud and it gets a link of its own. Share sets who can see it — private, unlisted, or published to the public gallery — and the Files page lists every saved drawing with a preview and its views and downloads.
Learn more