[css-transitions-1] Replace PNG graphic with SVG version

Author: birtles

css-transitions-1/Overview.bs

@@ -141,12 +141,13 @@ Introduction {#introduction}
         For example, suppose that transitions of one second have been defined on the 'left' and
         'background-color' properties. The following diagram illustrates the effect of updating those properties on an element, in this case moving it to the right and changing the background from red to blue. This assumes other transition parameters still have their default values.
       </p>
-      <div class="figure">
-        <img src="transition1.png" alt="">
-      </div>
-      <p class="caption">
-        Transitions of 'left' and 'background-color'
-      </p>
+      <figure>
+        <img src="transition-example.svg" width="518"
+          alt="Example showing the initial, intermediate, and final states of a box whose color and position is interpolated">
+        <figcaption>
+          Transitions of 'left' and 'background-color'.
+        </figcaption>
+      </figure>
       <p>
         Transitions are a presentational effect. The <a>computed value</a> of a property transitions over time from the old value to the new value. Therefore if a script queries the <a>computed value</a> of a property (or other data depending on it) as it is transitioning, it will see an intermediate value that represents the current animated value of the property.
       </p>