Search code examples
svgcompatibility

What are browser-friendly alternatives for the flow* elements generated by Inkscape?

On a project I'm working on, I've got some views that use maps generated by Inkscape. However, we've ran into some slight problems...specifically, some of the maps do not render text, at all.

After some research into this issue here on StackOverflow, I discovered there's some good reasons for this:

  1. Inkscape generates SVG 1.1 documents, not SVG 1.2 documents, despite including flowRoot, flowRegion, and flowPara elements. I updated my maps to be version 1.2 documents, but it didn't help.
  2. I read that those flow* elements, being part of the SVG 1.2 standard, aren't actually implemented in most browsers, because SVG 1.2 was never accepted by anyone. This explains why no amount of cajoling caused the text on our maps to appear.
  3. It's generally recommended that if your SVG is going to be viewed in a browser, to use <text> instead of <flowPara>

This revealed a deeper problem that I couldn't find the answers to from a Google search: Inkscape is filling the documents with other crap that it can render (flowRoot and flowRegion, respectively), but IE/Chrome has no implementation for.

Questions:

  1. What widely-implemented SVG tag makes a good replacement for flowRoot?
  2. What widely-implemented SVG tag makes a good replacement for flowRegion?
  3. If no such alternatives exist, is there some easy way, or even a general heuristic, on how best to modify the SVG document to be fully viewable on a modern browser (IE11 or Chrome)?
Solution

  • In Inkscape, select the flowed text object(s). Go to the Text menu, and select "Convert to text".

    The flowed text elements will now be plain <text> elements and will display properly in the browser.