Developer Tools

Free Online SVG Editor — Live Preview, React Export & Optimizer

The most complete free SVG editor online. Write and edit SVG code with a live preview that updates every keystroke. Insert shapes from the toolbar, start from 10 built-in templates, and export as React JSX, CSS data URI, or PNG.

Make SVGs responsive, optimise away Inkscape/Figma artefacts, and insert animation code snippets instantly.

100%
SVG preview
312 chars9 lines6 elementsCtrl+Z undo · Ctrl+Y redo
⏪Undo / Redo History

Full edit history with Ctrl+Z / Ctrl+Y keyboard shortcuts. Every toolbar action and code change is tracked with a 50-step history stack.

⚛️Copy as React JSX

Converts all SVG attributes to camelCase React equivalents (stroke-width → strokeWidth, class → className) for instant paste into .jsx/.tsx files.

🎨CSS Data URI Copy

Encodes the SVG as a data URI and generates a ready-to-paste CSS background-image property — no external file needed.

📐Make Responsive

Removes fixed width/height attributes and ensures viewBox is set, making the SVG scale fluidly in any container.

⚡SVG Optimizer

Strips Inkscape, Illustrator and Figma-specific artefacts that bloat file size by 20-40% without affecting visual output.

🎬Animation Snippets

Insert ready-made SMIL animation code (spin, pulse, fade-in, scale) directly at the cursor position in your SVG.

Who uses this tool?

→
Frontend Developers: Edit SVG icons, convert them to React components, optimise for production and test on dark/light backgrounds.
→
UI/UX Designers: Fine-tune SVG code exported from Figma or Illustrator, strip artefacts and preview at multiple scales.
→
Content Creators: Create custom SVG graphics from templates, animate them and embed directly in web pages without images.
→
Educators & Students: Learn SVG syntax with a live preview, understand the element tree structure and experiment with shapes and paths.

PursTech vs Method Draw vs SVGOMG vs SVG-Edit

SVG editor feature comparison

FeaturePursTechMethod DrawSVGOMGSVG-Edit
Live split-pane preview✓✓—✓
Shape toolbar✓✓—✓
10+ templates✓———
Undo / Redo (Ctrl+Z)✓✓—✓
React JSX export✓———
CSS Data URI copy✓———
Make Responsive button✓———
SVG optimizer✓—✓—
Animation snippets✓———
Element tree view✓——✓
Color palette extraction✓———
Dark/light preview toggle✓—✓—
PNG export (multi-scale)✓——✓
No install, runs in browser✓✓✓✓

How to Use the SVG Editor

1
Start from a template
Click Templates to choose from 10 designs. Or paste your own SVG code directly into the editor on the left.
2
Edit and insert shapes
Type SVG code directly. Click toolbar buttons to insert shapes at the cursor. Use Ctrl+Z to undo any change.
3
Format, optimise, export
Format for readability, Minify for production, Optimize to strip design-tool artefacts, or Make Responsive for fluid layouts.
4
Copy or download
Copy as SVG, React JSX component or CSS data URI. Download as SVG file or rasterise to PNG at 1x–4x scale.

❓ Frequently Asked Questions

What is SVG and when should I use it instead of PNG or JPEG?+
SVG (Scalable Vector Graphics) is an XML-based format that describes images as mathematical shapes rather than pixels. It has four major advantages over raster formats: Infinite scalability: SVGs look sharp at any size — from a 16×16 favicon to a 4K screen or printed poster. PNG and JPEG are resolution-fixed and pixelate when enlarged. Small file size: A simple icon SVG can be under 1 KB. An equivalent PNG would be 5-20 KB. For icons, logos and illustrations, SVG is almost always smaller. Animatable and interactive: SVG elements can be styled with CSS, animated with CSS keyframes or SMIL, and manipulated with JavaScript. You cannot do this with PNG. Text-based: SVGs are human-readable XML, editable in any text editor, searchable by Google, and manageable in version control. No binary blob. When to use PNG or JPEG instead: photographs and complex photorealistic images, screenshots, and any image with more than a few thousand distinct colours where the SVG path data would be larger than a compressed raster format.
How do I convert an SVG for use in a React component?+
React has different attribute naming requirements from HTML/SVG. The key differences: HTML SVG → React JSX ───────────────────────────────── class → className stroke-width → strokeWidth fill-rule → fillRule clip-rule → clipRule stop-color → stopColor stop-opacity → stopOpacity xlink:href → xlinkHref font-family → fontFamily text-anchor → textAnchor Our "Copy React JSX" button handles all of these conversions automatically. After copying, wrap the output in a functional component: function IconName({ width = 24, height = 24, className = "" }) { return ( <svg width={width} height={height} className={className} viewBox="0 0 24 24"> {/* pasted SVG content here */} </svg> ); } For large React projects, consider SVGR (svgr.vercel.app) which can batch-convert SVG files as part of your build process.
What does 'Make Responsive' do and when should I use it?+
SVGs exported from design tools typically have fixed pixel dimensions: <svg width="200" height="200" xmlns="..."> A fixed-dimension SVG will not scale when you put it in a fluid-width container. The "Make Responsive" button: 1. Reads the existing width and height values 2. If no viewBox is set, creates one: viewBox="0 0 width height" 3. Removes the width and height attributes The result: <svg viewBox="0 0 200 200" xmlns="..."> This SVG will now fill 100% of its parent container while maintaining the correct aspect ratio. You can then control the SVG's size entirely from CSS: svg { width: 100%; max-width: 200px; } When not to use it: if you need the SVG to render at a specific fixed size in every context (e.g. a favicon), keep the explicit dimensions.
What SVG artefacts does the optimiser remove?+
When you export SVG from Inkscape, Adobe Illustrator or Figma, the exported file contains a lot of extra data that the browser doesn't need. Our optimiser removes: Inkscape artefacts: • xmlns:inkscape and xmlns:sodipodi namespace declarations • inkscape:label, inkscape:groupmode, inkscape:version, inkscape:document-units • sodipodi:docname, sodipodi:namedview elements Illustrator artefacts: • Adobe-specific namespace declarations • Private XML processing instructions • Generator metadata comments Figma artefacts: • data-name="..." attributes on every element • Figma component ID attributes General noise: • <?xml version="1.0" encoding="utf-8"?> declarations (not needed in inline SVG) • HTML comments () • Empty <g></g> groups • Redundant whitespace Typical savings: 15-40% file size reduction with zero visual change.
How do I add animation to an SVG element?+
SVG supports two animation approaches: 1. SMIL (SVG native animations) — elements inserted inside the SVG: Spin (animateTransform): <animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="2s" repeatCount="indefinite"/> Pulse (animate opacity): <animate attributeName="opacity" values="1;0.3;1" dur="2s" repeatCount="indefinite"/> Insert these elements inside the shape you want to animate (inside <circle>, <rect>, etc.). Our animation snippets button inserts the code at your cursor position. 2. CSS animations — add a <style> block inside the SVG: <style> @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .my-element { animation: spin 2s linear infinite; transform-origin: center; } </style> SMIL works everywhere including the <img> tag. CSS animations work in inline SVG and as external SVG files but not when loaded via <img> in all browsers. For React, CSS animations are generally more predictable.

SVG on the Web — What Developers Need to Know

SVG has become the default format for icons, logos and UI illustrations in modern web development — and for good reason. Unlike raster images, SVGs can be styled with CSS (changing fill colours based on theme or user interaction), manipulated with JavaScript (animating individual paths on hover), and inlined directly in HTML (no extra HTTP request). The result is sharper graphics, smaller file sizes, and more interactive possibilities than any raster format can offer.

The most common workflow issue developers face is SVGs exported from Figma, Sketch or Illustrator that are bloated with metadata those tools add automatically. An icon that should be 500 bytes ends up as 4KB because of Figma's data-name attributes, Inkscape's namespace declarations and editor metadata. Running the optimiser in this tool strips all of that — often reducing file size by 30-60% — without touching the visible paths or colours. For large icon libraries, this adds up to meaningful performance gains.

For React developers, the React JSX export feature saves a tedious manual step. React requires camelCase attribute names (strokeWidth, not stroke-width) and className instead of class — rules that aren't always obvious to developers encountering SVG in React for the first time. The converter handles all the attribute name transformations automatically and wraps the output in a functional component with configurable width, height and className props, ready to drop into any component file.