Trace rasters to SVG paths or rasterize stored SVGs — on the same CDN URL as photos. Vector tracing uses the same engine as the converter and dashboard vectorize tool.
Doc previews use a simple styled canvas (trim, pad, bg, border) without rounded corners. For production vector output, request format=svg&vectorize=gradient on a trimmed icon with a solid background — avoid tracing decorative borders into the SVG.
Vector tracing works best on flat icons and logos with clear edges. Gradient wordmarks and photos produce heavier paths — use colour trace for icons, or stick with raster formats for photos.
Raster to SVG (vectorize)
Set format=svg and enable tracing with vectorize=gradient (or trace=1). The CDN runs resize, crop, and adjustments first, rasterizes internally, then traces to SVG paths.
<img src="https://cdn.convertly.sh/{key}/{id}?trim=1&w=512&fit=contain&bg=ffffff&format=svg&vectorize=gradient" alt="Traced icon" />
| Param | Value | Default |
|---|
format | Must be svg for vector output. | — |
vectorize (trace) | gradient or 1 / true to enable tracing. | required for format=svg |
mono | 1 for single-colour (B&W) trace — best for icons on light backgrounds. | false |
Combine with sizing and canvas params:
?w=512&format=svg&vectorize=gradient&mono=1&trim=1
SVG sources (sanitize & rasterize)
When the stored file is SVG, Convertly can rasterize it to WebP, AVIF, JPEG, or PNG. Before processing, unsafe markup is stripped by default — scripts, event handlers, foreignObject, and javascript: links.
?w=800&format=webp
?w=800&format=webp&svgSanitize=0
| Param | Value | Default |
|---|
svgSanitize (svg-sanitize) | 1 / true or 0 / false. | 1 for SVG sources |
Passthrough: a bare SVG URL with no transform params redirects to a signed download of the original file. Add at least one transform (w, format, preset, etc.) to rasterize.
To re-trace an existing SVG, use format=svg&vectorize=gradient on the SVG source.
Recolouring SVGs
svgColor — path recolour before rasterize
Set svgColor=RRGGBB (or svg-color, # optional) on SVG sources. The CDN replaces explicit fill and stroke values — not none or url(...) — then rasterizes to your requested format.
<img src="https://cdn.convertly.sh/{key}/{id}?w=256&format=webp&svgColor=9000ff" alt="Brand purple icon" />
Best for single-colour icons and logomarks stored as image/svg+xml. Multi-fill artwork or gradient logos flatten to one colour. Raster sources (PNG/WebP) ignore svgColor.
| Param | Value | Default |
|---|
svgColor (svg-color) | Hex colour (#RGB, #RRGGBB, or bare hex). | — |
Combine svgColor with trim, pad, and bg for app icons and nav marks without editing the source file:
?trim=1&w=256&fit=contain&pad=32&bg=f8f3ff&svgColor=9000ff&format=webp
Other approaches
| Approach | Where | Best for |
|---|
| Edit the source SVG | Your repo or Convertly Storage | Exact brand hex on every path |
| Dashboard file tools | /app → file → colour map on detected fills | One-off swaps on stored SVGs |
mono=1 vectorize | CDN format=svg&vectorize=gradient&mono=1 | Black paths on white — not custom colours |
monochrome=RRGGBB | CDN on raster output | Tint a rasterised icon to one brand colour |
| Rasterise + canvas | CDN format=webp&trim=1&bg=9000ff | Solid-colour background behind a transparent icon |
Palette extraction for SVG sources works via CDN ?palette=json (after rasterize) or POST /api/images/analyze. See Smart cropping & image analysis for swatch fields and palette previews.