An SVG illustration maker for Obsidian, a note-taking application that stores linked documents. It turns a described concept into a simple vector image and saves it at a specified location.

Use it for spatial layouts, annotated figures, concept maps, and simple scenes made from shapes, arrows, and text.

It helps create reusable diagrams without drawing them manually, while following layout, readability, and light- and dark-theme requirements.

svg-maker — Agent for Claude Code by Mohamed-El-Sharqawy

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Clone the repo

git clone --depth 1 https://github.com/Mohamed-El-Sharqawy/agent-tutor

Made for: Claude Code.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

README.md

[![agentmods](https://agentmods.dev/badge/agents/mohamed-el-sharqawy/agent-tutor/svg-maker/github.svg)](https://agentmods.dev/agents/mohamed-el-sharqawy/agent-tutor/svg-maker)

Your own site

<a href="https://agentmods.dev/agents/mohamed-el-sharqawy/agent-tutor/svg-maker"><img src="https://agentmods.dev/badge/agents/mohamed-el-sharqawy/agent-tutor/svg-maker/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

Your own site · 80×15

<a href="https://agentmods.dev/agents/mohamed-el-sharqawy/agent-tutor/svg-maker"><img src="https://agentmods.dev/badge/agents/mohamed-el-sharqawy/agent-tutor/svg-maker.svg" alt="Reviewed on agentmods" width="80" height="20"></a>

Per session 49 Only the description is in the session, so the agent can decide to use it. The body loads when it is invoked.

When invoked 543 The whole file, excluding the scripts and references it only reads on demand.

Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.

Origin original No closer match found in the catalogue.

Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

Model	Per session	Once invoked
Fable 5.1	$0.00049	$0.00543
Opus 5	$0.00024	$0.00271
Sonnet 5	$0.00010	$0.00109
Haiku 4.5	$0.00005	$0.00054

Measured 12d ago against content hash c1e43ef14354, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-12, from the pricing page.

Security

Grade A, and why

svg-maker scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 12d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

agents/svg-maker.md · 35 lines

What it actually says

You are svg-maker, an SVG illustrator for an Obsidian learning vault. You turn concepts into clear vector illustrations saved directly into the vault.

Workflow

Understand the concept from the task. If the task references note files (absolute paths), read them first.
Design a simple, legible illustration. Favour rectangles, arrows, circles, and text over elaborate art.
Write the SVG to the exact path given in the task using the write tool.
Reply with exactly three lines:
- Saved: <path>
- Embed: ![[<vault-relative path>]]
- Description: <one line>

SVG requirements (all mandatory)

Root element: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 W H" width="100%"> — viewBox always, fixed pixel width never.
Works on light AND dark themes: draw a soft rounded background rect (e.g. fill="#f6f8fa" with rx="12") and use dark text on it. Never rely on currentColor or transparent text.
Text: font-family="system-ui, sans-serif", font-size >= 14, fill="#1f2328" (or similar dark tone).
Stroke arrows/lines: stroke="#57606a", stroke-width >= 2, arrowheads via <marker> defs.
Inline attributes only — no <style>, no CSS classes, no <script>, no <foreignObject>, no external images or fonts.
Well-formed XML: every open tag closed, quotes balanced, escape & as &, < in text as <.
Keep the whole file under ~100 elements and 150 lines.

Design taste

Grid your layout mentally; align shapes; consistent spacing (16-24px).
One accent color for the focal concept, muted greys for context — do not rainbow.
Label everything that needs a label; nothing unlabeled floating in space.
If a Mermaid diagram could express it as well, say so in the Description line — SVG should be reserved for what Mermaid can't do (spatial layouts, annotated figures, custom scenes).

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

12d ago First seen · 35 lines · 49 tokens per session scan A c1e43ef14354

Subscribe to this mod's changes

svg-maker is an agent published in the GitHub repository Mohamed-El-Sharqawy/agent-tutor (3 stars, last pushed 11d ago), licensed MIT. It adds 49 tokens to every session and 543 once invoked, about $0.0002 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.

Claude Code Creative and media Design and UX agent-skills ai-agents ai-tutor claude-skills codex

design-analyzer

Analyzes Figma structural nodes (pages, screens, components, instances, tokens) from a deterministic manifest and adds semantic enrichment — concise summaries, tags, and a screen's purpose — plus conservative related edges. Does NOT invent structural nodes or edges.

Egonex-AI/Understand-Anything · 56 tokens

ui-spec-designer

Tier 3 Specialist agent focused on bridging the gap between requirements (PRD) and implementation. Creates detailed UI Specifications including component decomposition, state matrices, and interaction definitions.

tranhieutt/software_development_department · 39 tokens

ux-researcher

The UX Researcher generates user insights through research methods: interviews, usability tests, surveys, and behavioral analysis. Use this agent to plan and analyze user research, synthesize findings into actionable insights, validate design assumptions, identify user pain points, and generate evidence-based design…

tranhieutt/software_development_department · 70 tokens

brainstorm-swarm:designer

Brainstorming persona — UX / Product Designer. Use when the swarm-protocol skill spawns parallel persona agents and a design perspective is needed. Asks about user flow, friction, accessibility, and aesthetic coherence.

viktorbezdek/skillstack · 50 tokens

ui-designer

Use this agent when UI/UX work is needed: creating custom SwiftUI components, implementing animations, fixing layout issues, polishing visual design, building a design system, or improving accessibility. For example: adding a custom tab bar animation, implementing a skeleton loading view, auditing VoiceOver support…

xvirobotics/metaskill · 75 tokens

ux-strategist

A batch UX strategy and diagnosis agent that produces a written report about a product's user experience. UX, or user experience, covers how people understand, navigate, and use a product.

laymom/consulting-ux-strategy · 118 tokens