인터랙티브 SVG 벡터 에디터
색상, 선 굵기, viewBox, 변형, 여백, 배경과 즉시 SVG/PNG 내보내기를 지원하는 지연 없는 브라우저 벡터 에디터입니다.
Direct canvas editing: select a part, then drag to move. Use the picker’s Replace selected or Add layer modes to build a composite SVG.
꾸민 아이콘 여러 개를 고정하고 하나의 심볼 시트로 합칩니다.
아직 고정한 아이콘이 없습니다. 아이콘을 고정해 한 장으로 모아 보세요.
AI 프롬프트를 만들거나 캔버스에서 아이콘을 개선하세요
프리셋을 고르고 프롬프트를 AI 도구에 복사하거나 캔버스에서 아이콘을 개선하세요.
Interactive SVG Editor - Live DOM Path Inspector, Layer Composer & Vector Customizer
The SVG Nexus Interactive SVG Editor gives designers and frontend engineers surgical control over every <path>, <circle>, <rect>, <polygon>, and <text> element inside an SVG document. Load any icon from the 29 open-source libraries, append secondary icons as composite layers, insert custom vector primitives and typography, customize stroke-dasharray, linecaps, and viewBox coordinates, and download clean vector or raster assets instantaneously.
색상, 선 굵기, viewBox, 변형, 여백, 배경과 즉시 SVG/PNG 내보내기를 지원하는 지연 없는 브라우저 벡터 에디터입니다.
Drag-and-drop .svg files (up to 2 MB), pasted SVG XML, or live 76,166-icon search
Sanitized W3C SVG 2.0, High-DPI PNG/WebP, JSX/TSX, Vue, Svelte, CSS Mask
Real-time non-destructive DOM editing with 50-step Undo/Redo history and client-side XSS/XXE sanitization
인터랙티브 SVG 벡터 에디터 사용법
-
1
Paste SVG markup or upload a file to load it on the editor canvas.
-
2
Select any layer or node, then edit fills, strokes, radius and position numerically or by dragging.
-
3
Toggle the grid and snapping hints for pixel-accurate alignment.
-
4
Download the edited SVG or copy the cleaned markup.
<circle cx="24" cy="24" r="12" fill="#f59e0b"/>
<circle cx="24" cy="24" r="16" fill="#f59e0b" stroke="#24324a"/>
제한 사항
- Text on a path is not editable in this editor.
- Uploads are capped at 2 MiB per file.
- Figma exports must be set to the SVG format (PDF exports are rejected at parse time).
이 작업 공간에서 열거나 붙여넣는 파일은 브라우저에서 로컬로 처리됩니다. 서버로 업로드되는 파일은 없습니다.
What you can edit, merge and animate inside one SVG
Every control below changes the SVG DOM itself, so what you see is the file you download.
Select & move parts
Click any path, shape, text or imported icon group to outline it. forgiving hit-testing makes stroke-only icons easy to grab, Shift multi-selects and dragging moves the whole selection.
Resize & rotate handles
Eight square handles resize the bounding box from any corner or edge while the opposite anchor stays fixed, and the inspector accepts exact X, Y, width, height and rotation numbers.
Merge & ungroup components
Select several layers and press Merge to group them into one editable component; Ungroup releases it back without losing the combined transforms.
Replace selected component
Swap one chosen path or group with a fresh catalog icon while neighbors keep their position, style and animation Embeds.
Snap, align & nudge
Drags land on the 0.5 viewBox grid by default, seven align buttons pin the selection to the canvas edges or center, and arrow keys nudge by 1 or 0.25 units.
Borders, stroke & corner radius
One stroke or fill color change can retarget the whole icon or just the selected layer, with dash presets, linecaps, joins, opacity and a dedicated rectangle corner-radius control.
Modern embedded animations
Spin, pulse, spring, jelly, orbit, shimmer, glow, draw-on and animated-gradient presets are written into the SVG's own style tag with your duration and easing, surviving copy, download and sprite export.
Multi-icon tray & sprite export
Pin finished icons to the sprite tray, merge the whole tray onto one canvas, or compile it into a symbol sprite sheet with ready-to-paste use snippets.
How to edit an SVG in this editor, step by step
-
1
Import your SVG: drag a .svg file onto the canvas, paste markup, or search 76,166 open-source icons and click one to load it.
-
2
Select a component: click any path, shape, or imported group to outline it, hold Shift to multi-select, or press Ctrl+A to select every layer.
-
3
Edit the selection: drag on the canvas with 0.5-grid snapping, resize with the eight handles, rotate with the inspector slider, or type exact X, Y, W, H values.
-
4
Style and compose: apply stroke, fill, dash and opacity styles, replace only the selected component with another icon, and merge layers into one component with the Merge button.
-
5
Animate inside the SVG: pick a modern preset such as spring, jelly, orbit or gradient flow, set duration and easing, and target the whole icon or the selected layer.
-
6
Export: copy the optimized markup in SVG, JSX, Vue or sprite format, or download .svg, transparent PNG, WebP, and a 64x64 favicon.
SVG Editor FAQ: select, move, combine, and animate icons
Practical answers for editing SVG paths and layers in the browser, composing several icons, and exporting an animated SVG.
How do I select and move one part of an SVG?
Click or tap a path, shape, text element, or imported icon group on the canvas. The selected part is highlighted with a dashed outline. Drag it on the canvas to move it, hold Shift to multi-select, or use the arrow keys and nudge controls for one-unit precise movement. Locked layers cannot be moved until unlocked.
Can I resize, scale, and rotate individual SVG components?
Yes. Selecting a layer shows eight white square handles around its bounding box. Drag a corner handle to scale it while the opposite corner stays anchored, drag an edge handle to stretch in one direction, or type exact X, Y, width, height, and rotation values in the selection inspector.
How do I delete, duplicate, or reorder SVG layers?
Select a layer on the canvas or in the layer list, then use Duplicate, Up, Down, or Delete. Keyboard shortcuts work too: Ctrl+D duplicates, Delete removes, and Ctrl+Z with Ctrl+Shift+Z walk a 50-step undo history in the current browser session.
How do I replace one SVG component without replacing my whole design?
Select the component first, choose Replace selected in the icon picker, and pick a catalog icon. The selected component is swapped for an editable SVG group while all remaining layers, colors, and animations stay exactly in place.
Can I combine multiple icons into one editable SVG?
Choose Add layer for each catalog icon to place them side by side as separate selectable groups, or pin icons to the sprite tray and use Merge tray into canvas. Then select several layers and press Merge to group them into one component you can move, style, or animate as a single unit.
Can I merge several SVG icons into a single file or sprite sheet?
Yes. Pin each customized icon with + Pin to Sprite Tray, then either download the whole tray as one multi-icon SVG sprite sheet with <symbol> definitions and <use> examples, or merge the tray onto the canvas to fine-tune positions inside one vector composition.
Do animation controls stay inside the downloaded SVG?
Yes. Every animation preset writes a real <style> tag with @keyframes plus a target class into the SVG markup itself, so the copied, downloaded, or sprite-packed SVG animates anywhere it renders as a file, not just on the editor preview.
Which SVG animations are built in and can I control them?
Spin, pulse, bounce, float, wiggle, heartbeat, orbit, jelly, tada, shake, zoom, flip, shimmer, glow, stroke draw-on, and an animated gradient flow are built in. Pick a duration from 0.2 to 12 seconds, choose easing such as spring, target the whole icon or just the selected layer, and press Replay to preview from the first frame.
How do I change stroke width, color, borders, and dashes?
Select one layer or leave nothing selected to style the whole icon, then use the stroke color picker, fill swatch, stroke-width slider, opacity, linecap, linejoin, and dash presets in the properties panel. Rects additionally expose a corner-radius control, and text layers can be edited inline with their font size.
Does dragging snap to a grid, and can I align parts precisely?
Dragging and arrow-key nudges snap to the 0.5 viewBox grid by default; hold Alt while dragging or toggle the Snap button for free placement. The Align row moves the selection to the viewBox left edge, center, right edge, top, middle, bottom, or perfectly centered with one click.
Can I edit the SVG source code and the viewBox directly?
Yes. The output drawer shows the live optimized SVG markup of your composition in every format - clean SVG, React TSX, Vue 3, Svelte, CSS data URI, Base64, or sprite. ViewBox presets from 16x16 to 512x512 are one click away, and the Fit button shrink-wraps the viewBox around all merged artwork so exports have no dead space.
Are SVG edits and icon merges uploaded to a server?
No. Selection, editing, group merging, snapping, animation, optimization, and export run entirely in your browser. Imported SVG markup is sanitized client-side before it touches the canvas, so nothing about your artwork ever leaves the page.