---
name: Svg
description: Use when authoring custom data viz that doesn't fit a predefined chart layout — brand-aware SVG infographics via compact DSL.
---

# Svg

Use when authoring custom data viz that doesn't fit a predefined chart layout — brand-aware SVG infographics via compact DSL.

---
name: svg
description: Use when authoring custom data viz that doesn't fit a predefined chart layout — brand-aware SVG infographics via compact DSL.
---

# SVG Infographic Authoring

Generate brand-perfect SVG infographics using a compact DSL. Colors resolve against the active feinschliff brand pack — no per-skill palette. Use when the predefined chart layouts (`bar-chart`, `stacked-bar`, `kpi-grid`, `scorecard`, `funnel`) don't fit and a custom viz is needed.

## Quick start

Author a `.svg.dsl` file, expand it, then render. The default brand is `feinschliff`; override via `--brand <name>`, `FEINSCHLIFF_BRAND=<name>`, or an inline `@brand <name>` directive at the top of the DSL.

```bash
cd /path/to/feinschliff
uv run python -m lib.diagrams.svg_expand chart.svg.dsl   # add --brand <name> to override
uv run python -m lib.diagrams.render chart.svg            # → chart.png
```

Inspect the PNG. If something is off, adjust the DSL (positions, sizes, semantic colors) and re-run. One fix loop max — escalate to references if more is needed.

## References

- [DSL reference](references/dsl-reference.md) — primitives, semantic colors, layout
- [Examples](references/examples.md) — small / medium / complex fixtures
38:["$","div",null,{"className":"flex flex-wrap items-center gap-3 mb-8","children":[["$","$L3b",null,{"skillId":"f19a2e7f-ed6d-47fc-9ed4-27afe5a37069","content":"$3c"}],["$","a",null,{"href":"/api/skills/marsmike-svg/download","target":"_blank","rel":"noopener noreferrer","className":"inline-flex items-center justify-center gap-2 px-4 py-2 text-sm font-medium border border-input bg-background hover:bg-accent hover:text-accent-foreground transition-colors","children":[["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":16,"height":16,"fill":"currentColor","viewBox":"0 0 256 256","transform":"$undefined","children":[false,"$undefined",["$","path",null,{"d":"M224,144v64a8,8,0,0,1-8,8H40a8,8,0,0,1-8-8V144a8,8,0,0,1,16,0v56H208V144a8,8,0,0,1,16,0Zm-101.66,5.66a8,8,0,0,0,11.32,0l40-40a8,8,0,0,0-11.32-11.32L136,124.69V32a8,8,0,0,0-16,0v92.69L93.66,98.34a8,8,0,0,0-11.32,11.32Z"}]]}],"Download Zip"]}],["$","$L3d",null,{"skillId":"f19a2e7f-ed6d-47fc-9ed4-27afe5a37069","skillSlug":"marsmike-svg","initialVoted":false}]]}]
3f:T4d9,---
name: svg
description: Use when authoring custom data viz that doesn't fit a predefined chart layout — brand-aware SVG infographics via compact DSL.
---

# SVG Infographic Authoring

Generate brand-perfect SVG infographics using a compact DSL. Colors resolve against the active feinschliff brand pack — no per-skill palette. Use when the predefined chart layouts (`bar-chart`, `stacked-bar`, `kpi-grid`, `scorecard`, `funnel`) don't fit and a custom viz is needed.

## Quick start

Author a `.svg.dsl` file, expand it, then render. The default brand is `feinschliff`; override via `--brand <name>`, `FEINSCHLIFF_BRAND=<name>`, or an inline `@brand <name>` directive at the top of the DSL.

```bash
cd /path/to/feinschliff
uv run python -m lib.diagrams.svg_expand chart.svg.dsl   # add --brand <name> to override
uv run python -m lib.diagrams.render chart.svg            # → chart.png
```

Inspect the PNG. If something is off, adjust the DSL (positions, sizes, semantic colors) and re-run. One fix loop max — escalate to references if more is needed.

## References

- [DSL reference](references/dsl-reference.md) — primitives, semantic colors, layout
- [Examples](references/examples.md) — small / medium / complex fixtures
41:[]


---

**Source**: https://github.com/marsmike/feinschliff
**Author**: marsmike
**Discovered via**: skillsdirectory.com
**Genre**: ai-agents