Article Cover SVG Generation
Generate professional, visually striking article cover images in SVG format for technical blogs, documentation, and articles.
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) 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] │ └─────────────────────────────────────────────────┘
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] │ └─────────────────────────────────────────────────┘
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 SVG Template
Element Templates
Comparison Box (with status icon)
Status icons: ❌ (negative), ⚠ (warning), ✓ (positive)
Performance Badge
Tag Pill
Arrow (with label)
Data Bar (for showing proportions)
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
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 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