🎨 SVG Code Editor & Preview

The SVG Code Editor by KineTools lets you edit and preview scalable vector graphics in real time. Simply paste your SVG code, adjust colors, width, height, or stroke, and instantly see the changes in the live preview. Perfect for web designers, UI developers, and SVG icon creators who need a fast, visual workflow.

⚙️ Customization

🎨 SVG Colors

📐 SVG Dimensions

Width 300px

Height 300px

🖊️ SVG Container Stroke

Add Stroke to Main SVG

Stroke Color

Stroke Width 2px

💻 SVG Code

<svg id="Capa_1" enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="200" xmlns="http://www.w3.org/2000/svg"><g><g><g><g><g><g><g><g><circle cx="256" cy="256" fill="#ace237" r="256"/></g></g></g></g></g></g></g><path d="m512 256c0-14.397-1.189-28.517-3.473-42.267l-67.99-67.99-325.881 249.924 115.055 114.999c8.643.882 17.413 1.334 26.289 1.334 141.385 0 256-114.615 256-256z" fill="#81b502"/><g><circle cx="383.155" cy="183.792" fill="#333940" r="68.845"/></g><g><circle cx="383.155" cy="183.792" fill="#9196aa" r="33.616"/></g><g><circle cx="128.845" cy="183.792" fill="#555a66" r="68.845"/></g><g><circle cx="128.845" cy="183.792" fill="#bec3d2" r="33.616"/></g><g><g><g><g><g><g><g><path d="m71.463 288.146c0-101.917 82.62-184.537 184.537-184.537s184.537 82.62 184.537 184.537-82.62 157.747-184.537 157.747-184.537-55.83-184.537-157.747z" fill="#fff"/></g></g></g></g></g></g></g><g><g><g><g><g><g><g><path d="m256 103.609c-.098 0-.195.003-.293.003v342.278c.098 0 .195.002.293.002 101.917 0 184.537-55.831 184.537-157.748 0-101.915-82.62-184.535-184.537-184.535z" fill="#e9edf5"/></g></g></g></g></g></g></g><g><g><ellipse cx="166.137" cy="274.212" fill="#707789" rx="68.845" ry="55.798" transform="matrix(.937 -.349 .349 .937 -85.342 75.335)"/></g><g><circle cx="176.323" cy="273.914" fill="#414952" r="18.699"/></g><g><ellipse cx="345.863" cy="274.212" fill="#555a66" rx="55.798" ry="68.845" transform="matrix(.349 -.937 .937 .349 -31.915 502.46)"/></g><g><circle cx="335.677" cy="273.914" fill="#23272b" r="18.699"/></g></g><path d="m267.907 316.433h-23.813c-8.705 0-15.163 8.073-13.252 16.565l.736 3.272c1.706 7.583 6.75 13.708 13.374 16.969v37.19h22.097v-37.19c6.624-3.261 11.667-9.386 13.374-16.969l.736-3.272c1.91-8.492-4.548-16.565-13.252-16.565z" fill="#414952"/><path d="m267.907 316.433h-12.199v73.997h11.341v-37.19c6.624-3.261 11.667-9.387 13.374-16.969l.736-3.272c1.91-8.493-4.548-16.566-13.252-16.566z" fill="#23272b"/></g></svg>

👁️ Live Preview