# Svg Illustrator

> 为文章、概念或技术文档创作原生 SVG 艺术插画。支持多种风格（架构图、概念图、流程图），确保在 Obsidian 中完美渲染。

- Skill: `zxhfighter/svg-illustrator` (Agent Skill)
- Install (CLI): `npx skillmds@latest add zxhfighter/svg-illustrator`
- Raw SKILL.md: https://api.skillmd.com/api/skills/zxhfighter/svg-illustrator/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: zxhfighter (https://skillmd.com/u/zxhfighter)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/zxhfighter/svg-illustrator

---


# SVG Illustrator Skill

## 核心使命
通过原生 SVG 技术，将抽象的文字概念转化为具有高度审美价值的视觉艺术。生成的作品应直接嵌入 Markdown，无需外部文件，且具备极致的超清渲染效果。

## 视觉哲学 (Visual Philosophies)

创作时必须遵循以下三大哲学之一，或根据需求进行融合：

### 1. Systemic Vision (系统化视野)
- **适用场景**：架构图、技术文档、复杂系统分析。
- **视觉特征**：深色背景网格、极细的逻辑线、高亮的发光节点。
- **颜色**：深灰/黑背景，荧光蓝/金/白线条。

### 2. Warm Minimalist (温暖极简主义)
- **适用场景**：生活感悟、治愈系内容、极简笔记。
- **视觉特征**：柔和的有机线条、大面积留白、温暖的莫兰迪色调。
- **颜色**：奶油白、麦芽色、陶土红、森林绿。

### 3. Geometric Growth (几何增长)
- **适用场景**：投资理财、自我成长、复利模型、趋势分析。
- **视觉特征**：分形几何、斐波那契螺旋、水平积蓄与垂直喷发的对比。
- **颜色**：沉稳的炭灰底色，活泼的翡翠绿/日落金渐变。

## 工作规范

### 1. 渲染兼容性 (Critical)
- **禁用 Callout 包裹**：绝对不要将 `<svg>` 代码包裹在 `> [!info]` 等引用块中，否则在 Obsidian 中可能无法渲染。
- **独立段落**：SVG 代码块前后必须保留至少一个空行。
- **响应式尺寸**：通常使用 `viewBox="0 0 800 300"`，确保在不同屏幕上等比例缩放。

### 2. 设计规范
- **禁止重叠**：确保所有图形、文字标签有足够的呼吸空间。
- **临床级标注**：使用极细的等宽字体（monospace）添加微小的技术标签，提升“专家级手感”。
- **动画增强**：适当使用 SMIL 动画（如 `<animate>`）为核心节点添加微弱的脉冲或流动效果。

## 执行步骤

1. **意图识别**：阅读用户提供的文档或概念，确定其核心灵魂。
2. **选择哲学**：匹配最合适的视觉哲学，并告知用户你的设计逻辑。
3. **编写代码**：直接在文档对应位置插入 `<svg>` 代码。
4. **添加释义**：在插画下方添加简短、有深度的“寓意解说”。

## 禁止行为
- ❌ 严禁生成低质量、卡通化、业余美感的图标。
- ❌ 严禁在代码块中展示 SVG（这将导致它不渲染）。
- ❌ 严禁使用复杂的外部滤镜，优先保证性能。