TODO: docs maybe??

see https://discord.com/channels/1388415325036609617/1458088018232479824/1484195713347879012

cmd/pkgserver/ui/static/failure-closed.svg

@@ -1,12 +1,6 @@
 <?xml version="1.0"?>
-<!-- See failure-closed.svg for an explanation for the view box dimensions. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="20" viewBox="-20 -20 160 130">
-<svg xmlns="http://www.w3.org/2000/svg" width="20" viewBox="-20,-20 160 130">
     <polygon points="0,0 100,50 0,100" fill="red" stroke="red" stroke-width="15" stroke-linejoin="round"/>
-    <!--
+    <line x1="10" y1="30" x2="50" y2="70" stroke="white" stroke-width="16"/>
-     ! y-coordinates go before x-coordinates to highlight the difference (or,
+    <line x1="50" y1="30" x2="10" y2="70" stroke="white" stroke-width="16"/>
-     ! lack thereof) between these numbers and the ones in failure-open.svg; try
-     ! a textual diff. Make sure to keep the numbers in sync!
-     -->
-    <line y1="30" x1="10" y2="70" x2="50" stroke="white" stroke-width="16"/>
-    <line y1="30" x1="50" y2="70" x2="10" stroke="white" stroke-width="16"/>
 </svg>

cmd/pkgserver/ui/static/failure-open.svg

@@ -1,32 +1,5 @@
 <?xml version="1.0"?>
-<!--
+<svg xmlns="http://www.w3.org/2000/svg" width="20" viewBox="-20 -20 160 130">
- ! This view box is a bit weird: the strokes assume they're working in a view
- ! box that spans from the (0,0) to (100,100), and indeed that is convenient
- ! conceptualizing the strokes, but the stroke itself has a considerable width
- ! that gets clipped by restrictive view box dimensions. Hence, the view is
- ! shifted from (0,0)–(100,100) to (-20,-20)–(120,120), to make room for the
- ! clipped stroke, while leaving behind an illusion of working in a view box
- ! spanning from (0,0) to (100,100).
- !
- ! However, the resulting SVG is too close to the summary text, and CSS
- ! properties to add padding do not seem to work with `content:` (likely because
- ! they're anonymous replaced elements); thus, the width of the view is
- ! increased considerably to provide padding in the SVG itself, while leaving
- ! the strokes oblivious.
- !
- ! It gets worse: the summary text isn't vertically aligned with the icon! As
- ! a flexbox cannot be used in a summary to align the marker with the text, the
- ! simplest and most effective solution is to reduce the height of the view box
- ! from 140 to 130, thereby removing some of the bottom padding present.
- !
- ! All six SVGs use the same view box (and indeed, they refer to this comment)
- ! so that they all appear to be the same size and position relative to each
- ! other on the DOM—indeed, the view box dimensions, alongside the width,
- ! directly control their placement on the DOM.
- !
- ! TL;DR: CSS is janky, overflow is weird, and SVG is awesome!
- -->
-<svg xmlns="http://www.w3.org/2000/svg" width="20" viewBox="-20,-20 160 130">
     <polygon points="0,0 100,0 50,100" fill="red" stroke="red" stroke-width="15" stroke-linejoin="round"/>
     <line x1="30" y1="10" x2="70" y2="50" stroke="white" stroke-width="16"/>
     <line x1="30" y1="50" x2="70" y2="10" stroke="white" stroke-width="16"/>

cmd/pkgserver/ui/static/skip-closed.svg

@@ -1,5 +1,5 @@
 <?xml version="1.0"?>
-<svg xmlns="http://www.w3.org/2000/svg" width="12" viewBox="0,0 100 100" fill="blue">
+<svg xmlns="http://www.w3.org/2000/svg" width="12" viewBox="0 0 100 100" fill="blue">
     <rect x="10" width="20" height="100" rx="4"/>
     <rect x="70" width="20" height="100" rx="4"/>
 </svg>

cmd/pkgserver/ui/static/skip-open.svg

@@ -1,5 +1,5 @@
 <?xml version="1.0"?>
-<svg xmlns="http://www.w3.org/2000/svg" width="12" viewBox="0,0 100 100" fill="blue">
+<svg xmlns="http://www.w3.org/2000/svg" width="12" viewBox="0 0 100 100" fill="blue">
     <rect y="10" width="100" height="20" rx="4"/>
     <rect y="70" width="100" height="20" rx="4"/>
 </svg>

cmd/pkgserver/ui/static/success-closed.svg

@@ -1,5 +1,4 @@
 <?xml version="1.0"?>
-<!-- See failure-closed.svg for an explanation for the view box dimensions. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="20" viewBox="-20 -20 160 130">
-<svg xmlns="http://www.w3.org/2000/svg" width="20" viewBox="-20,-20 160 130">
     <polygon points="0,0 100,50 0,100" fill="none" stroke="black" stroke-width="15" stroke-linejoin="round"/>
 </svg>

cmd/pkgserver/ui/static/success-open.svg

@@ -1,5 +1,4 @@
 <?xml version="1.0"?>
-<!-- See failure-closed.svg for an explanation for the view box dimensions. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="20" viewBox="-20 -20 160 130">
-<svg xmlns="http://www.w3.org/2000/svg" width="20" viewBox="-20,-20 160 130">
     <polygon points="0,0 100,0 50,100" fill="none" stroke="black" stroke-width="15" stroke-linejoin="round"/>
 </svg>