creating-svg-illustrations
Installation
SKILL.md
SVG Illustrations
Start with references/core-rules.md; load only the extra detail the artifact needs.
| Need | Read or use |
|---|---|
| Canvas, style, text, accessibility, validation | references/core-rules.md |
| Reusable compositions | references/pattern-examples.md |
| Marp embedding | references/embedding.md |
| Rendering failures | references/troubleshooting.md |
| Known-good deck example | assets/examples/with-diagrams.md |
Workflow
- Inspect the target slide or document, required dimensions, surrounding palette, and renderer.
- Create the smallest editable SVG that communicates the idea. Use a correct
viewBox, explicit text styles, consistent geometry, and SVG title/description where the visual carries meaning. When embedding, also provide descriptive host-level alt text or an adjacent semantic equivalent as required byreferences/embedding.md; internal SVG metadata alone is not sufficient. - Keep assets portable: avoid embedded fonts, unexplained emoji, unnecessary filters, and base64 content unless the output must be self-contained.
- Validate with
svglintwhen available, then open or embed the SVG in the target artifact and inspect clipping, scaling, contrast, text, and relative paths. - Return the SVG artifact first, followed by validation performed and any renderer or font caveat.