What is SVG Editor?
SVG Editor is an in-browser vector graphics editor for creating and modifying Scalable Vector Graphics (SVG) files. Draw shapes (rectangles, circles, ellipses, polygons, lines), add and edit text, apply fills and strokes, adjust opacity, and group elements. The editor shows both the visual canvas and the underlying SVG XML side by side — edit either and see changes reflected instantly.
SVG (Scalable Vector Graphics) is an XML-based vector format for 2D graphics. Unlike raster images (PNG, JPG), SVG files describe shapes mathematically — so they scale to any resolution without pixelation. SVG is used for: icons and UI elements (favicon, logo), interactive charts (D3.js, Recharts), illustrations, and animations. The SVG format is supported in all modern browsers and can be inlined in HTML or used as an img src.
SVG is composed of elements: <rect> (rectangle), <circle>, <ellipse>, <line>, <polyline>, <polygon>, <path> (arbitrary bezier curves using path commands), <text>, <g> (group), <defs> (reusable definitions), and <use> (stamp a def). The <path> element is the most powerful — its d attribute uses commands like M (moveto), L (lineto), C (cubic bezier), A (arc), Z (closepath) to describe any shape.
How to Use
- Click a shape tool (rect, circle, polygon) to draw on the canvas.
- Select an element and edit its fill color, stroke, and opacity in the properties panel.
- Switch to 'Code view' to edit the SVG XML directly.
- Use the 'Text' tool to add and style text elements.
- Click 'Export SVG' to download the file, or 'Copy SVG code' to paste it into your HTML.
Examples
Simple icon
Result:
Rounded rectangle button
Result:
Star polygon
Result:
Frequently Asked Questions
What is the difference between SVG and Canvas?
SVG (Scalable Vector Graphics) is a retained-mode graphics system — you declare shapes as DOM elements and the browser maintains their state. Each shape is a DOM node you can select, style with CSS, and animate. SVG scales perfectly (vectors). Use SVG for: icons, logos, charts with interactive elements, illustrations that need to be accessible. Canvas is an immediate-mode raster surface — you call drawing APIs (fillRect, drawImage) and the browser forgets what you drew. No DOM nodes. Use Canvas for: game graphics, image processing, large numbers of particles, pixel manipulation.
What are SVG path commands?
SVG path commands (the d attribute): M x y — move to absolute position. m dx dy — move relative. L x y — line to absolute. l dx dy — line relative. H x — horizontal line. V y — vertical line. C x1 y1 x2 y2 x y — cubic bezier curve. Q x1 y1 x y — quadratic bezier. A rx ry angle large-arc sweep x y — arc. Z — close path. Uppercase = absolute coordinates, lowercase = relative. Example circle approximation: M 50 0 A 50 50 0 1 0 50 100 A 50 50 0 1 0 50 0 Z.
How do I animate SVG?
Three ways to animate SVG: (1) CSS animations: @keyframes on SVG properties (fill, stroke, transform, opacity). Works for most properties. (2) SMIL (Synchronized Multimedia Integration Language): SVG's native animation (
What is the viewBox attribute in SVG?
viewBox defines the internal coordinate system of the SVG: viewBox='minX minY width height'. It's separate from the SVG element's width/height attributes (external size). Example:
How do I use SVG icons in a React app?
Three approaches: (1) Import as React component (with Vite/webpack + SVGR plugin): import { ReactComponent as Logo } from './logo.svg'. The SVG becomes a React component with props. (2) Import as image URL: import logoUrl from './logo.svg'; . No styling of internals, but simple. (3) Use an icon library: Lucide React, Heroicons, Phosphor — tree-shakeable, typed, pre-built SVG icon components. (4) Inline SVG: copy SVG XML directly into JSX. Most control for styling with CSS variables. SVGR is the most flexible for custom SVGs.