Image to SVG, in your browser.
Clean path markup, grouped per colour. Copy it or download it, free.
Drop a PNG, JPG or WebP
or paste from the clipboard
Best from 500 px wide, sharp edges, plain background
Or try:
Clean path markup, grouped per colour. Copy it or download it, free.
SVG is the format the web is built on for logos and icons. It scales to any screen density without a second file, it can be styled with CSS, it can be animated, and for flat artwork it is usually smaller than the PNG it replaces. What it cannot be is created from pixels by wishing, which is what this page does for you.
Drop an image above and GetSVG traces it into path markup in your browser. Copy the code straight to your clipboard, or download the file. Free, no account, and the image is never uploaded.
The output is deliberately plain. No embedded bitmaps, no filters, no editor metadata, no nested transforms to unpick. Each colour becomes one group with an id, and each shape inside it is a single path:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 180">
<g id="colour-1" fill="#1e1a16">
<path d="M12 42C18 20 44 18 58 34…"/>
</g>
<g id="colour-2" fill="#285cc2">
<path d="M96 40h18v96H96z"/>
</g>
</svg>That structure is the point. Because the groups are separated and named, you can target one colour from CSS, recolour a whole layer in Figma with a single click, or delete part of the artwork without touching the rest.
<img src="logo.svg" alt="Company name">. Simplest, cached like any asset, but the browser isolates it so CSS on your page cannot reach inside.GetSVG calculates the exact bounds of every curve, including the extremes of each Bézier where they bulge past their anchor points, and crops the view box to that with a small margin. You will not find the usual band of empty space around the artwork, which means the SVG sits flush in a layout without a wrapper fighting it.
For a logo or an icon an SVG is typically a few kilobytes, well under the PNG. For a complex illustration with many colours and thousands of curves it can be larger than the raster original. The stats bar under the canvas shows the exact SVG size before you download, alongside the shape and point counts, so the comparison is in front of you rather than a surprise afterwards.
If the file is bigger than you want, the lever is shape count. Move Detail towards Simpler, reduce the number of colours, or raise Remove specks. Each of those reduces the number of curves stored.
Photographs. Vectorizing a photo produces a posterised approximation made of hundreds of shapes that is both larger and slower to render than the JPEG it came from. Use SVG for logos, icons, lettering, line art and flat illustration, and keep photographs as raster. Being clear about that boundary is more useful to you than pretending the tool has none.
Related: PNG to SVG, JPG to SVG,image to vector, and SVG vs PNG explained.
<path> elements with cubic Bézier curves.<g fill="#…">, so one click selects a whole colour in Illustrator, Figma or Inkscape.<linearGradient>.Scalable Vector Graphics, an open standard maintained by the W3C. It is a text file containing shape instructions rather than pixels, which is why it stays sharp at any size and can be opened in a text editor, a browser or any design tool.
Yes, and it is usually the best option for logos and icons. Every browser in current use renders SVG natively, it stays crisp on high-density screens without needing a 2× version, and for simple artwork it is often smaller than the equivalent PNG.
Three ways. As an image: <img src="logo.svg" alt="…">, which is simplest. As a CSS background, which suits decorative shapes. Or inline, by pasting the SVG markup straight into the page, which is the only method that lets CSS and JavaScript reach the individual shapes.
Only if the SVG is inline in your HTML, or loaded as a symbol or sprite. GetSVG groups each colour separately and gives each group an id, so once the markup is on the page you can target a group and override its fill. An SVG referenced through an <img> tag is isolated and cannot be styled from outside.
For traced output, effectively yes. GetSVG emits only paths, groups, fills and, where a gradient was detected, a linear gradient. Those are the oldest and most universally supported parts of the SVG specification. The rendering differences that trip people up involve filters and effects, which are not used here.
For a logo or an icon, usually much smaller, because it stores a few hundred coordinates rather than thousands of pixels. For a detailed illustration with many shapes it can be larger, and that is the honest trade for infinite scalability. The stats bar shows the SVG size before you download so you can compare.
Yes. Because each shape is a separate path element, you can animate them with CSS or JavaScript once the SVG is inline. Common uses are drawing a logo stroke by stroke or fading colours in sequence.
Add a title element inside the SVG, or an aria-label on the element that contains it, describing what the graphic shows. GetSVG does not add one automatically because only you know what the artwork represents. For a purely decorative shape, mark it aria-hidden instead.
Photographs. An SVG made from a photo is a posterised approximation built from hundreds of shapes, and it will be larger and slower than the JPEG you started with. Keep photographs as raster and use SVG for logos, icons, lettering and flat illustration.
Yes. The Copy button puts the complete markup on your clipboard, ready to paste straight into a component, a template or a design tool.