Online SVG Editor
Source code editing with live preview. Adjust paths, fills, strokes and other attributes with WYSIWYG.
SVG Source (editable)
Live Preview
Preview size 200×200 · 0.16 KB
SVG Syntax Cheat Sheet
<path d="M0,0 L100,100"/>Path: M move, L line
<rect x="0" y="0" width="50" height="50"/>Rectangle
<circle cx="50" cy="50" r="40"/>Circle
fill="#6366F1" stroke="#fff"Fill and stroke
Online SVG Editor with Live Preview
Edit SVG source code with real-time visual preview. The left panel is a code editor where you can modify the XML directly, and the right panel shows a live rendered preview—what you see is what you get. Adjust paths, fills, strokes, and other attributes with instant feedback. All editing happens locally in your browser.
What Can You Do?
- Fine-tune icons: Adjust colors, sizes, and path coordinates for your design system.
- Modify path key points: Edit
dattributes to reshape paths. - Adjust text content: Change labels and text within SVG graphics.
- Inspect SVG structure: Understand how complex SVGs are organized.
- Learn SVG syntax: Experiment with elements and attributes in real time.
Import & Export
Click "Import SVG" or drag and drop an .svg file to load it into the editor. After editing, you can copy the code to your clipboard or download the modified SVG file. For complex graphic creation, we recommend professional tools like Figma or Adobe Illustrator.
SVG Editor FAQ
Can I directly modify SVG paths?
Yes. The left panel is a source code editor where you can directly edit the XML code, and the right panel shows a live rendered preview. Fill colors, strokes, corner radius, and other attributes can all be manually edited with WYSIWYG.
Can I import external SVG files?
Yes. Click the "Import SVG" button or drag and drop an SVG file directly into the editor. The source code will automatically load into the editing area for further modification.
Is my SVG saved anywhere?
No. This tool is fully client-side. Edited content exists only in your browser memory and is never saved to a server. Refreshing the page clears everything, so please export your work promptly.
What is the SVG editor best suited for?
It is ideal for: fine-tuning icon colors and sizes, modifying key path points, adjusting text content, inspecting SVG structure, and learning SVG syntax. For complex graphic creation, we recommend professional tools like Figma or Adobe Illustrator.