Get SVG Code from Any Image

Upload your image, convert it to SVG, then click the "Code" tab to copy the raw SVG XML. Paste directly into HTML, React, Vue, or any design tool.

Preset:

Colors:

Drop your image here

Supports PNG, JPG, BMP, WEBP up to 5MB

VTracer vectorization + SVGO optimizationPrivacy protected

How to Copy SVG Code

Upload your image to the converter above
Wait for conversion to complete (under 3 seconds)
Click the "Code" tab in the result panel
Click the "Copy" button to copy the SVG XML to clipboard
Paste directly into your HTML file, React component, or design tool

Where to Use SVG Code

HTML: Paste inline for full CSS control over colors and animations
React/Next.js: Create a reusable icon component from the SVG markup
CSS background: Base64-encode and use as a background-image URL
Figma/Illustrator: Import via File → Place or paste into the SVG editor
Email templates: Inline SVG works in most modern email clients

SVG Code Structure

A typical SVG exported from our tool looks like:

<svg xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 400 300"
     width="400" height="300">
  <g fill="#1a73e8">
    <path d="M10,20 L390,20 L390,280 L10,280 Z"/>
  </g>
</svg>