Studio

SVG Playground

Inspect, edit and optimize SVG. Convert to JSX, React, React Native or a sprite sheet.

Document

badge.svg1.3 KB

Source

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="240" height="240" viewBox="0 0 240 240" version="1.1" id="svg8" sodipodi:docname="badge.svg">
  <metadata id="metadata5">Created with a design tool</metadata>
  <sodipodi:namedview id="base" pagecolor="#ffffff" inkscape:zoom="1.0000000"/>
  <defs id="defs2">
    <linearGradient id="gradient" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0" stop-color="#6366F1"/>
      <stop offset="1" stop-color="#EC4899"/>
    </linearGradient>
  </defs>
  <g id="layer1" inkscape:label="Layer 1" inkscape:groupmode="layer">
    <g id="g12">
      <rect x="20.000000" y="20.000000" width="200.000000" height="200.000000" rx="48.000000" fill="url(#gradient)" id="rect10"/>
    </g>
    <path d="M 80.123456,122.654321 L 108.987654,150.111111 L 162.333333,92.444444" fill="none" stroke="#FFFFFF" stroke-width="16.000000" stroke-linecap="round" stroke-linejoin="round" id="path14"/>
    <circle cx="186.000000" cy="54.000000" r="10.000000" fill="#FBBF24" id="circle16" style="opacity:1;fill-rule:nonzero"/>
  </g>
</svg>

Or drop an .svg file onto the preview.

viewBox

The coordinate system the drawing lives in.

Min X

Min Y

Width

Height

Intrinsic width

Intrinsic height

240 × 2401.1 KB

Use currentColor in JSX / React

badge.min.svg

<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240" viewBox="0 0 240 240"><defs><linearGradient id="gradient" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#6366f1"/><stop offset="1" stop-color="#ec4899"/></linearGradient></defs><rect x="20" y="20" width="200" height="200" rx="48" fill="url(#gradient)"/><path d="M80.12 122.65l28.87 27.46 53.34-57.67" fill="none" stroke="#fff" stroke-width="16" stroke-linecap="round" stroke-linejoin="round"/><circle cx="186" cy="54" r="10" fill="#fbbf24" fill-rule="nonzero"/></svg>