Update positioning in lifecycle diagram

[skirtles-code]

Closes #1077.

I've reworked the entire SVG but at first glance it should appear almost the same as it was before. I've nudged various things around by a pixel or two to try to make sizes and spacing a little more consistent but most of that won't be obvious unless you directly compare the old and new images. The file size is significantly smaller, though that wasn't a priority.

I've tested on Chrome, Firefox, Edge and Safari across a range of platforms and I'm not aware of any remaining problems or inconsistencies. dominant-baseline is probably the feature of most concern as it's a relatively new addition. While it does work fine in all of the browsers I tested, it didn't work in some non-browser image viewers I tried. This may cause the text to be positioned a few pixels too high. I don't expect this to be an issue in the docs.

The more notable visual changes are:

• The text should no longer overlap, as reported in Lifecycle Diagram:'createApp' and'mount' are overwritten, very ugly #1077. Previously, each piece of differently-coloured text was using its own absolutely-positioned element, positioned by its top-left corner. If the fonts weren't exactly the size that was expected that could cause the text to overlap, or leave an unwanted gap. It now only absolutely positions the wrapping element and that is positioned by its midpoint.
• The text inside the orange diamond is now spread over 3 lines rather than 2.
• The line breaks in when app.mount() is called are now in slightly different places.

Apart from the line breaks I haven't changed the wording.

Some technical notes on my changes. These may be of interest to anyone looking to edit the code in future:

• I've tried to order the elements so they go from top to bottom. Some exceptions have to be made to ensure the arrows are behind other content. Generally I've tried to group arrows with the content that precedes them. In many cases that was what the previous version of the code was doing anyway.
• Dashed lines are now implemented using stroke-dasharray rather than drawing individual dashes.
• The line-height for text that spans multiple lines is now consistently 18.5px. Most of the text was using that anyway but it should now be applied everywhere.
• Safari doesn't seem to support inheritance for dominant-baseline, so I've had to include that on every <text> and <tspan> element to achieve the correct vertical alignment,
• Safari also doesn't properly support the transform-origin attribute. I originally used that for the 2 red, diagonal arrows as it made it easier to position them with an integer translation. Instead, I've used a few decimal places to get the desired positioning.

[NataliaTepluhina]

Thanks @skirtles-code! Checked on Chrome and Safari, looks great to me 👍🏻