[css-grid] Rewrite the image in SVG and add some more details.

Author: tabatkins

css-grid/Overview.bs

@@ -1788,17 +1788,18 @@ The Implicit Grid</h2>
 		collapse to zero width.
 
 		<figure class="figure">
-				<img alt="" src="images/implicit-columns-and-rows.png" />
-
-			<figcaption>A Grid with an implicit row and four implicit columns, two of which are zero-sized.</figcaption>
+			<img alt="" src="images/implicit-columns-and-rows.svg">
+
+			<figcaption>
+				A Grid with an implicit row and four implicit columns, two of which are zero-sized.
+				The black grid lines are from the <a>explicit grid</a>,
+				the gray grid lines are from the <a>implicit grid</a>.
+				The numbers indicate the line indexes.
+			</figcaption>
 		</figure>
 
-		Issue: Rewrite this image to
-		(a) make the placement of the zero-sized tracks more obvious,
-		and (b) show the explicit vs implicit lines.
-
 		<pre>
-			&lt;style type="text/css">
+			&lt;style>
 				#grid {
 					display: grid;
 					grid-template-columns: 20px;