Drop SVG here
or click to browse
SVG only · drag to reposition
SVG only · drag to reposition
Getting Started
-
Drop an
.svgfile anywhere, or Ctrl+V to paste SVG markup - The Source & Output panels open automatically
- SVG Studio optimises your SVG and shows a live canvas preview
- Copy the code or Download your SVG
- Use the Transform toolbar in the header to rotate or flip your SVG
Canvas — Pan & Zoom
- Drag
- Pan across the canvas
- Scroll
- Zoom in / out on the preview
- + / −
- Zoom via keyboard
- 0
- Fit to screen (reset zoom)
Transform
- ↻
- Rotate 90° clockwise
- ⇔
- Flip horizontally
- ⇕
- Flip vertically
- 🎨
- Background colour (coming soon)
Crop
- Crop
- Click header Crop button to enter crop mode
- Drag edges
- Move edges or corners to adjust area
- ⇧+drag
- Constrain aspect ratio while resizing
- Arrows
- Nudge 1px (⇧+arrow = resize 10px)
- Enter
- Apply crop
- Esc / Delete
- Cancel and exit crop mode
Source Panel
- Eye
- Toggle original (editable) ↔ optimised (read-only)
- Format
- Toggle pretty-printing (indented code)
- Copy
- Copy current code to clipboard
- Clear
- Reset everything
- Expand
- Toggle fullscreen editor for more space
Output Panel
The Output panel converts your SVG into multiple formats. Use the dropdown to switch:
- Favicon
-
<link>tag for your favicon — paste into HTML<head> - React
- JSX component with camelCase attrs
- React Native
-
react-native-svgcomponent - Minified
- Compact data URI (no comments, minimal whitespace)
- Encoded
-
encodeURIComponentdata URI - Base64
- Base64-encoded data URI
- Try Favicon
- Preview your SVG as a real favicon — a top glow + tab title flash tells you it worked
Settings Panel
- Multipass
- Run SVGO multiple passes for deeper compression
- Number
- Decimal places for numeric values (0–8)
- Transform
- Decimal places for transform values (0–8)
- Search
- Filter optimisation plugins by name
- Reset
- Restore all settings to their defaults
Download Formats
- SVG
- Vector — no quality loss
- PNG
- Raster — configurable size
- JPG
- Raster — opaque background, configurable size
- WebP
- Modern format — good compression
- 🔗
- Lock / unlock aspect ratio
- ↺
- Reset size to default
Theme
Follows your system preference by default. Click the / icon in the header to toggle manually.
Load an SVG to enable downloads