diff --git a/css-images-4/Overview.bs b/css-images-4/Overview.bs
index 159cad903ed..f92fa7be6f0 100644
--- a/css-images-4/Overview.bs
+++ b/css-images-4/Overview.bs
@@ -2036,7 +2036,7 @@ Color Stop “Fixup”</h4>
 		giving red 1 share and green 2 shares of the 300px remaining
 		after subtracting blue's 100px from the 400px total.
 
-		<img src="images/stripes-example-33-1.png" style="height:1em; width:400px;" alt="example 1">
+		<img src="images/stripes1.svg" style="height:1em; width:400px;" alt="">
 
 		On the other hand,
 		''stripes(red .1fr, green .2fr, blue 100px)''
@@ -2049,7 +2049,7 @@ Color Stop “Fixup”</h4>
 		which is then distributed in the 1:2 ratio
 		dictated by the <<flex>> values.
 
-		<img src="images/example33-2.png" style="height: 1em; width:400px;" alt="example 2">
+		<img src="images/stripes2.svg" style="height:1em; width:400px;" alt="">
 
 		(This is similar to how [=flex layout=] deals with small <<flex>> sums on a line,
 		and ensures smoothly continuous behavior
diff --git a/css-images-4/images/example33-2.png b/css-images-4/images/example33-2.png
deleted file mode 100644
index d47328f1c17..00000000000
Binary files a/css-images-4/images/example33-2.png and /dev/null differ
diff --git a/css-images-4/images/stripes-example-33-1.png b/css-images-4/images/stripes-example-33-1.png
deleted file mode 100644
index f471932ad78..00000000000
Binary files a/css-images-4/images/stripes-example-33-1.png and /dev/null differ
diff --git a/css-images-4/images/stripes1.svg b/css-images-4/images/stripes1.svg
new file mode 100644
index 00000000000..ef480028767
--- /dev/null
+++ b/css-images-4/images/stripes1.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="400" height="16">
+	<rect width="100" height="100%" fill="red" />
+	<rect x="100" width="200" height="100%" fill="green" />
+	<rect x="300" width="100" height="100%" fill="blue" />
+</svg>
\ No newline at end of file
diff --git a/css-images-4/images/stripes2.svg b/css-images-4/images/stripes2.svg
new file mode 100644
index 00000000000..6ccdba40336
--- /dev/null
+++ b/css-images-4/images/stripes2.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="400" height="16">
+	<defs>
+		<pattern patternUnits="userSpaceOnUse" width="2" height="2" patternTransform="scale(5)" id="checkerboard" preserveAspectRatio="xMidYMid">
+			<path style="stroke:none;fill:#00000032;" d="M0 0h1v1h-1zM1 1h1v1h-1z"/>
+			<path style="stroke:none;fill:#00000016;" d="M1 0h1v1h-1zM0 1h1v1h-1z"/>
+		</pattern>
+	</defs>
+	<rect width="30" height="100%" fill="red" />
+	<rect x="30" width="60" height="100%" fill="green" />
+	<rect x="90" width="100" height="100%" fill="blue" />
+	<rect x="190" width="210" height="100%" fill="url(#checkerboard)" />
+	<text x="295" y="13" font-size="14" fill="currentColor" text-anchor="middle">transparent</text>
+</svg>
\ No newline at end of file