[RbnJrg]

Congratulations Granny! Very good and perfectly clear all explanations; nothing to add them But in order to your issues to "vertical-align" images, you can get perfect results by setting "percentages" (positives or negatives) as a value for the property. For example:

.svgInline {
   vertical-align: -0.1%;
   height: 1.10em;
}

You also could try with "vertical-align: text-bottom" instead of "vertical-align: bottom" but in the case you presented practically is the same. Also could be a very good idea to use "pixels" as measurement:

.svgInline {
   vertical-align: -5px; /* values also can be positives */
   height: 1.10em;
}

But regarding the tutorial you made, just one word: perfect!

Regards
Rubén