use an svg for the pronunciation guide (sveltejs#505)

Author: Rich-Harris

apps/svelte.dev/src/routes/_home/Testimonials.svelte

@@ -1,6 +1,11 @@
 <div class="outer">
 	<p class="definition">
-		<em>/ˈsvɛlt/</em>
+		<enhanced:img
+			class="pronunciation"
+			alt="Svelte pronunciation guide"
+			src="./svelte-pronunciation.svg"
+		/>
+
 		<span class="description">
 			<span class="adjective"></span> attractively thin, graceful and stylish
 		</span>
@@ -23,18 +28,23 @@
 	<div class="screenshots">
 		<a href="https://survey.stackoverflow.co/2024/technology#2-web-frameworks-and-technologies">
 			<enhanced:img
+				class="screenshot"
 				alt="Stack Overflow 2024 Developer Survey"
 				src="./stack-overflow.png?w=1200,1600"
 			></enhanced:img>
 		</a>
 
 		<a href="https://2023.stateofjs.com/en-US/libraries/front-end-frameworks/">
-			<enhanced:img alt="State of JavaScript 2023" src="./state-of-js-chart.png?w=1000,1400"
+			<enhanced:img
+				class="screenshot"
+				alt="State of JavaScript 2023"
+				src="./state-of-js-chart.png?w=1000,1400"
 			></enhanced:img>
 		</a>
 
 		<a href="https://x.com/flaviocopes/status/1730895911864189299">
-			<enhanced:img alt="Tweet from @flaviocopes" src="./flavio-light.png?w=800"></enhanced:img>
+			<enhanced:img class="screenshot" alt="Tweet from @flaviocopes" src="./flavio-light.png?w=800"
+			></enhanced:img>
 		</a>
 	</div>
 </div>
@@ -57,6 +67,13 @@
 		grid-area: definition;
 	}
 
+	.pronunciation {
+		position: relative;
+		aspect-ratio: 457.4 / 138.8;
+		height: var(--sk-font-size-h1);
+		bottom: -0.3em;
+	}
+
 	.blurb {
 		grid-area: blurb;
 	}
@@ -104,7 +121,7 @@
 			}
 		}
 
-		img {
+		.screenshot {
 			width: 100%;
 			height: auto;
 			object-fit: contain;
@@ -128,14 +145,6 @@
 
 		width: 100%;
 
-		em {
-			font-style: normal;
-			font-size: var(--sk-font-size-h1);
-			color: var(--sk-theme-1);
-			text-wrap: nowrap;
-			line-height: 1;
-		}
-
 		.description {
 			position: relative;
 			font: var(--sk-font-ui-medium);