Back to Details

svg-illustrator

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

SVG Illustrator Skill

SVG Illustrator Skill

核心使命

Core Mission

通过原生 SVG 技术，将抽象的文字概念转化为具有高度审美价值的视觉艺术。生成的作品应直接嵌入 Markdown，无需外部文件，且具备极致的超清渲染效果。
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)

Visual Philosophies

创作时必须遵循以下三大哲学之一，或根据需求进行融合：
When creating, you must follow one of the three philosophies below, or blend them as needed:

1. Systemic Vision (系统化视野)

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 (温暖极简主义)

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 (几何增长)

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. 渲染兼容性 (Critical)

1. Rendering Compatibility (Critical)

  • 禁用 Callout 包裹：绝对不要将 
    <svg>
    代码包裹在 
    > [!info]
    等引用块中，否则在 Obsidian 中可能无法渲染。
  • 独立段落：SVG 代码块前后必须保留至少一个空行。
  • 响应式尺寸：通常使用 
    viewBox="0 0 800 300"
    ，确保在不同屏幕上等比例缩放。
  • 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. 设计规范

2. Design Specifications

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

  1. 意图识别：阅读用户提供的文档或概念，确定其核心灵魂。
  2. 选择哲学：匹配最合适的视觉哲学，并告知用户你的设计逻辑。
  3. 编写代码：直接在文档对应位置插入 
    <svg>
    代码。
  4. 添加释义：在插画下方添加简短、有深度的“寓意解说”。
  1. Intent Recognition: Read the document or concept provided by the user to identify its core essence.
  2. Philosophy Selection: Match the most suitable visual philosophy and inform the user of your design logic.
  3. Code Writing: Directly insert the 
    <svg>
    code at the corresponding position in the document.
  4. Add Explanation: Add a short, in-depth "meaning explanation" below the illustration.

禁止行为

Prohibited Behaviors

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