I have two different parts of the text which are both bolded, italized, and underlined. In Chrome the text almost all looks the same since Overlock and Open Sans aren't all that different. In the render the underline for "Someone" is a completely different size from the rest of the text.

1. output.html‎ 1.4 kB
2. output.pdf‎ 7.9 kB

In fact looking into it, in Chrome and Firefox at least changing the font to be bold doesn't change the size of the underlines at all. Is this something I am able to control to make the underline display more like in-browser?

SVG doesn't specify the thickness of text decorations, but defers to CSS2 and CSS3 Text Decorations, both of which leave the thickness UA-dependent. Indeed, Firefox shows different thicknesses for your example. If I extract the SVG and render it with Inkscape/Batik/librsvg, they all show different thicknesses as well.

If you want an unbroken line of the same thickness across the tspans, you can set the text-decoration property on a common parent (e.g. the <text> element).

(The CSS Text Decoration Module Level 4 draft does have some properties to control the position and thickness of line decorations.)

Ah yes you are right I guess I just tried bold vs not bold in FF and didn't actually open that specific output.html in FF. You are right this is mostly a Chrome behavior unfortunately. Why does getting text to look the same across platforms have to be such a nightmare *sigh*