# Table to SVG Image

Render CSV or JSON tables as a clean standalone SVG with headers, zebra rows, themes, accent colors, titles, and alignment controls.

## Run it

- **CLI:** `gizza tool table-to-image "name,score
Ada,9
Grace,8"`
- **Web:** https://gizza.ai/tools/table-to-image/
- **Agents:** machine-readable descriptor (parameters JSON Schema) at https://gizza.ai/tools/table-to-image/tool.json

## Inputs

- `input` — Table data _(field)_
- `input_format` — Input format _(field)_
- `delimiter` — CSV delimiter _(field)_
- `header` — First row is header _(field)_
- `zebra` — Zebra rows _(field)_
- `theme` — Theme _(field)_
- `accent` — Accent color _(field)_
- `font_size` — Font size _(field)_
- `cell_padding` — Cell padding _(field)_
- `title` — Title (optional) _(field)_
- `align` — Text alignment _(field)_

## Output

- SVG output (text)

## Query parameters

Open the tool pre-filled and auto-run via URL:

- `input` — Table data
- `input_format` — Input format
- `delimiter` — CSV delimiter
- `header` — First row is header
- `zebra` — Zebra rows
- `theme` — Theme
- `accent` — Accent color
- `font_size` — Font size
- `cell_padding` — Cell padding
- `title` — Title (optional)
- `align` — Text alignment

Example: `https://gizza.ai/tools/table-to-image/?input=name%2Cscore%0AAda%2C9%0AGrace%2C8&input_format=auto&delimiter=%2C&header=true&zebra=true&theme=light&accent=%232563eb&font_size=14&cell_padding=10&title=Leaderboard&align=left`

---

## About this tool

Table to SVG Image turns pasted CSV or JSON table data into a standalone SVG string you can save as `.svg`, paste into documentation, or rasterize with a browser/design tool when you need PNG or JPEG. It is useful for sharing small result tables, leaderboard snippets, status matrices, budget summaries, and dashboard callouts without opening a spreadsheet or screenshot tool.

The renderer supports CSV with custom delimiters, JSON arrays of flat objects, JSON arrays of arrays, and a single JSON object. You can choose a light, dark, slate, blue, green, or minimal theme; set the header/accent color; toggle zebra rows; add a centered title; and align cell text left, center, or right. Output is deterministic SVG text and is generated locally in your browser.

### Worked example

Paste this CSV:

```csv
name,score
Ada,9
Grace,8
Linus,7
```

Use the default light theme, title `Leaderboard`, and accent `#2563eb`. The output begins with a standalone `<svg ...>` element containing a colored header row, the three body rows, grid lines, and escaped text ready to save as `leaderboard.svg`.

### Limits and edge cases

- Output is SVG, not PNG/JPEG. SVG is crisp and easy to convert, but this tool intentionally does not bundle a raster encoder.
- JSON tables should be flat: array-of-objects keys become columns; nested arrays/objects are stringified into cells.
- Very long cell values are measured with a capped width estimate so a single field does not create an unusably wide image.
- CSV parsing supports quoted fields and custom one-character delimiters, including `\t` or `tab` for tab-separated data.

## FAQ

<details>
<summary>Can this export PNG or JPEG directly?</summary>

No. The tool emits a standalone SVG string because SVG is small, sharp at any scale, and safe to generate in WebAssembly without adding a raster image encoder. Save the output as `.svg`; browsers, design tools, and command-line converters can rasterize it to PNG or JPEG when needed.

</details>

<details>
<summary>What JSON shapes are supported?</summary>

Use an array of flat objects such as `[{"name":"Ada","score":9}]`, an array of arrays such as `[["name","score"],["Ada",9]]`, or a single flat object. For object arrays, the union of first-seen keys becomes the header row. Nested JSON values are kept by stringifying them into a cell.

</details>

<details>
<summary>How do headers work for CSV and JSON?</summary>

For CSV and JSON arrays of arrays, the “First row is header” option controls whether the first row becomes a bold styled header. For JSON arrays of objects, object keys always become the header because the values are already named fields.

</details>

<details>
<summary>Is my table uploaded anywhere?</summary>

No. Parsing and SVG rendering happen locally in the browser and in the pure Rust core used by the CLI. The tool does not require a network request to render your table.

</details>

## Related tools

- [Generate a Chart from CSV](https://gizza.ai/tools/csv-chart-generator/): Paste CSV data and generate a bar, line, scatter, or histogram chart as a clean, scalable SVG — in your browser, nothing uploaded. Pick columns, colors, and size.
- [Color Contrast Checker](https://gizza.ai/tools/color-contrast-checker/): WCAG colour contrast checker — get the contrast ratio and AA / AAA pass-fail for any text and background colour, plus an accessible suggestion. Free, in-browser.
- [Color converter](https://gizza.ai/tools/color-format-convert/): Convert a color between HEX, RGB(A), HSL, HSV and CMYK, in your browser. Paste any notation and get them all. Nothing is uploaded.
- [Color palette generator](https://gizza.ai/tools/color-palette-generator/): Generate a color palette from any base color — complementary, analogous, triadic, tetradic, monochromatic, shades and tints. Free, runs in your browser.
- [Color shades generator](https://gizza.ai/tools/color-shades-generator/): Generate a ramp of tints, shades and tones from any base color, including a Tailwind-style 50-900 scale, in HEX, RGB and HSL. Runs in your browser, nothing is uploaded.