[css-sizing][css-writing-modes] Convert ASCII diagrams to SVG.

css-writing-modes-3/Overview.bs

@@ -1577,39 +1577,11 @@ Flow-relative Directions</h3>
 
   <div class="example">
     <p>An English (LTR-TB) block:</p>
-    <pre class="ascii-art">
-                  &lt;---- width / inline-size ---&gt;
-
-                             top side/
-                          block-start side
-                  +------------------------------+                  A
-      left side/  |   ---inline direction --->   |  right side/     |
-inline-start side |  |                           |  inline-end side |
-                  |  | block      * horizontal * |                height/
-                  |  | direction  *writing mode* |              block-size
-                  |  V                           |                  |
-                  +------------------------------+                  V
-                             bottom side/
-                            block-end side
-    </pre>
+    <img src="diagrams/sizing-ltr-tb.svg">
   </div>
   <div class="example">
     <p>A vertical Japanese block (TTB-RL):</p>
-    <pre class="ascii-art">
-                  &lt;---- width / block-size ---&gt;
-
-                             top side/
-                         inline-start side
-                  +------------------------------+                  A
-      left side/  |    &lt;---block direction---    |  right side/     |
-  block-end side  |                           |  | block-start side |
-                  |  *  vertical  *     inline|  |                height/
-                  |  *writing mode*  direction|  |              inline-size
-                  |                           V  |                  |
-                  +------------------------------+                  V
-                            bottom side/
-                           inline-end side
-    </pre>
+    <img src="diagrams/sizing-ttb-rl.svg">
   </div>
 
 <h3 id="line-directions">

css-writing-modes-4/Overview.bs

@@ -1652,39 +1652,11 @@ Flow-relative Directions</h3>
 
   <div class="example">
     <p>An English (LTR-TB) block:</p>
-    <pre class="ascii-art">
-                  &lt;---- width / inline-size ---&gt;
-
-                             top side/
-                          block-start side
-                  +------------------------------+                  A
-      left side/  |   ---inline direction --->   |  right side/     |
-inline-start side |  |                           |  inline-end side |
-                  |  | block      * horizontal * |                height/
-                  |  | direction  *writing mode* |              block-size
-                  |  V                           |                  |
-                  +------------------------------+                  V
-                             bottom side/
-                            block-end side
-    </pre>
+    <img src="diagrams/sizing-ltr-tb.svg">
   </div>
   <div class="example">
     <p>A vertical Japanese block (TTB-RL):</p>
-    <pre class="ascii-art">
-                  &lt;---- width / block-size ---&gt;
-
-                             top side/
-                         inline-start side
-                  +------------------------------+                  A
-      left side/  |    &lt;---block direction---    |  right side/     |
-  block-end side  |                           |  | block-start side |
-                  |  *  vertical  *     inline|  |                height/
-                  |  *writing mode*  direction|  |              inline-size
-                  |                           V  |                  |
-                  +------------------------------+                  V
-                            bottom side/
-                           inline-end side
-    </pre>
+    <img src="diagrams/sizing-ttb-rl.svg">
   </div>
 
 <h3 id="line-directions">