> ## Documentation Index
> Fetch the complete documentation index at: https://docs.convertly.sh/llms.txt
> Use this file to discover all available pages before exploring further.

# Vector & SVG

> Raster-to-SVG tracing and SVG input sanitization on CDN URLs.

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](/docs/media-conversion) and dashboard vectorize tool.

<Note>
  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.
</Note>

<Columns cols={2}>
  <Frame caption="Logo on a lavender canvas — `trim=1&pad=48&bg=f8f3ff&border=8`.">
    <img src="https://cdn.convertly.sh/cvly/o/convertly-site/docs/cdn-transforms/examples/vectorize-icon.webp?v=docs-20260717&format=auto&q=auto:eco" alt="Convertly logo on a styled lavender canvas via CDN" className="w-full max-w-xs mx-auto" />
  </Frame>

  <Frame caption="Monochrome logo variant — `sat=0` on a dark canvas with purple border.">
    <img src="https://cdn.convertly.sh/cvly/o/convertly-site/docs/cdn-transforms/examples/vectorize-icon-mono.webp?v=docs-20260717&format=auto&q=auto:eco" alt="Monochrome Convertly logo on a styled dark canvas via CDN" className="w-full max-w-xs mx-auto" />
  </Frame>
</Columns>

<Tip>
  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.
</Tip>

## 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.

```html theme={"system"}
<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.

```html theme={"system"}
<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). | —       |

<Frame caption="Single-colour SVG source — original `#374151` fill on white (`pad=48&bg=ffffff`).">
  <img src="https://cdn.convertly.sh/cvly/o/convertly-site/docs/cdn-transforms/examples/svg-recolor-original.webp?v=docs-20260717&format=auto&q=auto:eco" alt="Original SVG icon colours before svgColor" className="w-full max-w-xs mx-auto" />
</Frame>

<Columns cols={3}>
  <Frame caption="`svgColor=9000ff` — brand purple.">
    <img src="https://cdn.convertly.sh/cvly/o/convertly-site/docs/cdn-transforms/examples/svg-recolor-brand.webp?v=docs-20260717&format=auto&q=auto:eco" alt="SVG icon recoloured to brand purple via svgColor" className="w-full max-w-xs mx-auto" />
  </Frame>

  <Frame caption="`svgColor=0d9488` — teal accent.">
    <img src="https://cdn.convertly.sh/cvly/o/convertly-site/docs/cdn-transforms/examples/svg-recolor-teal.webp?v=docs-20260717&format=auto&q=auto:eco" alt="SVG icon recoloured to teal via svgColor" className="w-full max-w-xs mx-auto" />
  </Frame>

  <Frame caption="`svgColor=e11d48` — coral accent.">
    <img src="https://cdn.convertly.sh/cvly/o/convertly-site/docs/cdn-transforms/examples/svg-recolor-coral.webp?v=docs-20260717&format=auto&q=auto:eco" alt="SVG icon recoloured to coral via svgColor" className="w-full max-w-xs mx-auto" />
  </Frame>
</Columns>

<Frame caption="Original (left) vs `?svgColor=9000ff` (right) — same SVG, one URL param.">
  <img src="https://cdn.convertly.sh/cvly/o/convertly-site/docs/cdn-transforms/examples/svg-recolor-before-after.webp?v=docs-20260717&format=auto&q=auto:eco" alt="SVG recolor before and after side by side" className="w-full max-w-2xl mx-auto rounded-xl" />
</Frame>

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`](/docs/image-cdn/smart-cropping#colour-palette-extraction). See [Smart cropping & image analysis](/docs/image-cdn/smart-cropping) for swatch fields and palette previews.