Featured Image Creator

Create blog featured images as clean SVG graphics at 2400x1260px. Illustrations and icons tell the story, not text. Output is converted to PNG via rsvg-convert for WordPress.

Specs

Conversion Command

for f in *.svg; do rsvg-convert -f png -w 2400 -h 1260 -o "${f%.svg}.png" "$f"; done

Single file:

rsvg-convert -f png -w 2400 -h 1260 -o "output.png" "input.svg"

Illustration Library (Primary Visual Source)

Location

~/Icons/graphics-inspirations/

Available Collections

How to Use Illustrations

Illustrations are full SVG files with embedded <style> blocks using CSS classes (.st0, .st1, etc.) for colors. They have their own viewBoxes (commonly 0 0 156 156 or 0 0 600 600).

Embed using nested <svg> element to preserve the illustration's style scope:

<!-- Read the illustration file, strip the XML declaration and outer <svg> opening/closing -->
<!-- Then embed as a nested SVG with positioning -->
<svg x="600" y="80" width="1200" height="1100" viewBox="0 0 156 156">
  <style type="text/css">
    .st0{fill:#F7CFC6;}
    .st1{fill:#73504E;}
    <!-- ... all style classes from the illustration -->
  </style>
  <!-- All illustration paths/groups here -->
</svg>

Key embedding rules:

1. Read the illustration SVG file completely
2. Extract everything BETWEEN <svg ...> and </svg> (the inner content including <style>)
3. Wrap in a new <svg> element with x/y/width/height for positioning on the 2400x1260 canvas
4. The nested SVG's viewBox should match the original illustration's viewBox
5. Size the illustration to occupy ~60-80% of canvas height (750-1000px height)
6. Center horizontally, position slightly above vertical center

Illustration style notes:

• All illustrations use flat design with vibrant, consistent color palettes
• Colors include blues (#006BFF, #3BA2FB), greens (#00C491, #02A05A), pinks (#EE5271), yellows (#FFD700), and skin tones (#F7CFC6, #FAB19D)
• Character-centric scenes with professional themes
• Well-suited as hero visuals without color modification

Matching Illustrations to Topics

FontAwesome Icons (Local)

Location

~/Downloads/fontawesome-pro-6.4.2-desktop/svgs/

Categories

How to Use FontAwesome Icons

1. Read the SVG file to get the path data
2. Extract the <path d="..."> and viewBox from the file
3. Embed inline in your SVG using a <g> with transform for positioning and scaling

<!-- Example: embedding a FontAwesome icon -->
<g transform="translate(500, 400) scale(0.15)">
  <!-- Paste the path data from the .svg file -->
  <path d="M0 64C0 28.7 28.7 0 64 0L352..." fill="#2563eb"/>
</g>

Scaling Math

FontAwesome icons use large viewBoxes (typically 0 0 512 512 or 0 0 640 512). To get them to a target pixel size in the 2400x1260 canvas:

Formula: scale = target_size / icon_viewbox_width

Common Icons by Topic

Open-Source SVG Icons (Online)

When FontAwesome doesn't have what you need, use inline SVG paths from:

• Heroicons (MIT): Simple, clean outlines or solid fills
• Lucide (ISC): Fork of Feather Icons, consistent 24x24 grid
• Simple Icons (CC0): Brand/company logos
• Tabler Icons (MIT): 2px stroke, rounded caps

Embed the same way: extract <path> data, embed in <g> with transform.

Visual Styles

Pick one style per image based on article type. Do not mix styles.

Style 1: Floating Icons (Default)

Best for: Most blog articles, how-to guides, educational content.

Clean background gradient with 4-8 icons floating at different sizes, slight rotations, and varying opacities. The icons tell the story of the article topic.

Background: Subtle gradient (warm or cool), dot grid pattern for texture. Icons: Mixed sizes (60px to 250px), scattered composition, slight rotations (-15 to +15 degrees), varying opacity (0.4 to 1.0 for depth). Accents: Soft colored blobs behind icon clusters, decorative rings, thin connecting lines optional.

Depth techniques (REQUIRED for standout quality):

• Use 3 distinct depth layers: foreground (opacity 0.9-1.0, scale large), midground (0.6-0.8, scale medium), background (0.3-0.5, scale small)
• Background-layer icons should use a blur filter (feGaussianBlur stdDeviation="3") to simulate depth of field
• Foreground icons should have a drop shadow for elevation
• Add 1-2 decorative rings (unfilled circles with thin stroke) behind the hero icon cluster for visual interest
• Place accent dots (3-6px circles at 0.1-0.2 opacity) scattered between icons

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2400 1260">
  <defs>
    <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#f0f9ff"/>
      <stop offset="100%" stop-color="#e0f2fe"/>
    </linearGradient>
    <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
      <feDropShadow dx="0" dy="6" stdDeviation="12" flood-opacity="0.1"/>
    </filter>
    <filter id="bgBlur">
      <feGaussianBlur stdDeviation="3"/>
    </filter>
    <pattern id="dots" width="30" height="30" patternUnits="userSpaceOnUse">
      <circle cx="15" cy="15" r="1.5" fill="#94a3b8" opacity="0.15"/>
    </pattern>
  </defs>

  <!-- Background -->
  <rect width="100%" height="100%" fill="url(#bg)"/>
  <rect width="100%" height="100%" fill="url(#dots)"/>

  <!-- Accent blobs (soft, organic shapes) -->
  <ellipse cx="650" cy="450" rx="320" ry="260" fill="#dbeafe" opacity="0.35"/>
  <ellipse cx="1800" cy="800" rx="280" ry="220" fill="#c7d2fe" opacity="0.25"/>

  <!-- Decorative rings (behind hero icon) -->
  <circle cx="1100" cy="550" r="220" fill="none" stroke="#93c5fd" stroke-width="1.5" opacity="0.2"/>
  <circle cx="1100" cy="550" r="320" fill="none" stroke="#93c5fd" stroke-width="1" opacity="0.1"/>

  <!-- Accent dots scattered for texture -->
  <circle cx="380" cy="200" r="4" fill="#3b82f6" opacity="0.15"/>
  <circle cx="1900" cy="180" r="5" fill="#6366f1" opacity="0.12"/>
  <circle cx="2100" cy="900" r="6" fill="#3b82f6" opacity="0.1"/>
  <circle cx="300" cy="1000" r="4" fill="#8b5cf6" opacity="0.12"/>
  <circle cx="1500" cy="150" r="3" fill="#6366f1" opacity="0.15"/>

  <!-- BACKGROUND LAYER: small, blurred, low opacity -->
  <g filter="url(#bgBlur)">
    <g transform="translate(200, 180) scale(0.1) rotate(-8)" opacity="0.35">
      <path d="..." fill="#8b5cf6"/>
    </g>
    <g transform="translate(2050, 950) scale(0.1) rotate(10)" opacity="0.3">
      <path d="..." fill="#a78bfa"/>
    </g>
  </g>

  <!-- MIDGROUND LAYER: medium, partial opacity -->
  <g filter="url(#shadow)">
    <g transform="translate(500, 350) scale(0.22) rotate(8)" opacity="0.7">
      <path d="..." fill="#3b82f6"/>
    </g>
    <g transform="translate(1750, 350) scale(0.2) rotate(-10)" opacity="0.65">
      <path d="..." fill="#6366f1"/>
    </g>
    <g transform="translate(450, 750) scale(0.23) rotate(-10)" opacity="0.75">
      <path d="..." fill="#2563eb"/>
    </g>
  </g>

  <!-- FOREGROUND LAYER: hero, large, high opacity, strong shadow -->
  <g filter="url(#shadow)">
    <g transform="translate(1050, 500) scale(0.45) rotate(-5)" opacity="0.95">
      <path d="..." fill="#2563eb"/>
    </g>
    <g transform="translate(1850, 630) scale(0.2) rotate(6)" opacity="0.85">
      <path d="..." fill="#6366f1"/>
    </g>
  </g>
</svg>

Composition rules for floating icons:

• 1 large hero icon (180-250px) placed slightly off-center (rule of thirds)
• 2-3 midground icons (80-120px) distributed around
• 2-3 background icons (40-70px) filling gaps, lower opacity, slight blur
• Minimum 80px padding from canvas edges
• Vary rotation between -15 and +15 degrees
• Use 2-3 colors from the same palette, never rainbow
• Add decorative rings behind hero icon for visual depth
• Scatter 4-6 accent dots between icon clusters

Style 2: Icon Cards on Grid

Best for: Tool comparisons, plugin roundups, structured content.

Icons sit inside white card containers arranged on a visible dot grid. Connected by dashed lines. Feels organized and structured like a diagram.

Background: Light neutral with visible dot grid. Icons: Inside white rounded-rect cards (120x120px), consistent sizes (60-80px), arranged in a balanced grid-like pattern. Accents: Thin dashed lines connecting cards, subtle drop shadows on cards, one card highlighted with colored border.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2400 1260">
  <defs>
    <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#fafbfc"/>
      <stop offset="100%" stop-color="#f1f5f9"/>
    </linearGradient>
    <filter id="card-shadow" x="-20%" y="-20%" width="140%" height="140%">
      <feDropShadow dx="0" dy="4" stdDeviation="12" flood-opacity="0.06"/>
    </filter>
    <filter id="hero-shadow" x="-20%" y="-20%" width="140%" height="140%">
      <feDropShadow dx="0" dy="8" stdDeviation="20" flood-opacity="0.12"/>
    </filter>
    <pattern id="grid" width="60" height="60" patternUnits="userSpaceOnUse">
      <circle cx="30" cy="30" r="1.5" fill="#cbd5e1" opacity="0.25"/>
    </pattern>
  </defs>

  <rect width="100%" height="100%" fill="url(#bg)"/>
  <rect width="100%" height="100%" fill="url(#grid)"/>

  <!-- Connecting lines between cards (dashed) -->
  <line x1="520" y1="400" x2="780" y2="400" stroke="#cbd5e1" stroke-width="2" stroke-dasharray="8 4"/>
  <line x1="920" y1="400" x2="1180" y2="400" stroke="#cbd5e1" stroke-width="2" stroke-dasharray="8 4"/>

  <!-- Regular cards -->
  <g filter="url(#card-shadow)" transform="translate(400, 340)">
    <rect x="-60" y="-60" width="120" height="120" rx="16" fill="#fff"/>
    <g transform="scale(0.15) translate(-256, -256)">
      <path d="..." fill="#64748b"/>
    </g>
  </g>

  <!-- Hero card (highlighted, slightly larger, colored border) -->
  <g filter="url(#hero-shadow)" transform="translate(800, 340)">
    <rect x="-72" y="-72" width="144" height="144" rx="20" fill="#fff" stroke="#3b82f6" stroke-width="3"/>
    <g transform="scale(0.18) translate(-256, -256)">
      <path d="..." fill="#2563eb"/>
    </g>
  </g>

  <!-- More regular cards... -->
</svg>

Composition rules for icon cards:

• 5-7 cards in a loose grid (NOT perfectly aligned, slight organic drift)
• One card is the "hero" card: 20% larger, colored border, stronger shadow
• Cards connected by dashed lines to show relationships
• Use the Slate Neutral palette for cards, accent color only on hero card
• Stagger rows slightly for visual interest (not a rigid grid)

Style 3: Bold Gradient + Central Icon

Best for: Single-topic articles, reviews, opinion pieces, newsletter headers.

A rich gradient background with one large central icon (or a tight cluster of 2-3). Minimal, impactful, bold.

Background: Strong multi-point gradient, no grid. Icons: 1 large icon (280-350px) centered, or 2-3 tightly grouped. White or near-white fill. Accents: Glow effect behind central icon, concentric rings, subtle radial gradient, corner geometric shapes.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2400 1260">
  <defs>
    <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#1e3a5f"/>
      <stop offset="40%" stop-color="#1e40af"/>
      <stop offset="100%" stop-color="#3b82f6"/>
    </linearGradient>
    <radialGradient id="glow" cx="50%" cy="50%" r="35%">
      <stop offset="0%" stop-color="#fff" stop-opacity="0.12"/>
      <stop offset="100%" stop-color="#fff" stop-opacity="0"/>
    </radialGradient>
    <filter id="icon-glow" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur in="SourceGraphic" stdDeviation="15" result="blur"/>
      <feBlend in="SourceGraphic" in2="blur" mode="normal"/>
    </filter>
  </defs>

  <rect width="100%" height="100%" fill="url(#bg)"/>
  <rect width="100%" height="100%" fill="url(#glow)"/>

  <!-- Concentric rings -->
  <circle cx="1200" cy="630" r="250" fill="none" stroke="#fff" stroke-width="1.5" opacity="0.08"/>
  <circle cx="1200" cy="630" r="350" fill="none" stroke="#fff" stroke-width="1" opacity="0.05"/>
  <circle cx="1200" cy="630" r="450" fill="none" stroke="#fff" stroke-width="0.5" opacity="0.03"/>

  <!-- Corner geometric accents -->
  <rect x="80" y="80" width="120" height="3" rx="1.5" fill="#fff" opacity="0.1"/>
  <rect x="80" y="80" width="3" height="120" rx="1.5" fill="#fff" opacity="0.1"/>
  <rect x="2200" y="1080" width="120" height="3" rx="1.5" fill="#fff" opacity="0.1"/>
  <rect x="2317" y="960" width="3" height="120" rx="1.5" fill="#fff" opacity="0.1"/>

  <!-- Central icon (large, white, with glow) -->
  <g transform="translate(1200, 630) scale(0.6)" filter="url(#icon-glow)">
    <g transform="translate(-256, -256)">
      <path d="..." fill="#fff"/>
    </g>
  </g>

  <!-- Small supporting icon (subtle) -->
  <g transform="translate(700, 400) scale(0.15)" opacity="0.2">
    <path d="..." fill="#93c5fd"/>
  </g>
</svg>

Style 4: Glassmorphism Float (NEW)

Best for: SaaS reviews, modern web tools, premium content.

Icons float on frosted glass cards over a gradient background. Premium, modern feel. Each icon sits on a semi-transparent card with backdrop blur simulation.

Background: Rich gradient (dark or vibrant). Icons: Inside glassmorphic containers (white at 0.08-0.12 opacity, white border at 0.15 opacity, rounded corners). Accents: Gradient orbs behind glass cards, scattered light sparkles.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2400 1260">
  <defs>
    <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#0f172a"/>
      <stop offset="50%" stop-color="#1e293b"/>
      <stop offset="100%" stop-color="#0f172a"/>
    </linearGradient>
    <filter id="glow-orb">
      <feGaussianBlur stdDeviation="40"/>
    </filter>
    <filter id="card-shadow">
      <feDropShadow dx="0" dy="8" stdDeviation="16" flood-color="#000" flood-opacity="0.2"/>
    </filter>
  </defs>

  <rect width="100%" height="100%" fill="url(#bg)"/>

  <!-- Glowing orbs behind cards -->
  <circle cx="500" cy="400" r="200" fill="#3b82f6" opacity="0.15" filter="url(#glow-orb)"/>
  <circle cx="1900" cy="800" r="180" fill="#8b5cf6" opacity="0.12" filter="url(#glow-orb)"/>
  <circle cx="1200" cy="600" r="250" fill="#06b6d4" opacity="0.08" filter="url(#glow-orb)"/>

  <!-- Glass card with icon -->
  <g filter="url(#card-shadow)" transform="translate(1100, 500)">
    <!-- Glass background -->
    <rect x="-80" y="-80" width="160" height="160" rx="24"
          fill="#fff" fill-opacity="0.08"
          stroke="#fff" stroke-opacity="0.15" stroke-width="1"/>
    <!-- Icon inside -->
    <g transform="scale(0.18) translate(-256, -256)">
      <path d="..." fill="#e2e8f0"/>
    </g>
  </g>

  <!-- More glass cards at various positions... -->

  <!-- Light sparkles (tiny bright dots) -->
  <circle cx="800" cy="300" r="2" fill="#fff" opacity="0.4"/>
  <circle cx="1600" cy="200" r="1.5" fill="#fff" opacity="0.3"/>
  <circle cx="2000" cy="500" r="2" fill="#fff" opacity="0.35"/>
</svg>

Composition rules for glassmorphism:

• 4-6 glass cards of varying sizes (100px to 200px containers)
• One hero card is 40% larger than others
• Cards overlap slightly at edges for depth
• 2-3 colored orbs behind cards create the glow bleed effect
• Scatter 5-8 tiny sparkle dots (1.5-3px, white, 0.2-0.5 opacity)
• Use slate white icons (#e2e8f0) for consistency on dark backgrounds

Style 5: Illustration Hero (PREFERRED)

Best for: Any article where a matching illustration exists. This is the highest-quality style.

A full illustration from the library serves as the hero visual, positioned on a gradient background with subtle accent elements. The illustration tells the story; FA icons are optional accents only.

Background: Soft gradient matching illustration mood + subtle dot grid. Hero: Full illustration (60-80% canvas height), centered or rule-of-thirds positioned. Accents: 2-3 soft blobs behind illustration, optional 1-2 small FA icons as floating accents at very low opacity, decorative rings.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2400 1260">
  <defs>
    <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" stop-color="#f0f9ff"/>
      <stop offset="100%" stop-color="#e0f2fe"/>
    </linearGradient>
    <filter id="shadow" x="-10%" y="-10%" width="120%" height="120%">
      <feDropShadow dx="0" dy="8" stdDeviation="20" flood-opacity="0.08"/>
    </filter>
    <pattern id="dots" width="40" height="40" patternUnits="userSpaceOnUse">
      <circle cx="20" cy="20" r="1" fill="#94a3b8" opacity="0.12"/>
    </pattern>
  </defs>

  <!-- Background -->
  <rect width="100%" height="100%" fill="url(#bg)"/>
  <rect width="100%" height="100%" fill="url(#dots)"/>

  <!-- Accent blobs (behind illustration) -->
  <ellipse cx="1200" cy="600" rx="500" ry="400" fill="#dbeafe" opacity="0.3"/>
  <ellipse cx="800" cy="700" rx="300" ry="250" fill="#c7d2fe" opacity="0.2"/>

  <!-- Decorative rings -->
  <circle cx="1200" cy="630" r="500" fill="none" stroke="#93c5fd" stroke-width="1" opacity="0.1"/>

  <!-- ILLUSTRATION (nested SVG preserves its own styles) -->
  <g filter="url(#shadow)">
    <svg x="600" y="80" width="1200" height="1100" viewBox="0 0 156 156">
      <style type="text/css">
        .st0{fill:#F7CFC6;}
        .st1{fill:#73504E;}
        <!-- ... illustration styles ... -->
      </style>
      <!-- ... illustration paths ... -->
    </svg>
  </g>

  <!-- Optional: 1-2 tiny FA icon accents (very subtle) -->
  <g transform="translate(300, 200) scale(0.12)" opacity="0.15">
    <path d="..." fill="#3b82f6"/>
  </g>

  <!-- Accent dots -->
  <circle cx="400" cy="300" r="4" fill="#3b82f6" opacity="0.12"/>
  <circle cx="2000" cy="900" r="5" fill="#6366f1" opacity="0.1"/>
</svg>

Composition rules for illustration hero:

• Illustration occupies 60-80% of canvas height (750-1000px)
• Center the illustration horizontally on the canvas
• Position illustration slightly above vertical center (y offset ~80-130px from top)
• Background gradient should complement the illustration's color palette
• Accent blobs should be BEHIND the illustration, large and soft
• FA icon accents are OPTIONAL and should be at 0.1-0.2 opacity max
• Keep accent dots and decorative elements subtle — the illustration is the star
• Apply a light drop shadow to the illustration group for elevation

How to embed an illustration:

1. Read the full illustration SVG file
2. Extract the viewBox value from the source SVG
3. Extract the inner content (everything between <svg> and </svg>, including <style> blocks)
4. Wrap in a new <svg x="..." y="..." width="..." height="..." viewBox="..."> element
5. Place inside a <g filter="url(#shadow)"> for elevation
6. Size: for a 156x156 viewBox illustration, use width="1100" height="1100" and center with x="650" y="80"
7. For 600x600 viewBox illustrations, use width="1100" height="1100" and center with x="650" y="80"

Illustration viewBox sizing reference:

Color Palettes

Pick one palette per image. Match to article mood.

Cool Blue (Default for tech/WordPress)

Warm Amber (Money, business, affiliate)

Fresh Green (Growth, blogging, beginner guides)

Deep Dark (Bold reviews, opinion pieces)

Slate Neutral (Comparisons, lists, roundups)

Composition Rules

Canvas Layout

+--80px padding--+------------------------------------------+--80px padding--+
|                 |                                          |                 |
|  80px           |         SAFE AREA (2240 x 1100)          |           80px  |
|  padding        |                                          |  padding        |
|                 |                                          |                 |
+--80px padding--+------------------------------------------+--80px padding--+

• Keep all icons within the safe area (80px inset from edges)
• Social sharing crops to ~1.91:1 (Facebook) or 2:1 (Twitter). Critical content should be centered
• WordPress thumbnails crop to various ratios. Center the visual weight

Hierarchy (3-Layer Depth System)

Every image MUST use 3 depth layers for visual richness:

1. Foreground (closest to viewer)
   • The hero icon (largest, 180-300px)
   • 1-2 supporting icons at high opacity (0.85-1.0)
   • Drop shadow filter applied
   • Slight rotation for dynamism
2. Midground (middle distance)
   • 2-3 medium icons (80-120px)
   • Medium opacity (0.6-0.8)
   • Light shadow or no shadow
   • Moderate rotation
3. Background (furthest away)
   • 2-3 small icons (40-70px)
   • Low opacity (0.3-0.5)
   • Apply blur filter (feGaussianBlur stdDeviation="2-4")
   • Creates atmospheric depth

Decorative Elements (REQUIRED)

Every image must include at least 3 of these:

• Accent blobs: Soft ellipses (200-350px radius) at 0.2-0.4 opacity in palette-matching colors
• Decorative rings: 1-2 unfilled circles (200-350px radius) with thin stroke (1-2px) at 0.08-0.2 opacity centered behind hero icon
• Accent dots: 4-8 small circles (2-6px) scattered across canvas at 0.1-0.2 opacity
• Dot grid pattern: Light repeating dot pattern for texture
• Corner accents: Thin L-shaped lines in corners (Style 3 and 4 only)
• Sparkles: Tiny bright dots for glassmorphism style

Spacing

• Minimum 80px between icon edges
• Hero icon should have 180px+ clear space around it (except for decorative rings)
• Supporting icons distribute evenly but not symmetrically
• Background icons can be partially clipped by safe area edges for depth

What NOT to Do

• No text (article title goes in WordPress, not the image)
• No photographs or raster images embedded in SVG
• No more than 8 icons total (gets cluttered)
• No rainbow colors. Stick to one palette (2-3 hues)
• No perfect symmetry (feels lifeless)
• No tiny icons that disappear at thumbnail size
• No clip art aesthetic
• No decorative borders or frames
• No flat compositions without depth layers
• No icons all the same size (kills visual hierarchy)
• No icons all at the same opacity (kills depth)

Execution Steps

1. Read the article (or article outline) to understand the core topic
2. Pick a visual style: Floating Icons (default), Icon Cards, Bold Gradient, or Glassmorphism Float
3. Pick a color palette: Match to article mood/category
4. Select 5-8 icons from FontAwesome that represent the topic
   • Read each .svg file from the local FontAwesome directory
   • Extract the viewBox and <path d="..."> data
   • Note the viewBox dimensions for scaling math
5. Build the SVG: a. Set viewBox="0 0 2400 1260" b. Define gradients, filters (shadow, blur, glow), and patterns in <defs> c. Create background (gradient + pattern) d. Add accent shapes (blobs, rings, dots) e. Place BACKGROUND layer icons (small, blurred, low opacity) f. Place MIDGROUND layer icons (medium, moderate opacity) g. Place FOREGROUND layer icons (hero + supporting, high opacity, shadow) h. Add final decorative touches (sparkles, corner accents)
6. Review: Does it read well at 300px wide (thumbnail)? Is the topic obvious from icons alone? Is there clear visual depth?
7. Save as .svg file
8. Convert: rsvg-convert -f png -w 2400 -h 1260 -o "output.png" "input.svg"

Matching Style to Article Type

PREFERRED: Always check the Illustration Library first. If a matching illustration exists, use Style 5: Illustration Hero. Fall back to icon-only styles when no good illustration match is available.

rsvg-convert Notes

• For exact 2400x1260 PNG: rsvg-convert -f png -w 2400 -h 1260 -o "output.png" "input.svg"
• For batch conversion: for f in *.svg; do rsvg-convert -f png -w 2400 -h 1260 -o "${f%.svg}.png" "$f"; done
• Install on macOS: brew install librsvg
• If only -w is specified, height scales proportionally from viewBox

Mobile-Friendly Rules

Featured images display at various sizes across devices:

1. viewBox is mandatory — viewBox="0 0 2400 1260", never fixed pixel dimensions.
2. Center visual weight: Social crops (1.91:1 Facebook, 2:1 Twitter) and WordPress thumbnails all crop from center. Keep the hero icon cluster centered.
3. Test at 300px wide: The image must be recognizable and the topic obvious at thumbnail size. This is the mobile card/feed width.
4. Minimum icon rendered size: The hero icon must remain identifiable at ~60px rendered width. Background icons can fade.
5. No tiny decorative elements that vanish at small sizes — accent dots under 4px at viewBox scale disappear on mobile.
6. Responsive embed: WordPress handles this, but for custom use: width="100%" height="auto".

Quality Checklist

• viewBox is 0 0 2400 1260
• No text or negligible text (title NOT baked into image)
• Icons are from FontAwesome (local) or open-source (inline paths)
• No <image> tags or external references (fully self-contained SVG)
• 5-8 icons total, clear visual hierarchy
• One color palette used consistently (2-3 hues max)
• Icons stay within safe area (80px from edges)
• 3 depth layers present (foreground, midground, background)
• Background layer icons have blur filter applied
• Foreground icons have drop shadow
• At least 3 decorative elements (blobs, rings, dots, sparkles)
• Reads well at thumbnail size (~300px wide)
• Topic is recognizable from icons alone
• Background has gradient (not flat white)
• rsvg-convert produces clean PNG without artifacts
• File size is reasonable (under 100KB for SVG)