Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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)?
like image 661
Andrew Gray Avatar asked Apr 10 '15 21:04

Andrew Gray


2 Answers

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.

like image 64
Paul LeBeau Avatar answered Nov 07 '22 22:11

Paul LeBeau


If you save the document as an "Optimised SVG" Inkscape will warn you about the flow elements that won't render in browsers.

like image 28
David Edwards Avatar answered Nov 07 '22 20:11

David Edwards