[css-align] Swap out the hand-drawn images for SVG.

--HG--
extra : rebase_source : ab787c1a1c0e2bbef5a981876fbfe1b960e4be93

Author: tabatkins

css-align/Overview.html

@@ -10,7 +10,7 @@
   <link rel="stylesheet" type="text/css" href="http://www.w3.org/StyleSheets/TR/W3C-[STATUS].css">
   <style type="text/css">
     .issue th:first-child { text-align: left !important; }  
-    [rowspan] > img { max-height: 4em; float: right; }  
+    [rowspan] > img { float: right; }  
     [rowspan] { vertical-align: middle; }
     small { display: block; }
   </style>
@@ -166,7 +166,7 @@ <h2 id="overview">
   <tbody>
     <tr><th>'justify-content'
         <td>inline
-        <td rowspan=2><img src="content-target.jpg" alt="">content within element <small>(effectively adjusts padding)</small>
+        <td rowspan=2><img src="images/content-example.svg" width=106 height=106 alt="">content within element <small>(effectively adjusts padding)</small>
         <td>block containers and flex containers
     <tr><th>'align-content'
         <td>stacking
@@ -175,7 +175,7 @@ <h2 id="overview">
   <tbody>
     <tr><th>'justify-self'
         <td>inline
-        <td rowspan=2><img src="self-target.jpg" alt=""> element within parent <small>(effectively adjusts margins)</small>
+        <td rowspan=2><img src="images/self-example.svg" width=106 height=106 alt=""> element within parent <small>(effectively adjusts margins)</small>
         <td>block-level elements and grid items
     <tr><th>'align-self'
         <td>stacking
@@ -184,7 +184,7 @@ <h2 id="overview">
   <tbody>
     <tr><th>'justify-items'
         <td>inline
-        <td rowspan=2><img src="child-target.jpg" alt=""> items inside element <small>(controls child items&rsquo; ''align/justify-self: auto'')</small>
+        <td rowspan=2><img src="images/items-example.svg" width=106 height=106 alt=""> items inside element <small>(controls child items&rsquo; ''align/justify-self: auto'')</small>
         <td>grid containers
     <tr><th>'align-items'
         <td>stacking
@@ -499,7 +499,7 @@ <h2 id='content-distribution'>
   <p>The 'justify-content' and 'align-content' properties control alignment of the box's content within the box.
 
   <div class="figure">
-    <p><img alt="Diagram showing that the alignment of the content within the element is affected." src="content-target.jpg">
+    <p><img alt="Diagram showing that the alignment of the content within the element is affected." src="images/content-example.svg" width=212 height=212>
   </div>
 
   <table class=propdef>
@@ -649,7 +649,7 @@ <h2 id='self-alignment'>
     The 'justify-self' and 'align-self' properties control alignment of the box within its containing block.
 
   <div class="figure">
-    <p><img alt="Diagram showing that the alignment of the element within its containing block is affected." src="self-target.jpg">
+    <p><img alt="Diagram showing that the alignment of the element within its containing block is affected." src="images/self-example.svg" width=212 height=212>
   </div>
 
 <h3 id='justify-self-property'>
@@ -931,7 +931,7 @@ <h2 id='default-alignment'>
     The 'align-items' and 'justify-items' properties set the default 'align-self' and 'justify-self' behavior of the items contained by the element.
 
   <div class="figure">
-    <p><img alt="Diagram showing that the alignment of grid items within the element is affected." src="child-target.jpg">
+    <p><img alt="Diagram showing that the alignment of grid items within the element is affected." src="images/items-example.svg" width=212 height=212>
   </div>
 
 <h3 id='justify-items-property'>