Home

Free Online SVG Editor

Draw shapes, lines, paths, and text; edit vector points and curves; customize fills and outlines; animate your design; then export it. Everything autosaves in this browser — no account, no server.

Quick palettes
Thickness
Align
Animation hotkeys
Selection hotkeysCtrl/Cmd+A Select allShift / Alt / Ctrl / Cmd+Click Add/remove shapeShift/Alt+Drag Scale proportionallyAlt+Drag Lock current directionEsc Cancel / deselect

Pick a tool above, then click or drag on the canvas to draw.

Open Flipbook Studio → Draw and animate frame by frame

Export

Export artwork

Animated sequence

GIF uses the flipbook FPS. Video duration controls WebM and MP4 recording length.

Animation export: This single SVG exports as one still image. PNG, JPG (JPEG), and WebP export one still image. Keep this tab active while encoding finishes.

Canvas and code selections stay matched. Turn on Multi-select or hold Shift, Alt, Ctrl, or Cmd while clicking code lines to add or remove shapes. Drag the panel’s bottom edge to change its height.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<defs>
<clipPath id="draft-canvas-clip">
<rect width="200" height="200" />
</clipPath>
</defs>
<g clip-path="url(#draft-canvas-clip)">
</g>
</svg>

Find an emoji

Click to replace

SVG utility palette

Placemarkers, loaders, and progress UI for products and business sites.

Click a preset to add it

Only animated SVG presets—such as the spinner, loading dots, progress bars, and content skeleton—play or resume. Static placemarkers and cards are unaffected.

Map placemarkers
Map pinClassic location marker
Location nameMap pin + labelLocation pin with editable name
Business nameBusiness map markerBranded pin with editable business text
Business nameSelected TripFit markerBusiness marker with red selected outline
1Route waypointNumbered stop for a route
24Map clusterGrouped locations with editable count
Content & loading designs
Empty placemarkerBlank image or content placeholder
Add image or textText placemarkerEditable placeholder label
Your captionContent cardImage area with editable caption
Content skeletonAnimated image and text loading placeholder
Fading skeletonTransparent loading skeleton that fades in and out
Filled fading skeletonWhite-background loading skeleton that fades in and out
Transparent glimmer skeletonTransparent loading skeleton with a left-to-right shimmer
Loading spinnerRotating loader ring
Loading dotsThree-dot loading indicator
58%Progress barTrack completion or upload progress
Uploading…62%Progress with textProgress bar with editable status

Text labels are imported as editable text shapes. Select them on the canvas to change the wording, font, and color.

Emoji palette

Click or drag

Upload SVG

Drop in an .svg file to add its artwork to the canvas — each disconnected shape lands as its own selectable, editable piece.

Trace image outline / silhouette

New

Upload or drag in an image to trace its outline or silhouette into an editable vector path. Works best with clear silhouettes, high-contrast images, or transparent backgrounds.

Trace which color as the shape?

Choose black or white to trace dark or light areas. Images with a transparent background trace the opaque part instead.

Canvas

Canvas dimensions

Select a shape on the canvas to edit its fill, outline, and layering.

My designs

Saved only in this browser — no account, no sync. Clearing site data or switching browsers/devices will lose them.

Draw a shape to start saving designs.