diff --git a/packages/starlight/components/Hero.astro b/packages/starlight/components/Hero.astro
index 51be009ab46..d18dd4d9d5e 100644
--- a/packages/starlight/components/Hero.astro
+++ b/packages/starlight/components/Hero.astro
@@ -28,11 +28,13 @@ if (image) {
 		rawHtml = image.html;
 	}
 }
+const isDarkSvg = darkImage?.format === 'svg';
+const isLightSvg = lightImage?.format === 'svg';
 ---
 
 <div class="hero">
 	{
-		darkImage && (
+		darkImage && !isDarkSvg && (
 			<Image
 				src={darkImage}
 				{...imageAttrs}
@@ -40,7 +42,28 @@ if (image) {
 			/>
 		)
 	}
-	{lightImage && <Image src={lightImage} {...imageAttrs} class="dark:sl-hidden" />}
+	{
+		darkImage && isDarkSvg && (
+			<img
+				src={darkImage.src}
+				loading={imageAttrs.loading}
+				alt={imageAttrs.alt}
+				class:list={{ 'light:sl-hidden': Boolean(lightImage) }}
+			/>
+		)
+	}
+	{lightImage && !isLightSvg && <Image src={lightImage} {...imageAttrs} class="dark:sl-hidden" />}
+	{
+		lightImage && isLightSvg && (
+			<img
+				src={lightImage.src}
+				alt={imageAttrs.alt}
+				loading={imageAttrs.loading}
+				class="dark:sl-hidden"
+			/>
+		)
+	}
+
 	{rawHtml && <div class="hero-html sl-flex" set:html={rawHtml} />}
 	<div class="sl-flex stack">
 		<div class="sl-flex copy">
diff --git a/packages/starlight/components/SiteTitle.astro b/packages/starlight/components/SiteTitle.astro
index 2f4b829943e..14cf87c2d34 100644
--- a/packages/starlight/components/SiteTitle.astro
+++ b/packages/starlight/components/SiteTitle.astro
@@ -2,6 +2,7 @@
 import { logos } from 'virtual:starlight/user-images';
 import config from 'virtual:starlight/user-config';
 import type { Props } from '../props';
+import { Image } from 'astro:assets';
 const { siteTitle, siteTitleHref } = Astro.props;
 ---
 
@@ -9,22 +10,45 @@ const { siteTitle, siteTitleHref } = Astro.props;
 	{
 		config.logo && logos.dark && (
 			<>
-				<img
-					class:list={{ 'light:sl-hidden': !('src' in config.logo) }}
-					alt={config.logo.alt}
-					src={logos.dark.src}
-					width={logos.dark.width}
-					height={logos.dark.height}
-				/>
-				{/* Show light alternate if a user configure both light and dark logos. */}
-				{!('src' in config.logo) && (
+				{logos.dark.format === 'svg' ? (
 					<img
-						class="dark:sl-hidden"
+						class:list={{ 'light:sl-hidden': !('src' in config.logo) }}
 						alt={config.logo.alt}
-						src={logos.light?.src}
-						width={logos.light?.width}
-						height={logos.light?.height}
+						src={logos.dark.src}
+						width={logos.dark.width}
+						height={logos.dark.height}
 					/>
+				) : (
+					<Image
+						class:list={{ 'light:sl-hidden': !('src' in config.logo) }}
+						alt={config.logo.alt}
+						src={logos.dark}
+						width={logos.dark.width}
+						height={logos.dark.height}
+						loading="eager"
+					/>
+				)}
+				{!('src' in config.logo) && logos.light && (
+					<>
+						{logos.light.format === 'svg' ? (
+							<img
+								class="dark:sl-hidden"
+								alt={config.logo.alt}
+								src={logos.light.src}
+								width={logos.light.width}
+								height={logos.light.height}
+							/>
+						) : (
+							<Image
+								class="dark:sl-hidden"
+								alt={config.logo.alt}
+								src={logos.light}
+								width={logos.light.width}
+								height={logos.light.height}
+								loading="eager"
+							/>
+						)}
+					</>
 				)}
 			</>
 		)