skills.rest
ishiyan
ishiyanCOMMUNITY
Explore all skills by this author →
GitHub

svg-illustration

Create scalable SVG diagrams with reusable defs for Marp/Marpit slides.

Updated Nov 24, 2021
Search Tags:#marp#layout#svg#diagram#embedding#svg-standards#marpit
One-click install
npx skills add https://github.com/ishiyan/Mbng --skill svg-illustration
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: svg-illustration
Source: https://github.com/ishiyan/Mbng/tree/main/.opencode/skills/svg-illustration
Command: npx skills add https://github.com/ishiyan/Mbng --skill svg-illustration

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve?

This skill helps you create clean, scalable SVG diagrams for Marp/Marpit slides, ensuring consistent visuals and reliable embedding across themes.

Core Features & Use Cases

  • SVG rules for Marp/Marpit diagrams, including sizing, viewBox discipline, and consistent styling.
  • Pattern templates and examples to accelerate diagram creation (process flows, architecture diagrams, KPI dashboards, etc).
  • Embedding guidance and troubleshooting for slide integration across themes.

Quick Start

Create a simple, scalable SVG diagram that follows the core rules and embed it using the recommended background syntax.

Frequently Asked Questions about svg-illustration

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I embed SVG diagrams in Marp slides without scaling issues?▼

To embed SVG diagrams in Marp slides without scaling issues, enforce a tight viewBox, maintain consistent stroke widths, and use the recommended background syntax for reliable rendering across different slide themes.

What is the best way to reuse styles and defs in Marpit SVG diagrams?▼

The best way to reuse styles in Marpit SVG diagrams is by defining reusable defs like shadows, gradients, and markers within the SVG, ensuring proper namespaces and accessible text labels for clean architecture.

Does Marp support multi-diagram presentations using SVG assets?▼

Yes, Marp supports multi-diagram presentations using SVG assets. This approach provides sizing recommendations, pattern templates for process flows and architecture diagrams, and consistent styling across all slides.

Why does my SVG diagram break when switching Marp slide themes?▼

SVG diagrams break when switching Marp slide themes due to inconsistent styling or improper embedding. Follow SVG standards with tight viewBox discipline and use proper embedding patterns to ensure reliable visual integration.

Can I generate KPI dashboards and process flows as SVG for Marp?▼

Yes, you can generate KPI dashboards and process flows as SVG for Marp. This provides pattern templates and examples to accelerate diagram creation while enforcing scalable, clean visual standards for slide presentations.

Related Skills

Explore More Design & Creative Skills→
daffy0208daffy0208
34

brand-designer

Design cohesive brand identities with SVG logos, color palettes, and typography systems.

Community
Intermediate
narumirunanarumiruna
8

svg-illustration

Create scalable SVG diagrams for Marp/Marpit slide decks.

Community
Advanced
NextMed-mainNextMed-main
4

marp-pitch-creator

Generates Marp presentation slides from Markdown files with Tailwind CSS styling.

Official
Intermediate
nibzardnibzard
7

marp-slide-quality

Analyze Marp slide decks with SlideGauge and generate actionable quality fixes.

Community
Advanced