# Storytelling Svg > Use when generating diagrams or figures for social posts, blogs or decks - any time an image has to carry an argument rather than label a list. Triggers on "make an image for this post", "diagram", "figure", "SVG for X", "the image is boring/average", or when a batch of posts needs illustration. - Skill: `the-niresh/storytelling-svg` (Agent Skill) - Install (CLI): `npx skillmds@latest add the-niresh/storytelling-svg` - Raw SKILL.md: https://api.skillmd.com/api/skills/the-niresh/storytelling-svg/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Design & Media - Author: the-niresh (https://skillmd.com/u/the-niresh) - Updated: 2026-09-22 - Page: https://skillmd.com/skills/the-niresh/storytelling-svg --- # Storytelling SVG Most generated diagrams fail the same way: they arrange a list in boxes. The content changes, the rhetoric never does. This skill is the fix. ## Before the story, the frame Story is the hard half, but a batch dies on the easy half first. The frame is fixed and written down once, never decided per image: - **One size per platform.** X is 1080x1350, LinkedIn is 1200x1500, both 4:5, both from one authored geometry. A canvas that grows to fit its figure ships a different aspect ratio every time; one real batch shipped 46 of them across 94 images and every single one looked fine on its own. - **One type scale, and the body is not monospace.** Mono is for code, paths and the footer. When everything is mono the card reads as terminal output and no amount of good structure rescues it. - **Icons, not spelled-out nouns.** Vendor real path data (lucide for concepts, simple-icons for brands). A figure whose only marks are rectangles and words is a table, whatever shape you arranged it in. - **No emoji in the footer.** The footer is a signature. Emoji live in the post text, or inside the frame as an actor doing something. In this repo that lives in `social-media-automator/IMAGE-SOP.md`. Elsewhere, write the equivalent down before drawing the second image, not after the ninety-fourth. ## The test, before anything else **Delete every word from your figure. Does the shape still say something?** If the answer is no, you drew a table and called it a diagram. Redraw it. A second test, cheaper: **can the reader be wrong?** A figure that nobody could disagree with is decoration. A figure that makes a claim can be argued with, and an argument is the only thing that gets reposted. ## The failure to avoid Symptom: your figure vocabulary collapses into three shapes. 7 fig_stack <- a list, stacked 7 fig_compare <- a list, in two columns 5 fig_flow <- a list, with arrows 5 fig_bars <- a list, with lengths That was 24 of 32 real figures in one batch. All four are the same rhetorical move: *here are some labelled boxes*. Not one of them survives the delete-the- words test. Layout templates are not a visual language. They are a way of avoiding one. ## Seven shapes that actually carry a story Reach for these BEFORE reaching for a stack or a compare. | Shape | Use when | Why it works | |---|---|---| | **Unit / isotype** | a ratio out of a countable whole | 130 squares with 11 lit is a shape you see before you read. A bar turns it back into a number you have to parse | | **True-area scale** | one thing dwarfs another | 400 vs 5 as bar lengths reads "long and stub". As circle *areas* it reads "eighty times" | | **Three-plus-one** | three things you have, one you do not | asymmetry is the story. Three outlined boxes and one filled block argues; four equal tiles does not | | **The break** | something worked, then stopped | one line, running, with the exact point of failure annotated. Not two columns of before and after | | **Ghost / absence** | the missing piece IS the point | draw it dashed and empty. Negative space carries meaning that a label cannot | | **The annotated moment** | one detail decides everything | one big visual, one callout arrow, one sentence. "This line is the whole bug" | | **Turn in three panels** | a setup that subverts | panels 1 and 2 establish a pattern, panel 3 breaks it | ## Rules 1. **Asymmetry over symmetry.** Equal-sized things read as a set, and a set has no protagonist. Make one element bigger, filled, off-grid, or alone. 2. **Show scale, do not state it.** Any time you would write "80x" or "most" or "hardly any", draw it instead. 3. **Give it an antagonist.** The strongest figures have a culprit: the second client that skipped the limiter, the flag that never resets. Neutral figures are forgettable. 4. **Repetition is a feeling.** 130 squares feels like a lot. The number 130 does not. 5. **One volume per image, and vary it across a set.** If every figure in a batch has the same weight, the batch reads as wallpaper. Some should shout. 6. **Emoji as actors, not badges.** An emoji sitting in a corner is decoration. An emoji inside the frame doing something is a character. 7. **Never let a label carry the load.** If the caption explains the shape, the shape failed. ## Reference figures are allowed, and this is the real limit Not every image should be a narrative. A protocol comparison, a decision table, a list of four settled principles - these are **reference** figures and forcing a story onto them makes them worse. The honest rule: - **Flagship post of the day: story figure.** Always. This is the one that travels. - **Teach and useful posts: reference figures are fine.** Clarity beats drama when someone is going to screenshot it and act on it. - **One-line clash and philosophy posts: usually no image**, or one that is almost entirely blank. A short post with a heavy diagram looks like a post that did not trust itself. So the target is not "every figure is a story". It is: **every day has at least one figure a stranger would repost, and no figure is a table pretending.** ## Coverage An account with no audience cannot afford text-only posts. Aim for **60-70% of posts carrying an image**, weighted to flagship and teach. Below about a third, distribution does the rest of the work for you, and it will not. ## Before you ship a figure - [ ] Words deleted: does the shape still mean anything? - [ ] Is there a protagonist, or is everything the same size? - [ ] Did I state a magnitude I could have drawn? - [ ] Would a stranger be able to disagree with it? - [ ] Is this the fourth stack in a row? Pick a different shape. - [ ] Does the note explain the picture? Then fix the picture. ## On motion Video out-reaches static images, and it costs a toolchain: Remotion needs Node, headless Chromium and ffmpeg, and renders take minutes where an SVG takes milliseconds. Animated SVG is not a shortcut - feeds rasterise it. So: **get static to 70% first, it is nearly free. Then trial motion on the flagship post only**, one a week, and measure it before spending more. A batch of mediocre videos is worse than a batch of good stills.