Add images to embedded content introduction's examples

[zcorpan]

• Images illustrating screen size, pixel density, orientation,
  viewport-based selection, and art direction.
• New raster images are public domain, attributed in acks.
• Change the president example to a wolf to reuse that image.
• Rewrap.

[zcorpan]

The SVGs are not DRY, but the shapes are really simple, and it seems good to have them be self-contained. Though I suppose they could use <g> and transform and maybe <use>?

The SVGs have no accessibility stuff yet. They are all redundant with the text above them, technically, but I'm not sure if they should have role="presentation" or role="img" plus something else.

[zcorpan]

The SVGs have no accessibility stuff yet. They are all redundant with the text above them, technically, but I'm not sure if they should have role="presentation" or role="img" plus something else.

Went with role="img" and aria-label, like the #abstract image. Tested with VO.

[zcorpan]

@doomdavve Thanks, fixed. alignment-baseline seems to not really work reliably in browsers, it seems, or maybe I'm doing something wrong? The text isn't vertically centered.

[doomdavve]

@zcorpan I got the properties mixed up in a previous round: dominant-baseline=middle is probably close to what you need in this context, alignment-baseline is for children like tspan aligning with a text parent. (Seems to be interoperability issues hiding here...) Thanks for the patience!

[doomdavve]

Now I see http://stackoverflow.com/questions/12250403/vertical-alignment-of-text-element-in-svg has a note about IE not supporting dominant-baseline.

[doomdavve]

And no further comments. Seems like a great improvement!

(It itches a little to draw the tablet as a single path and get consistent inner rounding and no gaps as I get in Blink based browsers, but illustration-wise I think it's fine as it is).

[zcorpan]

Thanks! I changed to dominant-baseline and increased the width of the line slightly (I know). :)