Your SVG code will appear here after editing. You can copy the code or download the SVG file.
<svg id="svgCanvas" width="800" height="600" xmlns="http://www.w3.org/2000/svg">
<!-- SVG content will be added here dynamically -->
<rect x="50" y="50" width="200" height="150" fill="#2c7da0" stroke="#01497c" stroke-width="2" rx="10" data-id="rect-1"/>
<circle cx="400" cy="200" r="80" fill="#e83e8c" stroke="#a61e4d" stroke-width="2" data-id="circle-1"/>
<ellipse cx="600" cy="400" rx="100" ry="60" fill="#20c997" stroke="#0a7c5f" stroke-width="2" data-id="ellipse-1"/>
<text x="100" y="400" font-size="24" fill="#333" font-family="Arial, sans-serif" data-id="text-1">Welcome to SVG Editor</text>
<line x1="300" y1="500" x2="500" y2="500" stroke="#6f42c1" stroke-width="3" data-id="line-1"/>
</svg>SVG Editor Tutorial
Select a Drawing Tool
Choose from the toolbar on the left: rectangle, circle, ellipse, line, polygon, path, text, or image import tool. Click on the canvas to start drawing.
Import Images
Click the image import tool to upload JPG, PNG, GIF, or SVG files. Images are embedded into the SVG and can be resized, positioned, and styled.
Edit Properties
Select any element on the canvas to edit its properties like fill color, stroke color, stroke width, opacity, position, and size in the right panel.
Manage Layers
Use the layers panel to reorder, hide, or delete elements. Click on a layer to select the corresponding element on the canvas.
Export Your Creation
Export your SVG as code (copy to clipboard), as an SVG file, or as a PNG image for use in web projects or print.
SVG (Scalable Vector Graphics) Advantages:
- Resolution independent - scales to any size without quality loss
- Small file sizes compared to raster images
- Editable with code - can be manipulated with CSS and JavaScript
- Excellent for logos, icons, illustrations, and data visualizations
- Supports embedded images for hybrid designs
Image Import Features
- Multiple Formats: JPG, PNG, GIF, SVG, BMP
- Embedded Images: Images are encoded directly into SVG
- Preserve Aspect Ratio: Keep original proportions or stretch
- Resize & Reposition: Adjust size and position precisely
- Opacity Control: Adjust image transparency
- Layer Management: Images appear in layers panel
- Export with Images: Embedded images included in exports
- Optimized Code: Base64 encoding with compression
Supported Image Formats
Keyboard Shortcuts
- V - Selection Tool
- R - Rectangle Tool
- C - Circle Tool
- E - Ellipse Tool
- L - Line Tool
- P - Polygon Tool
- T - Text Tool
- I - Image Import Tool
- Del - Delete Selected
- Ctrl+C - Copy
- Ctrl+V - Paste