Edit SVG files visually with path manipulation, colors, transforms, and text editing.
An SVG file is XML that describes shapes, so this editor parses the markup, renders the result in a live drawing area, and writes every edit back into the document's attributes. Select any element - a circle, path, or text node - and change its fill, stroke, opacity, transform, or text content, and reshape path outlines by dragging their points. The deliverable is the updated SVG source, which you can copy or download. The usual surprise is the default fill: an element with no fill attribute is not transparent, it renders solid black until you set fill to none or a color.
A concrete input and expected output from the current implementation.
Input
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="40" fill="red"/></svg>
Expected output
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="40" fill="blue"/></svg>
Changing the circle's fill in the editor rewrites exactly one attribute and serializes the rest of the document unchanged, so the center, radius, and viewBox are preserved and only the fill color differs in the exported markup.
The editor reads the SVG as a structured document, keeping the element tree and every attribute, and draws it in the page so you work against the actual vector rendering rather than against raw code. When you change a property, only that attribute is rewritten and the drawing refreshes; anything you did not touch keeps its original value in the exported markup.
A path's outline lives in its d attribute as a command sequence - M for moveto, L for lineto, C and Q for curves, A for arcs. The editor decodes those commands into points you can select and drag, and moving a point rewrites the command data and re-renders the curve. Text elements carry content plus font, size, and alignment attributes, and layout follows the SVG text model rather than HTML flow.
SVG text is drawn by whatever system displays it, using that system's fonts. The editor renders with the fonts installed on your machine; when the SVG names a font you do not have, a substitute is used and measurements change. Check the final appearance in the environment that actually has the intended fonts.
That is the SVG default, not a bug: the fill property's initial value is black and stroke defaults to none. An element with no fill attribute and no inherited style is drawn solid black. Set fill to none, or to the color you want, on the element or on a group that contains it.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Format, validate, and beautify JSON with syntax highlighting and error detection.
Encode text or files to Base64 and decode Base64 strings back to their original form.
Format and indent SQL queries for better readability across all major dialects.
Convert HTML markup into clean Markdown syntax with support for tables and lists.
Write Markdown and see the rendered HTML output in real time with live preview.
Visualize unified diffs and patch files with color-coded additions and deletions.