Use PNGs for component previews in README

README.md

@@ -58,14 +58,14 @@ or pseudotext.
 
 ### Components
 
-#### <img height="64" alt="" src="components/background-square.svg"> Red-Blue Gradient
+#### ![](component-previews/red-blue-gradient.png) Red-Blue Gradient
 
 A gradient pointing 45 degrees upward and to the right, starting with UW
 Red (`#c5050c`) and ending with MATC Blue (`#007db1`).
 The endpoints lie on the circle inscribed in the canvas (362.03867
 pixels away from the center in each dimension).
 
-#### <img height="64" style="background:#000;" alt="" src="components/continent-gradient.svg"> Continent (Fade)
+#### ![](component-previews/continent-fade.png) Continent (Fade)
 
 Path copied from the blue ocean background object of
 [the LIMA overview map SVG](lima-overview-map.svg).
@@ -80,14 +80,14 @@ Stroke color is a vertical gradient, with endpoints 256 pixels above and
 below the canvas center, white at the start and end, fully transparent
 between the 1/3 and 2/3 marks.
 
-#### <img height="64" style="background:#000;" alt="" src="components/continent-flat.svg"> Continent (Clip)
+#### ![](component-previews/continent-clip.png) Continent (Clip)
 
 Path copied from "continent (fade)".
 Clipped at 128 pixels above and below the canvas center.
 Path components within that range deleted.
 Solid stroke color.
 
-#### <img height="64" style="background:#000;" alt="" src="components/text.svg"> Real Text
+#### ![](component-previews/real-text.png) Real Text
 
 The text "AMRDC", font family Red Hat Display, font weight heavy (900),
 font size 256 pixels.
@@ -95,7 +95,7 @@ Centered horizontally according to font specifications, vertically
 according to its bounding box.
 Solid fill color.
 
-#### <img height="64" style="background:#000;" alt="" src="components/pseudotext.svg"> Pseudotext
+#### ![](component-previews/pseudotext.png) Pseudotext
 
 Five circles arranged horizontally, each with diameter 128 pixels,
 spacing 64 pixels.