Text in SVG: 2nd Attempt

Last week I attempted to convert a complex logo involving text into SVG, and failed. This was due to the fact that the logo in question used Palatino Tinotype, which is a font that seems to be completely safe because it's installed on all Windows and OSX machines. However, this is actually not an open source font, and Android phones don't come with it. The logo ended up using the default serif font for Android, which messed up the spacing and looks quite terrible.

Additionally, Chrome on Android doesn't support the CSS selector "first-letter", which I had been using to increase font sizes. I have since been able to address both of these problems. I split the "text" elements so that all first letters of increased size were in their own wrapper, which I applied a class to. Increasing the font size using this class works on all browsers. The font issue was more complex. The owner of the logo declined to pay $165 to buy Palatino Linotype, so I had to find a free alternative. After searching for a while, I came across TeX Gyre Pagella. This is a free font, and it looks extremely similar to Palatino Linotype. And so without further ado, I present the final product along with original PNG for comparison:

SVG:

Original PNG:

EDIT:

It turns out at at the time I posted this, I was STILL missing something. When SVG files are embedded, they can't have any external dependencies. This includes referencing fonts. I therefore had to convert the fonts to a data URI stream. To be entirely honest I have no idea how it works, except in concept. It takes the entire file, converts it into a special text language, and I insert that text blog into the spot that I'd put the font address. I found a very nice tool, which let me upload the font files.

One issue I now see is that the SVG file is much larger. We are talking 400KB instead of 5 or 10. This somewhat destroys a large advantage of SVG in the first place, which is the smaller file format. However, it retains the perfect sharpness at all sizes, which is worth it. I've edited the file which is previewing above, so it should look great on all devices, finally. If it doesn't on whatever you are viewing it in, please let me know!

EDIT 2:

Turns out that IE9-11 screws up the SVG if it is resized. This is because IE requires an extra attribute on the SVG element, called "viewbox". Since my SVG width is 1220 and height is 200, I have to add this: viewbox="0 0 1220 200". More information here.