svg-illustrator

Original：🇨🇳 Chinese

Translated

Create native SVG art illustrations for articles, concepts, or technical documents. Support multiple styles (architecture diagrams, concept maps, flowcharts) and ensure perfect rendering in Obsidian.

2installs

Sourcezxhfighter/skills-hub

Added on2026-02-11

NPX Install

npx skill4agent add zxhfighter/skills-hub svg-illustrator

SKILL.md Content (Chinese)

View Translation Comparison →

SVG Illustrator Skill

Core Mission

Transform abstract textual concepts into visually artistic works with high aesthetic value using native SVG technology. The generated works should be directly embedded in Markdown without requiring external files, and feature ultra-high-definition rendering effects.

Visual Philosophies

When creating, you must follow one of the three philosophies below, or blend them as needed:

1. Systemic Vision

Applicable Scenarios: Architecture diagrams, technical documents, complex system analysis.
Visual Features: Dark background grid, extremely thin logic lines, highlighted glowing nodes.
Colors: Dark gray/black background, fluorescent blue/gold/white lines.

2. Warm Minimalist

Applicable Scenarios: Life insights, healing content, minimalist notes.
Visual Features: Soft organic lines, large areas of white space, warm Morandi tones.
Colors: Cream white, malt color, terracotta red, forest green.

3. Geometric Growth

Applicable Scenarios: Investment and financial management, self-growth, compound interest models, trend analysis.
Visual Features: Fractal geometry, Fibonacci spiral, contrast between horizontal accumulation and vertical eruption.
Colors: Calm charcoal gray background, vibrant emerald green/sunset gold gradient.

Work Specifications

1. Rendering Compatibility (Critical)

Disable Callout Wrapping: Never wrap
```
<svg>
```
code in callout blocks like
```
> [!info]
```
, as this may prevent rendering in Obsidian.
Independent Paragraphs: Leave at least one blank line before and after the SVG code block.
Responsive Dimensions: Typically use
```
viewBox="0 0 800 300"
```
to ensure proportional scaling across different screens.

2. Design Specifications

No Overlaps: Ensure sufficient breathing space for all graphics and text labels.
Clinical-Grade Annotations: Use extremely thin monospace fonts to add tiny technical labels, enhancing the "expert-level feel".
Animation Enhancement: Appropriately use SMIL animations (such as
```
<animate>
```
) to add subtle pulse or flow effects to core nodes.

Execution Steps

Intent Recognition: Read the document or concept provided by the user to identify its core essence.
Philosophy Selection: Match the most suitable visual philosophy and inform the user of your design logic.
Code Writing: Directly insert the
```
<svg>
```
code at the corresponding position in the document.
Add Explanation: Add a short, in-depth "meaning explanation" below the illustration.

Prohibited Behaviors

❌ Strictly prohibit generating low-quality, cartoonish, amateur-style icons.
❌ Strictly prohibit displaying SVG in code blocks (this will prevent it from rendering).
❌ Strictly prohibit using complex external filters; prioritize performance.