This blog covers practical SVG and browser-graphics writing from the person building SVG Lab: how the editor gets built, what changes, and what actually works when you're making vector graphics without a design background.
Eight design MCP servers compared by job: which one designs finished app screens, icons and illustrations as SVG, which ones work inside Figma, Penpot or SVGator, and which generate one SVG file per prompt.
We drew a cat in SVG Lab, then made it jump and walk. The animation science behind planted paws, seamless joints and a real gravity arc, measured.
AI SVG generators return vector paths you can edit. Auto-tracing turns pixels into stacked flat shapes. Real trace numbers, and when each route is right.
Draw it in a browser editor and export, write the XML by hand, or trace a PNG into paths. Exact steps for each route, a minimal SVG you can copy, and the check that catches fake SVGs.
Most SVG exports flatten gradients, filters and masks into pixels. Here is why that happens, how to check an exported file, and how to export an SVG that keeps all three live and editable.
Three ways to make an SVG with AI: a chatbot writes the markup, an image model gives you pixels to trace, or a vector generator returns real paths. What each outputs and how to get one you can actually edit.
ChatGPT writes valid SVG markup, but it draws blind: no preview, guessed coordinates, broken curves. Where it works, where it fails, and how to get an AI vector you can actually edit.
Resizing an SVG edits the root element's width, height, and viewBox attributes. The paths inside do not change. Here is what each attribute controls and what to do when viewBox is missing.
Converting SVG to JPG renders the vector to pixels and applies JPEG compression. Transparent areas become white. Here is what actually changes during the conversion and how to control the result.
How to convert SVG to PDF without rasterizing it, using the browser's print pipeline or a vector toolchain, plus what breaks along the way.
An SVG has no fixed resolution, so a blurry PNG is a sizing choice, not a quality loss. Here is how to export sharp, transparent PNGs from SVG.
What an SVG path editor actually changes in the d attribute, the path commands you need to know, and when to edit by hand versus visually.
How to change an SVG's colors with fill, stroke, currentColor, and CSS, plus why colors in an img tag won't respond to CSS at all.
Why a browser SVG editor got built instead of getting better at prompting AI for graphics: a story about vocabulary, not talent.