article-cover

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Article Cover SVG Generation

文章封面SVG生成

Generate professional, visually striking article cover images in SVG format for technical blogs, documentation, and articles.

为技术博客、文档和文章生成专业且视觉冲击力强的SVG格式文章封面图片。

Critical Rules

关键规则

ViewBox Standard: Use
```
viewBox="0 0 1200 630"
```
(social media friendly 1.91:1 ratio)
Text Readability (MUST follow):
- Main title: 44-48px, bold, high contrast
- Subtitle: 28-32px, white or light color
- Labels/tags: 14-16px
- Never use fonts smaller than 11px
Background Design:
- Always use gradient backgrounds (avoid flat solid colors)
- Dark tech themes:
```
#0d1117
```
  →
```
#161b22
```
  (GitHub dark style)
- Add subtle grid patterns or decorative elements for depth
Visual Hierarchy:
- Title area: bottom 1/3 of the image (y: 420-540)
- Diagram/illustration area: top 2/3 (y: 80-400)
- Tags/labels: bottom edge (y: 550-600)
Color Contrast: Ensure text is readable against backgrounds
- Light text on dark backgrounds
- Use gradients for emphasis (orange/yellow for tech, blue/cyan for data)

ViewBox标准：使用
```
viewBox="0 0 1200 630"
```
（适配社交媒体的1.91:1比例）
文本可读性（必须遵守）:
- 主标题：44-48px，粗体，高对比度
- 副标题：28-32px，白色或浅色调
- 标签：14-16px
- 禁止使用小于11px的字体
背景设计:
- 始终使用渐变背景（避免纯色平涂）
- 深色科技主题：
```
#0d1117
```
  →
```
#161b22
```
  （GitHub深色风格）
- 添加细微网格图案或装饰元素以增加层次感
视觉层级:
- 标题区域：图片底部1/3部分（y: 420-540）
- 图表/插图区域：图片顶部2/3部分（y: 80-400）
- 标签：图片底部边缘（y: 550-600）
色彩对比度：确保文本在背景上清晰可读
- 深色背景搭配浅色文本
- 使用渐变强调重点（科技主题用橙/黄色，数据主题用蓝/青色）

Design Patterns

设计模板

Tech Article Cover (Comparison Layout)

技术文章封面（对比布局）

Best for: Performance comparisons, version upgrades, before/after scenarios

┌─────────────────────────────────────────────────┐
│  [Logo]                           [Badge: 100x+]│
│                                                 │
│  ┌─────────┐    VS    ┌─────────┐    ┌────────┐│
│  │ Before  │  ────►   │ Middle  │ ►  │ After  ││
│  │  ❌     │          │   ⚠     │    │   ✓    ││
│  └─────────┘          └─────────┘    └────────┘│
│                                                 │
│         Main Title (Large, Gradient)            │
│           Subtitle (Medium, White)              │
│                                                 │
│    [Tag1]  [Tag2]  [Tag3]  [Tag4]  [Tag5]      │
└─────────────────────────────────────────────────┘

适用场景：性能对比、版本升级、前后变化展示

┌─────────────────────────────────────────────────┐
│  [Logo]                           [Badge: 100x+]│
│                                                 │
│  ┌─────────┐    VS    ┌─────────┐    ┌────────┐│
│  │ Before  │  ────►   │ Middle  │ ►  │ After  ││
│  │  ❌     │          │   ⚠     │    │   ✓    ││
│  └─────────┘          └─────────┘    └────────┘│
│                                                 │
│         Main Title (Large, Gradient)            │
│           Subtitle (Medium, White)              │
│                                                 │
│    [Tag1]  [Tag2]  [Tag3]  [Tag4]  [Tag5]      │
└─────────────────────────────────────────────────┘

Tech Article Cover (Flow Layout)

技术文章封面（流程布局）

Best for: Process explanations, architecture overviews

┌─────────────────────────────────────────────────┐
│  [Logo]                                         │
│                                                 │
│  [Input] ──► [Process Box] ──► [Output]         │
│     │            │                │             │
│     └────────────┴────────────────┘             │
│                                                 │
│         Main Title (Large, Gradient)            │
│           Subtitle (Medium, White)              │
│                                                 │
│    [Tag1]  [Tag2]  [Tag3]  [Tag4]              │
└─────────────────────────────────────────────────┘

适用场景：流程说明、架构概述

┌─────────────────────────────────────────────────┐
│  [Logo]                                         │
│                                                 │
│  [Input] ──► [Process Box] ──► [Output]         │
│     │            │                │             │
│     └────────────┴────────────────┘             │
│                                                 │
│         Main Title (Large, Gradient)            │
│           Subtitle (Medium, White)              │
│                                                 │
│    [Tag1]  [Tag2]  [Tag3]  [Tag4]              │
└─────────────────────────────────────────────────┘

Color System

色彩体系

Purpose	Background	Stroke/Text	Use Case
Negative/Before	`#1c2128`	`#dc3545`	Problems, old version
Warning/Transition	`#1c2128`	`#ffcc02`	Partial solution, v1
Positive/After	`#1c2128`	`#00f2fe`	Solution, new version
Success	`#22863a`	`#22863a`	Checkmarks, improvements
Accent	`#ff6b35` → `#ffcc02`	gradient	Titles, highlights

用途	背景色	描边/文本色	使用场景
负面/旧版本	`#1c2128`	`#dc3545`	问题展示、旧版本
警告/过渡版	`#1c2128`	`#ffcc02`	部分解决方案、v1版本
正面/新版本	`#1c2128`	`#00f2fe`	解决方案、新版本
成功	`#22863a`	`#22863a`	勾选标记、优化点
强调色	`#ff6b35` → `#ffcc02`	渐变	标题、高亮元素

SVG Template

SVG模板

svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 630">
  <defs>
    <!-- Background gradient -->
    <linearGradient id="bgGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#0d1117"/>
      <stop offset="100%" style="stop-color:#161b22"/>
    </linearGradient>
    <!-- Title gradient (orange/yellow for tech) -->
    <linearGradient id="titleGradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:#ff6b35"/>
      <stop offset="100%" style="stop-color:#ffcc02"/>
    </linearGradient>
    <!-- Glow effect for emphasis -->
    <filter id="glow">
      <feGaussianBlur stdDeviation="2" result="coloredBlur"/>
      <feMerge>
        <feMergeNode in="coloredBlur"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
  </defs>

  <!-- Background -->
  <rect width="1200" height="630" fill="url(#bgGradient)"/>

  <!-- Top accent bar -->
  <rect x="0" y="0" width="1200" height="5" fill="url(#titleGradient)"/>

  <!-- Logo area (top-left) -->
  <g transform="translate(50, 30)">
    <!-- Logo elements here -->
  </g>

  <!-- Main illustration area (center) -->
  <g transform="translate(600, 220)">
    <!-- Diagram/comparison elements here -->
  </g>

  <!-- Main title -->
  <text x="600" y="450" fill="url(#titleGradient)"
        font-family="Arial, sans-serif" font-size="46"
        text-anchor="middle" font-weight="bold">
    Article Title Here
  </text>

  <!-- Subtitle -->
  <text x="600" y="510" fill="#fff"
        font-family="Arial, sans-serif" font-size="28"
        text-anchor="middle">
    Subtitle or Description
  </text>

  <!-- Bottom tags -->
  <g transform="translate(600, 580)">
    <!-- Tag pills here -->
  </g>
</svg>

svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 630">
  <defs>
    <!-- Background gradient -->
    <linearGradient id="bgGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color:#0d1117"/>
      <stop offset="100%" style="stop-color:#161b22"/>
    </linearGradient>
    <!-- Title gradient (orange/yellow for tech) -->
    <linearGradient id="titleGradient" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:#ff6b35"/>
      <stop offset="100%" style="stop-color:#ffcc02"/>
    </linearGradient>
    <!-- Glow effect for emphasis -->
    <filter id="glow">
      <feGaussianBlur stdDeviation="2" result="coloredBlur"/>
      <feMerge>
        <feMergeNode in="coloredBlur"/>
        <feMergeNode in="SourceGraphic"/>
      </feMerge>
    </filter>
  </defs>

  <!-- Background -->
  <rect width="1200" height="630" fill="url(#bgGradient)"/>

  <!-- Top accent bar -->
  <rect x="0" y="0" width="1200" height="5" fill="url(#titleGradient)"/>

  <!-- Logo area (top-left) -->
  <g transform="translate(50, 30)">
    <!-- Logo elements here -->
  </g>

  <!-- Main illustration area (center) -->
  <g transform="translate(600, 220)">
    <!-- Diagram/comparison elements here -->
  </g>

  <!-- Main title -->
  <text x="600" y="450" fill="url(#titleGradient)"
        font-family="Arial, sans-serif" font-size="46"
        text-anchor="middle" font-weight="bold">
    Article Title Here
  </text>

  <!-- Subtitle -->
  <text x="600" y="510" fill="#fff"
        font-family="Arial, sans-serif" font-size="28"
        text-anchor="middle">
    Subtitle or Description
  </text>

  <!-- Bottom tags -->
  <g transform="translate(600, 580)">
    <!-- Tag pills here -->
  </g>
</svg>

Element Templates

元素模板

Comparison Box (with status icon)

对比框（带状态图标）

svg

<g transform="translate(X, Y)">
  <rect x="0" y="0" width="300" height="180" rx="10"
        fill="#1c2128" stroke="#COLOR" stroke-width="2"/>
  <text x="150" y="30" fill="#COLOR" font-size="17"
        text-anchor="middle" font-weight="bold">ICON Title</text>
  <!-- Content here -->
</g>

Status icons:

❌

(negative),

⚠

(warning),

✓

(positive)

svg

<g transform="translate(X, Y)">
  <rect x="0" y="0" width="300" height="180" rx="10"
        fill="#1c2128" stroke="#COLOR" stroke-width="2"/>
  <text x="150" y="30" fill="#COLOR" font-size="17"
        text-anchor="middle" font-weight="bold">ICON Title</text>
  <!-- Content here -->
</g>

状态图标：

❌

（负面）,

⚠

（警告）,

✓

（正面）

Performance Badge

性能徽章

svg

<g transform="translate(X, Y)">
  <rect x="-60" y="-25" width="140" height="50" rx="25"
        fill="#00f2fe" opacity="0.15" stroke="#00f2fe" stroke-width="2"/>
  <text x="10" y="8" fill="#00f2fe" font-size="28"
        text-anchor="middle" font-weight="bold">100x+</text>
</g>

svg

<g transform="translate(X, Y)">
  <rect x="-60" y="-25" width="140" height="50" rx="25"
        fill="#00f2fe" opacity="0.15" stroke="#00f2fe" stroke-width="2"/>
  <text x="10" y="8" fill="#00f2fe" font-size="28"
        text-anchor="middle" font-weight="bold">100x+</text>
</g>

Tag Pill

标签胶囊

svg

<rect x="X" y="-22" width="100" height="36" rx="18"
      fill="transparent" stroke="#COLOR" stroke-width="2"/>
<text x="X+50" y="4" fill="#COLOR" font-size="14"
      text-anchor="middle" font-weight="bold">TagName</text>

svg

<rect x="X" y="-22" width="100" height="36" rx="18"
      fill="transparent" stroke="#COLOR" stroke-width="2"/>
<text x="X+50" y="4" fill="#COLOR" font-size="14"
      text-anchor="middle" font-weight="bold">TagName</text>

Arrow (with label)

箭头（带标签）

svg

<g transform="translate(X, Y)">
  <path d="M 0 0 L 35 0" stroke="#COLOR" stroke-width="3" fill="none"/>
  <polygon points="35,0 25,-6 25,6" fill="#COLOR"/>
</g>

svg

<g transform="translate(X, Y)">
  <path d="M 0 0 L 35 0" stroke="#COLOR" stroke-width="3" fill="none"/>
  <polygon points="35,0 25,-6 25,6" fill="#COLOR"/>
</g>

Data Bar (for showing proportions)

数据条（用于展示比例）

svg

<rect x="X" y="Y" width="WIDTH" height="12" rx="2"
      fill="#COLOR" opacity="0.8"/>

svg

<rect x="X" y="Y" width="WIDTH" height="12" rx="2"
      fill="#COLOR" opacity="0.8"/>

Workflow

工作流程

Understand the article: What's the main topic? Is it a comparison, tutorial, or overview?
Choose layout pattern:
- Comparison → Use 2-3 column comparison layout
- Process/Flow → Use flow diagram layout
- Single concept → Use centered illustration
Extract key elements:
- Main title (keep concise, 10-15 Chinese chars or 5-8 English words)
- Subtitle (descriptive, can be longer)
- Key metrics (performance numbers, version info)
- Tags (3-5 relevant keywords)
Design the illustration:
- Use simple shapes (rectangles, arrows)
- Show the core concept visually
- Use color to differentiate states/versions
Generate SVG: Follow the template, ensure all text is readable

理解文章内容：文章的核心主题是什么？是对比类、教程类还是概述类？
选择布局模板:
- 对比类 → 使用2-3列对比布局
- 流程/步骤类 → 使用流程图布局
- 单一概念 → 使用居中插图布局
提取关键元素:
- 主标题（简洁，10-15个中文字符或5-8个英文单词）
- 副标题（描述性，可适当加长）
- 关键指标（性能数据、版本信息等）
- 标签（3-5个相关关键词）
设计插图:
- 使用简单形状（矩形、箭头）
- 直观展示核心概念
- 用色彩区分不同状态/版本
生成SVG：遵循模板，确保所有文本清晰可读

Output

输出规范

Filename:
```
{article-slug}-cover.svg
```
Location: Same directory as the article or
```
assets/
```
folder
Tell user: Can be opened in browser, converted to PNG via Inkscape/browser screenshot

文件名：
```
{article-slug}-cover.svg
```
存储位置：与文章同目录或
```
assets/
```
文件夹
告知用户：可在浏览器中打开，通过Inkscape或浏览器截图转换为PNG格式

Tips

小贴士

Chinese text: Use
```
font-family="Arial, sans-serif"
```
which has good CJK support
Emphasis: Use
```
filter="url(#glow)"
```
sparingly on key elements
Spacing: Keep 20-40px padding around text elements
Testing: Open SVG in browser to verify rendering before finalizing

中文文本：使用
```
font-family="Arial, sans-serif"
```
，该字体对CJK字符有良好支持
强调效果：仅在关键元素上少量使用
```
filter="url(#glow)"
```
间距：文本元素周围保留20-40px的内边距
测试：最终定稿前在浏览器中打开SVG验证渲染效果