Edit and optimize SVG files. Visual tool with live preview and CSS code output.
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200"><circle cx="100" cy="100" r="80" fill="#4F46E5" opacity="0.8"/><rect x="60" y="60" width="80" height="80" rx="10" fill="white" opacity="0.9"/><text x="100" y="108" text-anchor="middle" font-size="20" font-family="Arial" fill="#4F46E5">SVG</text></svg>data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22200%22%20height%3D%22200%22%20viewBox%3D%220%200%20200%20200%22%3E%3Ccircle%20cx%3D%22100%22%20cy%3D%22100%22%20r%3D%2280%22%20fill%3D%22%234F46E5%22%20opacity%3D%220.8%22%2F%3E%3Crect%20x%3D%2260%22%20y%3D%2260%22%20width%3D%2280%22%20height%3D%2280%22%20rx%3D%2210%22%20fill%3D%22white%22%20opacity%3D%220.9%22%2F%3E%3Ctext%20x%3D%22100%22%20y%3D%22108%22%20text-anchor%3D%22middle%22%20font-size%3D%2220%22%20font-family%3D%22Arial%22%20fill%3D%22%234F46E5%22%3ESVG%3C%2Ftext%3E%3C%2Fsvg%3Edata:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIiB2aWV3Qm94PSIwIDAgMjAwIDIwMCI+PGNpcmNsZSBjeD0iMTAwIiBjeT0iMTAwIiByPSI4MCIgZmlsbD0iIzRGNDZFNSIgb3BhY2l0eT0iMC44Ii8+PHJlY3QgeD0iNjAiIHk9IjYwIiB3aWR0aD0iODAiIGhlaWdodD0iODAiIHJ4PSIxMCIgZmlsbD0id2hpdGUiIG9wYWNpdHk9IjAuOSIvPjx0ZXh0IHg9IjEwMCIgeT0iMTA4IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmb250LXNpemU9IjIwIiBmb250LWZhbWlseT0iQXJpYWwiIGZpbGw9IiM0RjQ2RTUiPlNWRzwvdGV4dD48L3N2Zz4=Use the visual controls to design.
See the live preview update.
Copy the generated CSS code.
Yes, all visual properties are fully adjustable.
Standard CSS that works in all modern browsers.
Use the browser's local storage to save your configurations.