DEV Community

Cover image for Claude Can Write SVG. That Doesn't Mean It Vectorized Your PNG
PerfectVector
PerfectVector

Posted on Originally published at perfectvector.com

Claude Can Write SVG. That Doesn't Mean It Vectorized Your PNG

Ask Claude to turn your PNG logo into an SVG and you'll get a file that opens, scales and validates. That isn't the same as vectorizing it. Writing SVG is text generation: the model emits <path> and <circle> elements that describe a picture. Tracing is measurement: a system reads the pixels of one specific image and rebuilds its boundaries as geometry. Both end in .svg. Only one starts from a source it has to match.

Anthropic's own docs draw the same line. Claude's upload guide says it can analyze JPEG, PNG, GIF and WebP images, and artifacts cover things like images and diagrams. Neither describes a raster-to-vector tracing feature. So "look at this logo and write SVG like it" is reconstruction by interpretation: it can work for a simple mark, but curves, proportions and small details drift.

Where Claude-written SVG shines is new graphics you can describe: an icon built from a few shapes, a flowchart, a badge, a pattern. Ask for a defined viewBox, no external images, and no scripts or remote resources. Then open the file in a browser (does it render?) and in a vector editor (can you select and recolor the parts?).

Whatever made the file, read the markup before you ship it. A valid SVG can still be a bitmap in a wrapper, because SVG allows embedded raster content (W3C SVG 2, Embedded Content):

<!-- Looks like a vector, isn't one: a PNG inside an SVG wrapper -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <image href="data:image/png;base64,iVBORw0KGgo..." width="512" height="512"/>
</svg>

<!-- Real geometry: the outline is path data you can edit -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <path d="M96 256C96 168 168 96 256 96s160 72 160 160-72 160-160 160S96 344 96 256z" fill="#1d9b5f"/>
</svg>
Enter fullscreen mode Exit fullscreen mode

Look for <image>, <script> and remote hrefs, then zoom in and see how much cleanup one simple edit takes. The rule of thumb: if you need a new graphic, let Claude write it. If you already have an image that has to stay itself (a logo, a line drawing, flat artwork), use a tracing tool and compare its paths with the source side by side.

The full guide covers the three kinds of "vectorize" requests, a five-step workflow for Claude-authored SVGs, a pre-ship audit and an FAQ: Can Claude Vectorize an Image? SVG Code vs Tracing

We build PerfectVector, an AI image-to-vector converter. Upload an image, inspect the traced paths in a free preview, and pay only if you download (try it).

Top comments (0)