Blog Figure Svg

blog-figure-svg

Produces SVG figures intended for blog posts: in-line illustrations (1 per ~500 body words is the rule of thumb) and a templated OG feature card. Output is a clean SVG file (the editable source) rasterized to a compressed PNG (what the post references). Every figure carries title + desc + role="img" so screen readers can read it.

This skill is platform-agnostic — the SVG and PNG it produces work in any CMS (Ghost, WordPress, Webflow, Sanity) or static-site generator (Hugo, Astro, Eleventy, Jekyll, Next-MDX). It complements seo-blog-writer (handles the publish step for whatever platform you're on) and blog-topic-research (validates the topic). Use it during the illustration step of writing a post — after the prose is stable so the anchor sentences are final.

/blog-figure-svg flow      "<title>"   --steps "Trigger -> Filter -> HTTP -> Slack"
/blog-figure-svg compare   "<title>"   --bars "Zapier:0.03,Make:0.015,n8n:0.008" --unit "$ per task"
/blog-figure-svg taxonomy  "<title>"   --groups "Workflows,Agents,RPA" --notes "see references/style-examples.md"
/blog-figure-svg terminal  "<title>"   --lines "$ npm install\nadded 42 packages"
/blog-figure-svg feature   "<headline>"   --accent "#4F46E5" --pill "How To"

All variants write to tmp/blog-drafts/<slug>-<N>-<short-name>.svg (editable source, gitignored), then rasterize to <slug>-<N>-<short-name>.png (uploaded to the blog CDN).

Before you start

The skill expects a working directory it can write into. Default: tmp/blog-drafts/. The PNG rasterizer requires one of:

• ImageMagick (magick command) — preferred. magick -density 192 -background white in.svg -resize 1600x out.png.
• rsvg-convert — rsvg-convert -w 1600 -b white in.svg -o out.png.
• inkscape (CLI) — inkscape --export-type=png --export-width=1600 in.svg.
• cairosvg (Python) — pip install cairosvg; cairosvg in.svg -W 1600 -o out.png.

Plus pngquant (or oxipng) for compression — typical 60-80% size reduction with no visible quality loss. Core Web Vitals and ad-network reviews (Mediavine, Raptive) care about image weight.

command -v magick || command -v rsvg-convert || command -v inkscape || python3 -c "import cairosvg" 2>/dev/null \
  || echo "no SVG rasterizer found - install one of magick, rsvg-convert, inkscape, cairosvg"
command -v pngquant || command -v oxipng || echo "no PNG compressor - install pngquant or oxipng"

The three illustration shapes

Match each figure to a paragraph the reader has just finished, and to one concrete information structure:

Never plot data the post doesn't already cite. If you can't identify even one information structure to illustrate, skip — note in the report "no figures: post is too short / too definitional."

Hard rule for editorial pipelines: any post >=800 words needs at least 1 figure; figure count = max(1, body_words // 500). Sub-800-word definitional explainers are the only legitimate zero-figure case.

Palette and typography

Pick from these hex values. No new hues — consistency across figures is the brand:

Typography: font-family="ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif" only. No embedded web fonts — they fail to load in feed readers, dark-mode previews, and AMP renders. Sizes: title 20px bold, section labels 14-16px, axis labels 11-13px.

ViewBox: viewBox="0 0 800 <height>" for inline figures (a sane width for most CMS content columns, including Ghost's Casper, the WordPress block editor, and Hugo / Astro defaults); viewBox="0 0 1600 840" for OG cards. Do not set root width/height attributes — let the host theme scale.

SVG skeleton (every figure)

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 360"
     font-family="ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif"
     role="img" aria-labelledby="t1 d1">
  <title id="t1">Short, informative title - what the figure shows</title>
  <desc id="d1">Long-form description for screen readers - what the bars/circles/lines depict, including all numbers shown on screen</desc>
  <rect width="800" height="360" fill="#fafafa"/>
  <!-- bars / circles / paths / labels -->
</svg>

Accessibility checklist:

• role="img" on the root <svg>.
• <title> + <desc> referenced via aria-labelledby (NOT aria-describedby — the former covers both).
• Suffix IDs with the figure number (t1/d1, t2/d2, ...) so multiple figures on one page don't collide.
• <desc> includes every number visible in the figure (screen readers can't OCR the chart).

Honesty: never round towards a more dramatic gap, never anchor an axis to inflate differences. If the data is "practitioner observation, not a measured study," say so in <desc> and in a small grey caption inside the figure.

Variant: flow — horizontal process flow

For: "how to" sequences, integration topology, decision trees.

# Args: title, steps (--steps "Trigger -> Filter -> HTTP -> Slack")
import sys, html, pathlib

title, steps_arg, out_path = sys.argv[1], sys.argv[2], sys.argv[3]
steps = [s.strip() for s in steps_arg.split('->') if s.strip()]
n = len(steps)
assert 2 <= n <= 7, f"flow needs 2-7 steps, got {n}"

W, H = 800, 240
margin_x = 60
gap = (W - 2*margin_x) / (n - 1) if n > 1 else 0
box_w, box_h = 130, 64
cy = H // 2 + 10

nodes = []
arrows = []
for i, s in enumerate(steps):
    cx = margin_x + i * gap
    x = cx - box_w / 2
    y = cy - box_h / 2
    nodes.append(
        f'<rect x="{x:.0f}" y="{y:.0f}" width="{box_w}" height="{box_h}" '
        f'rx="8" fill="#fff" stroke="#3b82f6" stroke-width="2"/>'
        f'<text x="{cx:.0f}" y="{cy + 5:.0f}" text-anchor="middle" '
        f'font-size="14" font-weight="600" fill="#0b0b11">{html.escape(s)}</text>'
    )
    if i < n - 1:
        x1 = cx + box_w / 2
        x2 = margin_x + (i + 1) * gap - box_w / 2
        arrows.append(
            f'<line x1="{x1:.0f}" y1="{cy}" x2="{x2 - 8:.0f}" y2="{cy}" '
            f'stroke="#6b7280" stroke-width="2" marker-end="url(#arrow)"/>'
        )

desc = f"Flow diagram showing steps: {' to '.join(steps)}."

svg = f'''<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 {W} {H}"
     font-family="ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif"
     role="img" aria-labelledby="t1 d1">
  <title id="t1">{html.escape(title)}</title>
  <desc id="d1">{html.escape(desc)}</desc>
  <defs>
    <marker id="arrow" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto">
      <path d="M0,0 L10,5 L0,10 z" fill="#6b7280"/>
    </marker>
  </defs>
  <rect width="{W}" height="{H}" fill="#fafafa"/>
  <text x="{W//2}" y="40" text-anchor="middle" font-size="20" font-weight="700" fill="#0b0b11">{html.escape(title)}</text>
  {"".join(arrows)}
  {"".join(nodes)}
</svg>'''
pathlib.Path(out_path).write_text(svg, encoding='utf-8')
print(f"wrote {out_path} ({n} steps)")

Variant: compare — bar chart

For: numeric comparisons (prices, latencies, accuracy, counts). 2-7 bars.

# Args: title, bars (--bars "Zapier:0.03,Make:0.015,n8n:0.008"), unit
import sys, html, pathlib

title, bars_arg, unit, out_path = sys.argv[1], sys.argv[2], sys.argv[3], sys.argv[4]
pairs = []
for chunk in bars_arg.split(','):
    label, val = chunk.split(':')
    pairs.append((label.strip(), float(val.strip())))
n = len(pairs)
assert 2 <= n <= 7, f"compare needs 2-7 bars, got {n}"

W, H = 800, 360
margin_x, margin_top, margin_bottom = 80, 70, 70
plot_w = W - 2 * margin_x
plot_h = H - margin_top - margin_bottom
max_v = max(v for _, v in pairs)
bar_w = plot_w / (n * 1.5)
gap = bar_w * 0.5
colors = ['#3b82f6', '#fb923c', '#10b981', '#94a3b8', '#6b7280', '#cbd5e1', '#475569']

bars = []
labels = []
for i, (label, val) in enumerate(pairs):
    h = (val / max_v) * plot_h if max_v else 0
    x = margin_x + i * (bar_w + gap)
    y = margin_top + (plot_h - h)
    bars.append(
        f'<rect x="{x:.0f}" y="{y:.0f}" width="{bar_w:.0f}" height="{h:.0f}" fill="{colors[i % len(colors)]}"/>'
        f'<text x="{x + bar_w/2:.0f}" y="{y - 8:.0f}" text-anchor="middle" font-size="13" font-weight="600" fill="#0b0b11">{val:g}</text>'
    )
    labels.append(
        f'<text x="{x + bar_w/2:.0f}" y="{H - margin_bottom + 24:.0f}" text-anchor="middle" font-size="13" fill="#475569">{html.escape(label)}</text>'
    )

desc = f"Bar chart comparing {unit}: " + ", ".join(f"{label} {val:g}" for label, val in pairs) + "."

svg = f'''<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 {W} {H}"
     font-family="ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif"
     role="img" aria-labelledby="t1 d1">
  <title id="t1">{html.escape(title)}</title>
  <desc id="d1">{html.escape(desc)}</desc>
  <rect width="{W}" height="{H}" fill="#fafafa"/>
  <text x="{W//2}" y="36" text-anchor="middle" font-size="20" font-weight="700" fill="#0b0b11">{html.escape(title)}</text>
  <text x="{W//2}" y="56" text-anchor="middle" font-size="12" fill="#6b7280">{html.escape(unit)}</text>
  <line x1="{margin_x}" y1="{H - margin_bottom}" x2="{W - margin_x}" y2="{H - margin_bottom}" stroke="#cbd5e1" stroke-width="1"/>
  {"".join(bars)}
  {"".join(labels)}
</svg>'''
pathlib.Path(out_path).write_text(svg, encoding='utf-8')
print(f"wrote {out_path} ({n} bars)")

Variant: taxonomy — labelled groups (Venn-lite)

For: introducing named categories. 2-4 groups.

# Args: title, groups (--groups "Workflows,Agents,RPA"), notes
import sys, html, pathlib, math

title, groups_arg, out_path = sys.argv[1], sys.argv[2], sys.argv[3]
groups = [g.strip() for g in groups_arg.split(',') if g.strip()]
n = len(groups)
assert 2 <= n <= 4, f"taxonomy needs 2-4 groups, got {n}"

W, H = 800, 400
cx, cy = W // 2, H // 2 + 20
r = 110
colors = ['#3b82f6', '#fb923c', '#10b981', '#94a3b8']
opacity = 0.4

circles = []
labels = []
if n == 2:
    positions = [(cx - 60, cy), (cx + 60, cy)]
elif n == 3:
    positions = [(cx, cy - 50), (cx - 70, cy + 40), (cx + 70, cy + 40)]
else:  # 4
    positions = [(cx - 70, cy - 50), (cx + 70, cy - 50), (cx - 70, cy + 50), (cx + 70, cy + 50)]

for i, ((x, y), label) in enumerate(zip(positions, groups)):
    circles.append(
        f'<circle cx="{x}" cy="{y}" r="{r}" fill="{colors[i]}" fill-opacity="{opacity}" stroke="{colors[i]}" stroke-width="2"/>'
    )
    # Label outside the circle, away from center
    dx, dy = x - cx, y - cy
    mag = math.sqrt(dx*dx + dy*dy) or 1
    lx = x + (dx / mag) * (r + 30)
    ly = y + (dy / mag) * (r + 30)
    labels.append(
        f'<text x="{lx:.0f}" y="{ly:.0f}" text-anchor="middle" font-size="15" font-weight="600" fill="#0b0b11">{html.escape(label)}</text>'
    )

desc = f"Taxonomy diagram showing groups: {', '.join(groups)}, with overlapping regions indicating shared concepts."

svg = f'''<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 {W} {H}"
     font-family="ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif"
     role="img" aria-labelledby="t1 d1">
  <title id="t1">{html.escape(title)}</title>
  <desc id="d1">{html.escape(desc)}</desc>
  <rect width="{W}" height="{H}" fill="#fafafa"/>
  <text x="{W//2}" y="40" text-anchor="middle" font-size="20" font-weight="700" fill="#0b0b11">{html.escape(title)}</text>
  {"".join(circles)}
  {"".join(labels)}
</svg>'''
pathlib.Path(out_path).write_text(svg, encoding='utf-8')
print(f"wrote {out_path} ({n} groups)")

Variant: terminal — annotated terminal mock

For: command output, error messages, config blobs.

# Args: title, lines (newline-separated), out_path
import sys, html, pathlib

title, lines_arg, out_path = sys.argv[1], sys.argv[2], sys.argv[3]
lines = lines_arg.split('\n')
assert 1 <= len(lines) <= 16, f"terminal needs 1-16 lines, got {len(lines)}"

W = 800
line_h = 22
H = 80 + line_h * len(lines) + 30
chrome_h = 36

rows = []
for i, ln in enumerate(lines):
    y = 80 + chrome_h + i * line_h
    # Highlight error lines red, prompt lines green
    color = '#fb923c' if 'error' in ln.lower() or 'fail' in ln.lower() else '#10b981' if ln.startswith('$') else '#cbd5e1'
    rows.append(
        f'<text x="32" y="{y}" font-family="ui-monospace, Menlo, Consolas, monospace" '
        f'font-size="14" fill="{color}" xml:space="preserve">{html.escape(ln)}</text>'
    )

desc = "Terminal mock showing: " + " | ".join(ln for ln in lines if ln.strip())[:200]

svg = f'''<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 {W} {H}"
     font-family="ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif"
     role="img" aria-labelledby="t1 d1">
  <title id="t1">{html.escape(title)}</title>
  <desc id="d1">{html.escape(desc)}</desc>
  <rect width="{W}" height="{H}" fill="#fafafa"/>
  <text x="{W//2}" y="36" text-anchor="middle" font-size="18" font-weight="700" fill="#0b0b11">{html.escape(title)}</text>
  <rect x="20" y="60" width="{W - 40}" height="{H - 80}" rx="8" fill="#0b0b11"/>
  <circle cx="40" cy="78" r="6" fill="#fb923c"/>
  <circle cx="58" cy="78" r="6" fill="#10b981"/>
  <circle cx="76" cy="78" r="6" fill="#94a3b8"/>
  {"".join(rows)}
</svg>'''
pathlib.Path(out_path).write_text(svg, encoding='utf-8')
print(f"wrote {out_path} ({len(lines)} lines)")

Variant: feature — OG / feature card (1600x840)

For: the post's hero image (Ghost feature_image, WordPress featured_media, the static-site front-matter feature_image field, OG previews, social cards). One per post.

The card uses a tinted gradient background, a 24px grid pattern at 7% opacity, a soft radial highlight, and either a giant accent number (when the headline contains a 1-3 digit number) or a placeholder icon slot. Brand text (your wordmark, pill label) is configurable.

# Args: headline, accent (hex), pill (short tag like "How To"), brand_wordmark, out_path
import sys, html, textwrap, re, pathlib

headline, accent, pill, brand, out_path = sys.argv[1:6]

# Auto-fit headline: 3-line cap on common tiers (longest tier may use 4).
n = len(headline)
if   n <= 32:  size, wrap, max_lines = 120, 14, 2
elif n <= 60:  size, wrap, max_lines = 92,  20, 3
elif n <= 90:  size, wrap, max_lines = 76,  26, 3
else:          size, wrap, max_lines = 60,  32, 4

lines = textwrap.wrap(headline, wrap)[:max_lines]
line_h = int(size * 1.15)
total_h = line_h * (len(lines) - 1) + size
y0 = 420 - total_h // 2 + size       # vertical center inside 1600x840

tspans = "".join(
    f'<tspan x="120" dy="{0 if i==0 else line_h}">{html.escape(line)}</tspan>'
    for i, line in enumerate(lines)
)

# Hero element: number-as-hero when the headline has a 1-3 digit number,
# otherwise a clean geometric placeholder. Skips 4-digit matches (years).
m = re.search(r'\b(\d{1,3})\b', headline)
if m:
    hero = (
        f'<text x="1500" y="640" text-anchor="end" font-family="ui-sans-serif, system-ui, sans-serif" '
        f'font-weight="800" font-size="500" fill="{accent}" '
        f'opacity="0.20" letter-spacing="-20">{m.group(1)}</text>'
    )
else:
    # Default placeholder icon: stacked geometric shapes
    hero = (
        f'<g transform="translate(1190,260) scale(1.0)" fill="none" stroke="{accent}" stroke-width="7" stroke-linecap="round">'
        f'<circle cx="140" cy="140" r="100" opacity="0.4"/>'
        f'<circle cx="140" cy="140" r="60" opacity="0.6"/>'
        f'<circle cx="140" cy="140" r="20" fill="{accent}" opacity="1"/>'
        f'</g>'
    )

svg = f'''<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 840" role="img" aria-labelledby="t1 d1">
  <title id="t1">{html.escape(headline)}</title>
  <desc id="d1">Feature card for blog post: {html.escape(headline)}. Pill label: {html.escape(pill)}.</desc>
  <defs>
    <linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0%" stop-color="#F8FAFC"/>
      <stop offset="100%" stop-color="#E2E8F0"/>
    </linearGradient>
    <radialGradient id="hi" cx="0.15" cy="0.1" r="0.7">
      <stop offset="0%" stop-color="{accent}" stop-opacity="0.18"/>
      <stop offset="100%" stop-color="{accent}" stop-opacity="0"/>
    </radialGradient>
    <pattern id="grid" x="0" y="0" width="24" height="24" patternUnits="userSpaceOnUse">
      <path d="M 24 0 L 0 0 0 24" fill="none" stroke="{accent}" stroke-width="1" opacity="0.07"/>
    </pattern>
  </defs>
  <rect width="1600" height="840" fill="url(#bg)"/>
  <rect width="1600" height="840" fill="url(#grid)"/>
  <rect width="1600" height="840" fill="url(#hi)"/>
  <rect x="0" y="0" width="14" height="840" fill="{accent}"/>
  {hero}
  <text x="120" y="{y0}" font-family="ui-sans-serif, system-ui, sans-serif" font-size="{size}" font-weight="800" fill="#0F172A" letter-spacing="-2">{tspans}</text>
  <text x="120" y="760" font-family="ui-sans-serif, system-ui, sans-serif" font-size="28" font-weight="700" fill="{accent}" letter-spacing="2">{html.escape(brand.upper())}</text>
  <text x="1480" y="760" text-anchor="end" font-family="ui-sans-serif, system-ui, sans-serif" font-size="24" font-weight="600" fill="#475569" letter-spacing="1">{html.escape(pill)}</text>
</svg>'''
pathlib.Path(out_path).write_text(svg, encoding='utf-8')
print(f"wrote {out_path} ({len(lines)} lines, hero={'number' if m else 'icon'})")

Customising the hero icon: replace the placeholder <g> block with cluster-specific iconography from your project. Keep stroke width 5-9, viewBox-relative coordinates (drawn for a 280x280 box), and stroke-only fills so the icon reads at thumbnail size in social previews. Examples (n8n nodes, code brackets, agent graph, RPA grid) are easy to author — see the feature script's structure.

Rasterize SVG to PNG

The SVG is the editable source. The blog references PNG only — most CMSes deliver PNG more reliably through their CDN than SVG.

# Preferred: ImageMagick at 192 DPI (renders text at 2x for sharpness)
for svg in tmp/blog-drafts/<slug>-*.svg; do
  png="${svg%.svg}.png"
  magick -density 192 -background white "$svg" -resize 1600x "$png"
done

# Or one of the fallbacks:
rsvg-convert -w 1600 -b white in.svg -o out.png
inkscape --export-type=png --export-width=1600 in.svg
python3 -c "import cairosvg; cairosvg.svg2png(url='in.svg', write_to='out.png', output_width=1600)"

-density 192 renders text at 2x before resize (sharpness). -background white prevents black halos around antialiased edges. -resize 1600x is the practical ceiling for a CMS content column.

Compress before upload

ImageMagick output is 200-400 KB per figure; pngquant typically cuts that 60-80% with no visible quality loss.

for png in tmp/blog-drafts/<slug>-*.png; do
  pngquant --skip-if-larger --strip --output "$png" --force 256 "$png" || true
done
ls -lh tmp/blog-drafts/<slug>-*.png

If pngquant isn't installed, oxipng -o 4 tmp/blog-drafts/<slug>-*.png is a slower fallback. If neither is available, surface to the user and proceed — don't block the post on compression.

Verify the PNG

# Confirm dimensions and bit depth
magick identify tmp/blog-drafts/<slug>-*.png 2>/dev/null \
  || python3 -c "from PIL import Image; import sys; [print(p, Image.open(p).size) for p in sys.argv[1:]]" tmp/blog-drafts/<slug>-*.png

Open each PNG locally and confirm: text is sharp at 100% zoom, no missing glyphs, no black halos.

Embed in the post

For each figure, identify the anchor sentence in the draft — the closing </p> of the paragraph the figure should appear after. Pick a phrase distinctive enough that str.replace finds exactly one match.

Insert with a generic <figure> block (renders cleanly in every major CMS theme and every static-site generator's default Markdown→HTML pipeline):

<figure>
  <img src="<uploaded-png-url-or-relative-path>" alt="<full description with all numbers and labels>" loading="lazy">
  <figcaption>One sentence restating the takeaway in plain English (15-30 words).</figcaption>
</figure>

Caption rules:

• Required on every figure. No bare <img> and no <figure> without a <figcaption>. The seo-blog-writer skill's bundle validation refuses figures without captions.
• One sentence, 15-30 words, restating the takeaway in plain English (not "Figure showing X" — say what the reader should conclude).
• Allowed tags inside <figcaption>: <a> (with rel="nofollow noopener" for external), <em>. Nothing else.
• No "Figure 1." numbering.

Alt text rules:

• Restate every label and number visible in the figure. Screen readers read alt, not the figure.
• 50-200 chars. Longer than the caption.

Verify each PNG URL appears exactly once in the draft:

python3 -c "
import pathlib, re, sys
html = pathlib.Path(sys.argv[1]).read_text(encoding='utf-8')
for m in re.finditer(r'src=\"([^\"]+\.png)\"', html):
    print(m.group(1))
" tmp/blog-drafts/<slug>.draft.html | sort | uniq -c

Each URL should print 1. Zero = anchor missed; >1 = anchor matched multiple paragraphs (extend the anchor).

Upload to your CMS

This skill doesn't ship a CMS uploader — the seo-blog-writer skill handles auth and the upload endpoint for each platform it targets. After generating PNGs:

• For Ghost: seo-blog-writer's Ghost adapter exposes an image-upload snippet (POST to /ghost/api/admin/images/upload/ with the Admin API JWT).
• For WordPress: seo-blog-writer's WordPress adapter posts to /wp-json/wp/v2/media with application-password auth.
• For static-site generators (Hugo, Astro, Eleventy, Jekyll, Next-MDX): drop the PNGs into the project's static / public / assets directory and reference relative paths in the figure tag.
• For other CMSes (Webflow, Sanity, Strapi, Contentful): write a 20-line adapter that POSTs the PNG to the platform's media endpoint, then splice the returned URL.

Failure modes

Companion skills

• blog-topic-research — validates that a long-tail topic has real demand signals before drafting.
• seo-blog-writer — drafts, scrubs, AI-SEO-audits, and publishes the post to your CMS (Ghost, WordPress, or static-site) via the platform adapter.

Together, the three form a complete long-tail SEO publishing pipeline: research the topic, write the post, illustrate it, publish.

Source: jeremylongshore/claude-code-plugins-plus-skills → plugins/productivity/publishing-skills/skills/blog-figure-svg/SKILL.md