[css-grid] Remove busted old example. Upgrade hand-drawn picture to SVG.

Author: tabatkins

css-grid/Overview.bs

@@ -1871,56 +1871,6 @@ The Implicit Grid</h3>
 	(or if there is no <a>explicit grid</a>)
 	auto-placement will also cause the generation of <a>implicit grid tracks</a>.
 
-	<div class='example'>
-		Issue: This is a bad example and needs to be totally rewritten.
-		It doesn't actually use the grid-auto-* properties,
-		which is confusing;
-		the example rendering is confusing and doesn't quite match what it would actually do,
-		because the second column would just shrink to zero as well;
-		and now that auto tracks stretch by default,
-		it's <em>totally wrong</em>--
-		all the auto tracks will stretch to fill the space,
-		so columns 3 and 4 are definitely visible.
-
-		This example illustrates the sizing of <a>implicit grid tracks</a>.
-		Note that <a>grid item</a> B is positioned on <a>grid line</a> 5,
-		which automatically creates <strong>four</strong> <a>implicit grid columns</a>.
-		However, only two of them
-		(the first and the last)
-		are occupied by any <a>grid items</a>,
-		so the two empty <a>grid tracks</a>
-		collapse to zero width.
-
-		<figure class="figure">
-			<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>
-
-		<pre>
-			&lt;style>
-				#grid {
-					display: grid;
-					grid-template-columns: 20px;
-					grid-template-rows: 20px }
-				#A { grid-column: 1;          grid-row: 1; }
-				#B { grid-column: 5;          grid-row: 1 / span 2; }
-				#C { grid-column: 1 / span 2; grid-row: 2; }
-			&lt;/style>
-
-			&lt;div id="grid">
-				&lt;div id="A">A&lt;/div>
-				&lt;div id="B">B&lt;/div>
-				&lt;div id="C">C&lt;/div>
-			&lt;/div>
-		</pre>
-	</div>
-
 <!--
    ███    ██     ██ ████████  ███████        ████████ ████████     ███     ██████  ██    ██  ██████
   ██ ██   ██     ██    ██    ██     ██          ██    ██     ██   ██ ██   ██    ██ ██   ██  ██    ██
@@ -1960,7 +1910,7 @@ Implicit Track Sizing: the 'grid-auto-rows' and 'grid-auto-columns' properties</
 	receives the last specified size, and so on backwards.
 
 	<div class="example">
-		<pre>
+		<pre class="lang-html">
 			&lt;style>
 				#grid {
 					display: grid;
@@ -1984,7 +1934,7 @@ Implicit Track Sizing: the 'grid-auto-rows' and 'grid-auto-columns' properties</
 		</pre>
 
 		<figure>
-			<img src="images/auto-flow.jpg" alt="">
+		<img src="images/auto-flow.svg" alt="">
 			<figcaption>A 2&times;2 grid with one explicit 20px&times;20px grid cell
 			in the first row+column
 			and three additional cells resulting from the implicit 40px column and row