Inkscape: Textfields in SVGs are replaced by black boxes (when converted to PNG)

So I had to upload an SVG flowchart which looked great on my computer. However, when accessed from the server, certain text elements were displayed as large black boxes. This was happening only with converted PNGs of the SVG as the SVG itself rendered just fine. I initially thought that this was some kinda font issue. But apparently not. This happens because Inkscape's SVGs are not always valid and in this case, uses something called a flowRoot element which is not valid SVG. The reason why all textfields are not affected by this is because the flowRoot is created only when you create a textfield by outlining a rectangle on the screen of the preferred size.

Anyhow, the fix is to select the textfield (or select all of them if you have more than one), click on the Text menu, and then click Convert to Text. If the position of the text changes, then highlight the text (in text edit mode) and play with the alignment settings. Left align worked for me.

If you want to test if your SVG is valid, just upload your file to the W3C validator.

This was all in Inkscape 0.91 on Kubuntu LInux. Hope this helps!