You exported an SVG from a design tool and you need one thing changed: a color, a
dimension, or a cleanup pass before it ships. Full design suites are the wrong tool
for that job. This guide covers the browser-based SVG editor we ship, including the
parts it deliberately refuses to do, because knowing the limits is what makes a small
editor fast to use.
What this SVG editor actually is
The tool is a code editor with a live preview, not a canvas with drag handles. You
paste SVG markup into a text area, and the preview re-renders as you type. It ships
with a default sample containing a rounded rectangle, a circle, and a text label, so
the pane is never empty and you can see the pipeline working before you paste your
own file.
Four operations exist:
1. Edit the markup directly in the text area.
2. Validate it, which happens continuously as you type.
3. Replace one color with another across the whole document.
4. Copy or download the result.
There is no file picker, no layer panel, and no node editing. Dimensions like width,
height, and viewBox are changed by editing those attributes in the text, which is
honest work for a format that is plain XML underneath.
The sanitize step and what it strips
Everything you paste passes through a sanitizer before it reaches the preview, the
copy button, or the download. The rules are blunt:
- Script elements are removed entirely.
- Event handler attributes, any attribute starting with on in double or single
quotes, are removed.
- javascript: URIs are removed.
The practical consequence: an SVG that carries its own interactivity, common in
animated or scripted graphics, loses that behavior in the output. Sanitization is a
security feature, since the preview injects the markup into the page, and it is
destructive by design. Keep your original file. The editor is for preparing graphics
to publish, not for preserving every authoring feature.
Validation the way a browser sees it
Validation uses the browser's own XML parser. The markup is parsed as
image/svg+xml, and if the parser reports an error the preview is replaced by an
Invalid SVG message. Your text stays in the editor either way, so nothing is lost.
The rule this enforces is strict XML well-formedness. SVG tolerates less than HTML:
1. If a tag is unclosed, the file is invalid.
2. If an attribute value lacks quotes, the file is invalid.
3. If a stray ampersand appears where an entity should be, the file is invalid.
This catches the most common real-world failure, which is HTML-flavored markup
pasted into an SVG context. The condition-action rule is simple. If the preview says
invalid, you have a syntax problem, and fixing colors or attributes before fixing
syntax wastes time.
Recolor with find and replace
The color tool does a literal find and replace across the entire document. Both
fields default to the sample's colors, #6366f1 to find and #ef4444 to replace, so
you can see the mechanism work on the default markup immediately.
Three behaviors come straight from the implementation:
- Matching is global and case-insensitive, so #FF0000 and #ff0000 both match.
- The search string has its regex metacharacters escaped before use, so searching
for a hex value never breaks the pattern.
- The replace runs over the whole text, not over fill attributes only.
That last point is the trap. A hex string that also appears inside an id, a class
name, a comment, or visible text content gets replaced there too. Before running a
global replace, scan the document for where the value appears. If a color string
doubles as an identifier, rename the identifier first.
Copy, download, and what leaves the editor
Both output paths use the sanitized string, never your raw input:
- Copy writes the sanitized markup to the clipboard and confirms with a Copied
label for one and a half seconds.
- Download writes the same string as a file of type image/svg+xml, always named
image.svg. Rename it after downloading if your project needs meaningful names.
The tool never round-trips your file through a DOM serializer. Your formatting,
indentation, and attribute order survive exactly as you left them, minus whatever
the sanitizer removed. That matters when your build pipeline diffs assets, because
re-serialized SVG would produce noise in every diff.
What this editor does not do
Stated plainly, because small tools oversold waste more time than small tools
honest about their scope:
- No optimization. There is no minifier, no path simplification, no precision
rounding. Run a dedicated optimizer afterward if byte count matters.
- No visual editing. You cannot drag a shape or bend a path. Every geometric change
happens in the text.
- No asset library or file open. Paste the code in.
- No handling of external references. Scripts are stripped, so any graphic
depending on embedded JavaScript will not behave the same.
A deterministic workflow for a clean SVG
1. Paste the markup and read the preview before touching anything.
2. If the preview reports invalid, fix XML syntax first, in document order.
3. Run one find and replace per color change, checking each match location first.
4. Adjust width, height, and viewBox in the text if the graphic needs resizing.
5. Copy the sanitized output, or download and rename it away from image.svg.
6. Keep the original export in your project source, since sanitization is not
reversible from the output.
Checklist before you ship the output
- Original file preserved, because handlers and scripts cannot be recovered from
the sanitized version.
- Global color replaces checked against ids, comments, and text content.
- viewBox present so the graphic scales predictably.
- Downloaded files renamed from image.svg.
- Output pasted into the destination page and visually confirmed once.
SVG editing at this scale is mostly reading, validating, and small precise edits.
That is exactly what a text-area editor with live validation does well, and exactly
what a heavyweight editor does slowly.
Did you hit an SVG that this pipeline mangles, or a color replace that went
somewhere unexpected? Inspect it with our [SVG editor](https://webrecast.com/en/svg-editor)
and check what the sanitizer kept versus what it stripped.
