SVG Editor

SVG is just XML — an <svg> element containing shapes (<rect>, <circle>, <path>, and so on) described by attributes like fill, stroke, and coordinates. That's what makes it editable as text: change a fill attribute and the color changes; change width and height and the rendered size changes, all without touching the underlying shapes.

This editor works directly on that source: it reads out the colors already used in the file so you can swap them without hunting through the markup by hand, lets you resize by changing the root width/height, and can hand the source to SVGO — the standard SVG optimizer — to strip redundant precision, comments, and metadata that design tools often leave behind. Preview rendering happens through an image element rather than injecting the markup directly into the page, which also means any script embedded in a pasted SVG never runs. Everything happens locally in your browser.

• •Run Optimize before shipping an SVG to production — icons exported from design tools (Figma, Illustrator, Sketch) often carry unnecessary precision, unused IDs, and editor metadata that SVGO strips safely.
• •Only colors set as direct fill/stroke attributes are detected and editable here — colors defined through CSS classes or a <style> block inside the SVG won't show up in the color list.
• •Resizing changes the width/height attributes, not the viewBox — that's usually what you want (the artwork scales to the new size), but if the SVG has no viewBox at all, add one to keep proportions predictable across different sizes.
• •Exporting to PNG rasterizes at your current width/height, so bump those up first if you need a large, crisp PNG — a vector source scales cleanly to any size, unlike a raster image.