📐 SVG Editor
Upload, preview, edit and export SVG files
❌ {{ errorMsg }}
{{ toastMsg }}
📐 Drop SVG file here
or click to browse
Supports .svg files • You can also paste SVG code or use Ctrl/Cmd+V
{{ showPasteArea ? '✕ Close' : '📋 Paste SVG Code' }}
Cancel
Load SVG
{{ fileInfoText }}
👁️ Preview
📝 Code
⚡ Optimize
{{ sidebarVisible ? '◧' : '☰' }}
+
{{ zoomLevel }}%
−
⊡ Fit
◐ {{ bgLabel }}
⎘ Format
📋 Copy
📂
↓ Export
Download
📐
SVG File
Download current SVG
🖼️
PNG 1x
Original resolution
🖼️
PNG 2x
Double resolution (Retina)
🖼️
PNG 3x
Triple resolution
Copy to Clipboard
📋
Copy SVG Code
Raw SVG markup
🔗
Data URI
Base64 encoded for CSS
⚛️
React JSX
Component with camelCase attrs
💚
Vue SFC
Single file component template
🏷️
<img> Tag
Inline image with data URI
🎨
CSS Background
background-image property
Elements
{{ elementCount }}
{{ expandedNodes.has(node.id) ? '▾' : '▸' }}
{{ getElementIcon(node.tag) }}
<{{ node.tag }}>
#{{ node.elId }}
{{ node.hidden ? '👁️🗨️' : '👁️' }}
🗑️
Properties
Click an element to inspect
Element
Tag
id
class
Geometry
{{ field.attr }}
{{ field.attr }}
Style
fill
∅
stroke
∅
stroke-w
opacity
{{ Number(selectedProps.opacity).toFixed(2) }}
Transform
{{ n }}
{{ opt.label }}
Decimal precision: {{ optimizeOptions.precision }}
{{ optimizeOptions.precision }}
Original:
{{ formatBytes(originalSize) }}
Optimized:
{{ formatBytes(optimizedSize) }}
Saved:
{{ savedPercent }}%
↻ Re-run
✓ Apply
File:
{{ fileName || 'untitled.svg' }}
Size:
{{ svgWidth }} × {{ svgHeight }}
viewBox:
{{ svgViewBox }}
Elements:
{{ elementCount }}
File size:
{{ formatBytes(svgSource.length) }}
Colors: