Local-only SVG editor

Edit SVG like a layout tool, ship it like code.

Import a file, refine the markup, tune root attributes, and inspect the live output on a responsive canvas. Everything stays in your browser.

Document size

1.36 KB

Node count

0

Viewport

Not set

Back to optimizerShortcut: Ctrl/Cmd + S downloads the current SVG

Editor

Direct markup control

<svg width="320" height="320" viewBox="0 0 320 320" fill="none" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="auroraGradient" x1="48" y1="44" x2="260" y2="278" gradientUnits="userSpaceOnUse">
      <stop stop-color="#FF6B2C"/>
      <stop offset="0.45" stop-color="#FFB347"/>
      <stop offset="1" stop-color="#F6F7FB"/>
    </linearGradient>
    <radialGradient id="auroraGlow" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(228 80) rotate(131.82) scale(187.848)">
      <stop stop-color="#FFF4D6" stop-opacity="0.96"/>
      <stop offset="1" stop-color="#FFF4D6" stop-opacity="0"/>
    </radialGradient>
  </defs>
  <rect width="320" height="320" rx="72" fill="#0D141A"/>
  <rect x="26" y="26" width="268" height="268" rx="54" fill="url(#auroraGradient)"/>
  <rect x="38" y="38" width="244" height="244" rx="44" fill="url(#auroraGlow)"/>
  <path d="M86 172C86 129.026 120.026 95 163 95H198C216.225 95 231 109.775 231 128V193C231 228.346 202.346 257 167 257C122.265 257 86 220.735 86 176V172Z" fill="#0D141A"/>
  <path d="M126 166.5C126 145.237 143.237 128 164.5 128H176.5C187.822 128 197 137.178 197 148.5V181.5C197 203.315 179.315 221 157.5 221C140.103 221 126 206.897 126 189.5V166.5Z" fill="#FFF8E7"/>
  <circle cx="109" cy="107" r="23" fill="#FFF4D6"/>
  <circle cx="219" cy="89" r="12" fill="#FFF4D6" fill-opacity="0.72"/>
</svg>

Markup is valid.Zoom 96%Paste SVG, pick a template, or load a local file.