This currently works as intended in the lastest version of Chrome, Firefox and Safari.

It currently does not work as intended in either IE or Edge

In Edge, the display: inline-block; property has a default width if not specified. Since we are trying to emulate words, we need the block-style behaviour to guarantee the letters will not break midway the word if there is no more horizontal space.

In IE9, 10 and 11. If no width or heigth is declared for the SVG element, the browser will add a default width and/or heigth - which is undesired in our situation. All other browsers will honour the viewBox apect ratio and we can control the size of the letter by only using its heigth.

Note - This setup only works when the letters (or their viewBox) have the same height.