Free · Client-side · No signup

The SVG toolkit
for developers

Optimize, convert, edit and generate SVGs instantly in your browser. Your files never leave your device.

Try Optimizer Now All Tools

100% Client-side

— No signup

SVG Markup Paste or edit any SVG

<svg viewBox="0 0 490 200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="ag" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#a5b4fc"/>
      <stop offset="100%" stop-color="#6d28d9"/>
    </linearGradient>
    <filter id="glow">
      <feGaussianBlur stdDeviation="4" result="b"/>
      <feComposite in="SourceGraphic" in2="b" operator="over"/>
    </filter>
    <filter id="gs">
      <feGaussianBlur stdDeviation="2" result="b"/>
      <feComposite in="SourceGraphic" in2="b" operator="over"/>
    </filter>
  </defs>
  <rect width="490" height="200" fill="#08090f"/>
  <rect x="18" y="18" width="164" height="164" rx="38" fill="#12141f"/>
  <rect x="18" y="18" width="164" height="164" rx="38" fill="none"
        stroke="rgba(129,140,248,0.18)" stroke-width="1.5"/>
  <path id="ls"
        d="M100,55 L145,100 L100,122 L100,145 L78,122 L55,100 Z"
        fill="none" stroke="url(#ag)" stroke-width="2.8"
        stroke-linejoin="round"
        stroke-dasharray="264" stroke-dashoffset="264">
    <animate attributeName="stroke-dashoffset"
             from="264" to="0" dur="1.15s" begin="0.2s" fill="freeze"
             calcMode="spline" keySplines="0.4 0 0.2 1"/>
  </path>
  <circle r="5" fill="#FF6B6B" filter="url(#glow)" opacity="0">
    <animate attributeName="opacity"
             values="0;1;1;0" keyTimes="0;0.07;0.93;1"
             dur="3.8s" begin="1.5s" repeatCount="indefinite"/>
    <animateMotion dur="3.8s" begin="1.5s" repeatCount="indefinite">
      <mpath href="#ls"/>
    </animateMotion>
  </circle>
  <line x1="100" y1="100" x2="145" y2="100"
        stroke="#a5b4fc" stroke-width="1.5" stroke-linecap="round" opacity="0">
    <animate attributeName="opacity" values="0;0.6" dur="0.4s" begin="1.45s" fill="freeze"/>
  </line>
  <circle cx="145" cy="100" r="7" fill="none"
          stroke="#a5b4fc" stroke-width="1.5" opacity="0">
    <animate attributeName="opacity" values="0;0.8" dur="0.3s" begin="1.55s" fill="freeze"/>
  </circle>
  <circle cx="100" cy="100" r="11" fill="#12141f"
          stroke="#818cf8" stroke-width="2.2"
          filter="url(#gs)" opacity="0">
    <animate attributeName="opacity" values="0;1" dur="0.35s" begin="1.35s" fill="freeze"/>
  </circle>
  <circle cx="100" cy="100" r="4" fill="#818cf8" opacity="0">
    <animate attributeName="opacity" values="0;1" dur="0.35s" begin="1.35s" fill="freeze"/>
  </circle>
  <circle cx="100" cy="100" fill="none" stroke="#818cf8" stroke-width="1" opacity="0">
    <animate attributeName="r" values="11;26;11" dur="3s" begin="2.2s" repeatCount="indefinite"/>
    <animate attributeName="opacity"
             values="0;0;0.38;0" keyTimes="0;0.05;0.45;1"
             dur="3s" begin="2.2s" repeatCount="indefinite"/>
  </circle>
  <text font-family="Inter,system-ui,sans-serif" font-size="70" font-weight="800" letter-spacing="-2" opacity="0"><tspan x="206" y="118" fill="#ffffff">svg</tspan><tspan fill="#818cf8">trim</tspan><animate attributeName="opacity" values="0;1" dur="0.65s" begin="1.9s" fill="freeze"/></text>
</svg>

Preview

viewBox: — — elements — B

Open in Optimizer

Blazing fast

Runs entirely in your browser. No server round-trips, no waiting.

Privacy-first

Your files never leave your device. Nothing is uploaded anywhere.

Built for developers

React, Vue, Angular exports. The formats you actually use.

Production-ready

Clean, optimized output you can drop straight into your project.

Live optimizer demo

See the first tool in action.

SVG Optimizer turns noisy export markup into smaller, cleaner SVG output. Try the built-in sample and compare the result before downloading.

Original 11.4 KB

Optimized 3.2 KB

Saved 8.2 KB

Reduction 71.92%

Focused SVG workflows

View all tools

Optimize 3 tools Convert 13 tools Edit & Manipulate 12 tools Generate 17 tools Analyze & Utility 11 tools

Free dark SVG Resources 120 copy-ready dark utility icons across 5 categories