OES Technology

Dynamic SVG Cover Images: Enhancing Your SvelteKit Blog

sveltekitsvgopen-graphperformancedesign

In the world of technical blogging, visual consistency and brand identity play crucial roles in establishing credibility and recognition. While many developers resort to creating custom images for each blog post using external design tools, there’s a more elegant, programmatic solution available: dynamically generated SVG cover images. This approach not only ensures visual consistency across your content but also eliminates the need for managing and storing individual image files.

The Problem with Traditional Cover Images

Traditional approaches to blog post cover images typically involve creating each image manually using design tools, storing them in your project or on a CDN, and referencing them in your posts’ frontmatter. This workflow introduces several challenges:

  1. Design consistency: Maintaining visual consistency across dozens of manually created images is difficult
  2. Storage overhead: Each image adds to your repository size or CDN costs
  3. Workflow friction: Creating images becomes a separate task in your content creation process
  4. Maintenance burden: Updating your visual style requires recreating all existing images

By generating SVG cover images programmatically, we can address these challenges while gaining additional benefits like perfect scaling, theme adaptation, and automated generation.

Implementing Dynamic SVG Covers in SvelteKit

Let’s walk through implementing a system for dynamic SVG cover images in a SvelteKit blog. We’ll create both an SVG component for in-page display and a server endpoint for Open Graph images.

Step 1: Creating the SVG Component

First, let’s create a reusable SVG component that will generate a visually appealing cover based on the post’s title and slug:

<!-- src/lib/components/PostCover.svelte -->
<script lang="ts">
	export let title: string;
	export let slug: string;

	// Generate a deterministic pattern based on the slug
	const get_pattern = (slug: string) => {
		const hash = slug
			.split('')
			.reduce((acc, char) => char.charCodeAt(0) + acc, 0);
		const pattern_type = hash % 4; // 4 different pattern types

		switch (pattern_type) {
			case 0:
				return 'dots-grid';
			case 1:
				return 'dots-scattered';
			case 2:
				return 'lines-horizontal';
			default:
				return 'lines-grid';
		}
	};

	// Generate pattern elements based on the pattern type
	const generate_pattern_elements = (
		pattern: string,
		slug: string,
	) => {
		switch (pattern) {
			case 'dots-grid':
				// Create a grid of small dots
				return Array(300)
					.fill(0)
					.map((_, i) => {
						const x = (i % 30) * 40 + 20;
						const y = Math.floor(i / 30) * 20 + 10;
						return `<circle cx="${x}" cy="${y}" r="4" fill="var(--color-secondary)" opacity="0.2" />`;
					})
					.join('');

			case 'dots-scattered':
				// Create scattered dots of varying sizes
				return Array(200)
					.fill(0)
					.map((_, i) => {
						// Use hash of index + slug to create deterministic but scattered positions
						const hash =
							(i + slug.length) *
							(slug.charCodeAt(i % slug.length) || 13);
						const x = hash % 1200;
						const y = (hash * 13) % 630;
						const size = (hash % 5) + 2; // Sizes between 2-6px
						const opacity = 0.1 + (hash % 15) / 100; // Opacity between 0.1-0.25
						return `<circle cx="${x}" cy="${y}" r="${size}" fill="var(--color-secondary)" opacity="${opacity}" />`;
					})
					.join('');

			case 'lines-horizontal':
				// Create horizontal lines
				return Array(30)
					.fill(0)
					.map((_, i) => {
						const y = i * 22;
						const opacity = 0.1 + (i % 3) * 0.05;
						return `<line x1="0" y1="${y}" x2="1200" y2="${y}" stroke="var(--color-secondary)" stroke-width="1" opacity="${opacity}" />`;
					})
					.join('');

			case 'lines-grid':
				// Create a grid of lines
				const vertical = Array(40)
					.fill(0)
					.map((_, i) => {
						const x = i * 30;
						return `<line x1="${x}" y1="0" x2="${x}" y2="630" stroke="var(--color-secondary)" stroke-width="1" opacity="0.1" />`;
					})
					.join('');
				const horizontal = Array(30)
					.fill(0)
					.map((_, i) => {
						const y = i * 22;
						return `<line x1="0" y1="${y}" x2="1200" y2="${y}" stroke="var(--color-secondary)" stroke-width="1" opacity="0.1" />`;
					})
					.join('');
				return vertical + horizontal;
		}
	};

	const pattern = get_pattern(slug);
	const pattern_elements = generate_pattern_elements(pattern, slug);
</script>

<svg
	viewBox="0 0 1200 630"
	width="100%"
	height="auto"
	preserveAspectRatio="xMidYMid meet"
>
	<!-- Background -->
	<rect width="100%" height="100%" fill="var(--color-primary)" />

	<!-- Pattern -->
	<g>
		{@html pattern_elements}
	</g>

	<!-- Title with text wrapping -->
	<foreignObject x="60" y="120" width="1080" height="400">
		<div
			xmlns="http://www.w3.org/1999/xhtml"
			style="font-family: system-ui, sans-serif; color: var(--color-primary-content); font-weight: bold; font-size: 80px; line-height: 1.3; text-shadow: 0 4px 8px rgba(0,0,0,0.3); overflow-wrap: break-word; word-wrap: break-word; hyphens: auto; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; text-align: center;"
		>
			{title}
		</div>
	</foreignObject>
</svg>

This component generates a unique but deterministic pattern based on the post’s slug, ensuring that each post has a distinct visual identity while maintaining overall design consistency.

Step 2: Creating the Open Graph Image Endpoint

Next, we’ll create a server endpoint to generate the same SVG for Open Graph images, which are used when sharing your content on social media:

// src/routes/api/og-image/[slug]/+server.ts
import { error } from '@sveltejs/kit';
import type { RequestHandler } from './$types';

interface PostMetadata {
	title: string;
	date: string;
	description: string;
	tags: string[];
	published: boolean;
}

interface Post {
	metadata: PostMetadata;
}

// Generate a deterministic pattern based on the slug
const get_pattern = (slug: string) => {
	const hash = slug
		.split('')
		.reduce((acc, char) => char.charCodeAt(0) + acc, 0);
	const pattern_type = hash % 4; // 4 different pattern types

	switch (pattern_type) {
		case 0:
			return 'dots-grid';
		case 1:
			return 'dots-scattered';
		case 2:
			return 'lines-horizontal';
		default:
			return 'lines-grid';
	}
};

// Generate pattern elements
const generate_pattern_elements = (pattern: string, slug: string) => {
	// Same implementation as in the component
	// ...
};

export const GET: RequestHandler = async ({ params }) => {
	try {
		const { slug } = params;

		// Remove .svg extension if present
		const clean_slug = slug.replace(/.svg$/, '');

		// Load the post data
		let post_data: PostMetadata;

		try {
			// Try to import the post directly using the slug
			const post_module = (await import(
				`../../../../posts/${clean_slug}.md`
			)) as Post;
			post_data = post_module.metadata;
		} catch (import_error) {
			// Fallback to glob import if direct import fails
			const modules = import.meta.glob('/src/posts/*.md');

			// Find the post by matching the slug in the file path
			const post_path = Object.keys(modules).find((path) =>
				path.endsWith(`/${clean_slug}.md`),
			);

			if (!post_path || !modules[post_path]) {
				throw error(404, 'Post not found');
			}

			const post_module = (await modules[post_path]()) as Post;
			post_data = post_module.metadata;
		}

		// Generate SVG
		const pattern = get_pattern(clean_slug);
		const pattern_elements = generate_pattern_elements(
			pattern,
			clean_slug,
		);

		// Create SVG with CSS variables
		const svg = `
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 630" width="1200" height="630" preserveAspectRatio="xMidYMid meet" style="
        --color-primary: oklch(65% 0.24 240);
        --color-primary-content: oklch(98% 0.005 240);
        --color-secondary: oklch(70% 0.18 220);
        --color-secondary-content: oklch(98% 0.005 240);
      ">
        <!-- Background -->
        <rect width="100%" height="100%" fill="var(--color-primary)" />
        
        <!-- Pattern -->
        <g>
          ${pattern_elements}
        </g>
        
        <!-- Title with text wrapping -->
        <foreignObject x="60" y="120" width="1080" height="400">
          <div xmlns="http://www.w3.org/1999/xhtml" style="font-family: system-ui, sans-serif; color: var(--color-primary-content); font-weight: bold; font-size: 80px; line-height: 1.3; text-shadow: 0 4px 8px rgba(0,0,0,0.3); overflow-wrap: break-word; word-wrap: break-word; hyphens: auto; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; text-align: center;">
            ${post_data.title}
          </div>
        </foreignObject>
      </svg>
    `;

		return new Response(svg, {
			headers: {
				'Content-Type': 'image/svg+xml',
				'Cache-Control': 'public, max-age=604800, immutable',
			},
		});
	} catch (e) {
		console.error('Error generating OG image:', e);

		// Return a fallback image instead of an error
		const fallback_svg = `
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 630" width="1200" height="630" preserveAspectRatio="xMidYMid meet" style="
        --color-primary: oklch(65% 0.24 240);
        --color-primary-content: oklch(98% 0.005 240);
      ">
        <rect width="100%" height="100%" fill="var(--color-primary)" />
        <foreignObject x="60" y="120" width="1080" height="400">
          <div xmlns="http://www.w3.org/1999/xhtml" style="font-family: system-ui, sans-serif; color: var(--color-primary-content); font-weight: bold; font-size: 80px; line-height: 1.3; text-shadow: 0 4px 8px rgba(0,0,0,0.3); text-align: center;">
            Blog Post
          </div>
        </foreignObject>
      </svg>
    `;

		return new Response(fallback_svg, {
			headers: {
				'Content-Type': 'image/svg+xml',
				'Cache-Control': 'public, max-age=604800, immutable',
			},
		});
	}
};

Step 3: Supporting File Extensions for Social Media

To ensure maximum compatibility with social media platforms, we need to support URLs with the .svg extension. This is a crucial step that’s often overlooked.

When social media platforms crawl your site, they expect image URLs to have appropriate file extensions. Without an extension, some platforms might not recognize your SVG as an image, or might handle it incorrectly. By adding the .svg extension to your Open Graph image URLs, you significantly improve the chances that your images will display correctly across all platforms.

In SvelteKit, we need to create two files to handle this properly:

// src/params/slug.ts
// Match both plain slugs and slugs with .svg extension
export function match(param: string) {
	return /^[a-z0-9-]+(?:.svg)?$/.test(param);
}

This parameter matcher tells SvelteKit to accept both regular slugs and slugs with the .svg extension. The regular expression matches any lowercase alphanumeric string with hyphens, optionally followed by .svg.

// src/routes/api/og-image/[slug=slug]/+server.ts
import { GET } from '../[slug]/+server';
export { GET };

This file creates a new route that uses the parameter matcher we defined. It simply re-exports the GET handler from our original endpoint, allowing us to reuse the same logic without duplicating code. The [slug=slug] syntax tells SvelteKit to use our custom parameter matcher for this route.

With these two files in place, your API will now correctly handle requests to both /api/og-image/my-post and /api/og-image/my-post.svg, ensuring maximum compatibility with social media platforms.

Step 4: Using the Dynamic Cover in Your Blog Posts

Now, update your blog post page to use the dynamic cover. This example uses svead for SEO metadata, but I’ll also show you how to implement this without any external packages:

<!-- src/routes/posts/[slug]/+page.svelte -->
<script lang="ts">
	import { create_blog_schema, create_seo_config } from '$lib/seo';
	import PostCover from '$lib/components/PostCover.svelte';
	import { format } from 'date-fns';
	import { Head, SchemaOrg } from 'svead';
	import type { PageData } from './$types';

	let { data } = $props<{ data: PageData }>();
	let Content = data.content;

	// Use the dynamic OG image endpoint for all posts
	const og_image = `/api/og-image/${data.frontmatter.slug}.svg`;

	const seo_config = create_seo_config({
		title: data.frontmatter.title,
		description: data.frontmatter.description,
		slug: `posts/${data.frontmatter.slug}`,
		open_graph_image: og_image,
	});

	const schema = create_blog_schema(
		data.frontmatter.title,
		data.frontmatter.description,
		data.frontmatter.slug,
		data.frontmatter.date,
		data.frontmatter.updated,
		og_image,
	);
</script>

<Head {seo_config} />
<SchemaOrg {schema} />

<article class="all-prose container mx-auto max-w-3xl flex-grow px-4">
	<!-- Add the cover image at the top of the post -->
	<div class="mb-8 overflow-hidden rounded-xl shadow-xl">
		<PostCover
			title={data.frontmatter.title}
			slug={data.frontmatter.slug}
		/>
	</div>

	<h1 class="text-primary mt-12">
		{data?.frontmatter?.title || 'Untitled Post'}
	</h1>

	<!-- Rest of your post template... -->
</article>

Alternative: Without External SEO Packages

If you prefer not to use external packages like svead, you can implement the SEO metadata directly in your layout or page component:

<!-- src/routes/posts/[slug]/+page.svelte (without svead) -->
<script lang="ts">
	import PostCover from '$lib/components/PostCover.svelte';
	import { format } from 'date-fns';
	import type { PageData } from './$types';

	let { data } = $props<{ data: PageData }>();
	let Content = data.content;

	// Use the dynamic OG image endpoint for all posts
	const og_image = `/api/og-image/${data.frontmatter.slug}.svg`;
	const site_url = 'https://yourdomain.com';
	const full_image_url = `${site_url}${og_image}`;
</script>

<svelte:head>
	<title>{data.frontmatter.title}</title>
	<meta name="description" content={data.frontmatter.description} />

	<!-- Open Graph / Facebook -->
	<meta property="og:type" content="article" />
	<meta
		property="og:url"
		content={`${site_url}/posts/${data.frontmatter.slug}`}
	/>
	<meta property="og:title" content={data.frontmatter.title} />
	<meta
		property="og:description"
		content={data.frontmatter.description}
	/>
	<meta property="og:image" content={full_image_url} />

	<!-- Twitter -->
	<meta property="twitter:card" content="summary_large_image" />
	<meta
		property="twitter:url"
		content={`${site_url}/posts/${data.frontmatter.slug}`}
	/>
	<meta property="twitter:title" content={data.frontmatter.title} />
	<meta
		property="twitter:description"
		content={data.frontmatter.description}
	/>
	<meta property="twitter:image" content={full_image_url} />
</svelte:head>

<article class="all-prose container mx-auto max-w-3xl flex-grow px-4">
	<!-- Add the cover image at the top of the post -->
	<div class="mb-8 overflow-hidden rounded-xl shadow-xl">
		<PostCover
			title={data.frontmatter.title}
			slug={data.frontmatter.slug}
		/>
	</div>

	<h1 class="text-primary mt-12">
		{data?.frontmatter?.title || 'Untitled Post'}
	</h1>

	<!-- Rest of your post template... -->
</article>

This approach uses SvelteKit’s built-in <svelte:head> component to add the necessary meta tags for SEO and social sharing. It’s more verbose than using a package like svead, but it gives you complete control over your metadata without adding dependencies.

You could also create your own reusable SEO component:

<!-- src/lib/components/Seo.svelte -->
<script lang="ts">
	export let title: string;
	export let description: string;
	export let url: string;
	export let image: string;
	export let site_name = 'Your Site Name';

	const full_url = url.startsWith('http')
		? url
		: `https://yourdomain.com${url}`;
	const full_image_url = image.startsWith('http')
		? image
		: `https://yourdomain.com${image}`;
</script>

<svelte:head>
	<title>{title}</title>
	<meta name="description" content={description} />

	<!-- Open Graph / Facebook -->
	<meta property="og:type" content="article" />
	<meta property="og:url" content={full_url} />
	<meta property="og:title" content={title} />
	<meta property="og:description" content={description} />
	<meta property="og:image" content={full_image_url} />
	<meta property="og:site_name" content={site_name} />

	<!-- Twitter -->
	<meta property="twitter:card" content="summary_large_image" />
	<meta property="twitter:url" content={full_url} />
	<meta property="twitter:title" content={title} />
	<meta property="twitter:description" content={description} />
	<meta property="twitter:image" content={full_image_url} />
</svelte:head>

Then use it in your page:

<script>
	import Seo from '$lib/components/Seo.svelte';
	// ... other imports and code
</script>

<Seo
	title={data.frontmatter.title}
	description={data.frontmatter.description}
	url={`/posts/${data.frontmatter.slug}`}
	image={og_image}
/>

<!-- Rest of your component -->

This gives you the benefits of reusability without external dependencies.

Technical Benefits of Dynamic SVG Covers

This approach offers several technical advantages:

  1. Performance: SVGs are typically smaller than raster images and scale perfectly to any device
  2. Theme compatibility: By using CSS variables, the covers can adapt to your site’s theme, including dark mode
  3. Consistency: All covers follow the same design language while maintaining unique visual identities
  4. Automation: No manual image creation process is needed when publishing new content
  5. Maintainability: Design changes can be implemented across all covers by updating a single component

Extending the System

Once you have the basic system in place, there are several ways to extend it:

Dynamic Color Schemes

You can generate color schemes based on the post’s category or tags:

const get_color_scheme = (tags: string[]) => {
	if (tags.includes('performance')) {
		return {
			primary: 'oklch(65% 0.24 130)', // Green hue
			secondary: 'oklch(70% 0.18 150)',
		};
	}
	if (tags.includes('security')) {
		return {
			primary: 'oklch(65% 0.24 30)', // Red hue
			secondary: 'oklch(70% 0.18 40)',
		};
	}
	// Default blue scheme
	return {
		primary: 'oklch(65% 0.24 240)',
		secondary: 'oklch(70% 0.18 220)',
	};
};

Additional Visual Elements

You could add category icons, reading time indicators, or other metadata to the cover:

<!-- Category icon -->
{#if category === 'performance'}
	<svg x="1080" y="40" width="80" height="80">
		<path d="..." fill="var(--color-secondary)" />
	</svg>
{/if}

<!-- Reading time -->
<text
	x="60"
	y="580"
	font-size="24"
	fill="var(--color-primary-content)"
	opacity="0.8"
>
	{reading_time} min read
</text>

Animation

For the in-page component (not the OG image), you could add subtle animations to make the cover more engaging:

<style>
	@keyframes fadeIn {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}

	.pattern-element {
		animation: fadeIn 1.5s ease-out;
	}

	.title-text {
		animation: fadeIn 2s ease-out;
	}
</style>

Conclusion

Dynamic SVG cover images represent a perfect intersection of technical elegance and practical utility for SvelteKit blogs. By generating these images programmatically, you eliminate the need for external design tools while ensuring visual consistency across your content.

This approach aligns perfectly with SvelteKit’s philosophy of building efficient, maintainable web applications. The system is lightweight, performant, and adaptable to your specific design needs. Most importantly, it removes a significant friction point in the content creation process, allowing you to focus on writing great technical content rather than designing individual cover images.

By implementing this system, you’re not just solving a practical problem—you’re embracing a more systematic, programmatic approach to design that scales with your content library and adapts to your evolving brand identity.