A lightweight, browser-based SVG editor with real-time preview and interactive editing capabilities. Built with vanilla JavaScript, this editor allows you to create, modify, and visualize SVG elements directly in your browser.
USE IT NOW: https://svgtweak.com
- Live Preview: See your SVG changes in real-time as you edit the code
- Interactive Manipulation: Drag SVG elements directly in the preview panel
- Element Selection: Click elements to highlight their corresponding code
- Resize Support: Use mouse wheel to resize selected elements
- Responsive Design: Works on both desktop and mobile devices
- Dark Mode Support: Automatic theme switching based on system preferences
- No Dependencies: Pure JavaScript implementation with no external libraries
- Edit SVG Code: Type or paste SVG code in the editor panel
- Move Elements: Click and drag elements in the preview panel
- Select Elements: Click any element to highlight its code
- Resize Elements: Use mouse wheel while an element is selected
- Preview Changes: All modifications are instantly reflected in both panels
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<rect x="50" y="50" width="50" height="50" fill="blue"/>
<circle cx="125" cy="75" r="25" fill="red"/>
<text x="75" y="150" fill="green">Drag me!</text>
</svg>The editor supports manipulation of these SVG elements:
- Rectangle (
<rect>) - Circle (
<circle>) - Ellipse (
<ellipse>) - Text (
<text>) - Line (
<line>) - Polygon (
<polygon>) - Polyline (
<polyline>) - Path (
<path>)
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
The editor handles different SVG elements uniquely based on their attributes:
- Rectangles and text elements use
xandyattributes - Circles and ellipses use
cxandcyattributes - Lines use
x1,y1,x2, andy2attributes - Polygons and polylines use the
pointsattribute - Paths use the
dattribute with transform matrices
Element resizing is implemented based on element type:
- Rectangles: Updates width and height
- Circles: Modifies radius
- Ellipses: Adjusts rx and ry values
- Text: Changes font size
- Fork the repository
- Create your feature branch:
git checkout -b feature/my-new-feature - Commit your changes:
git commit -am 'Add some feature' - Push to the branch:
git push origin feature/my-new-feature - Submit a pull request
- SVG specification by W3C
- Inspired by various online SVG editors
- Built with modern web standards