Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to properly display multiline text in SVG 1.1?

I would like to take a multiline block of text and display it in SVG. I would like to keep the lines as lines. Is there a proper way to do this?

I am using Inkscape for my base drawing and Batik for my rendering. It seems the two do not agree on how to do this.

Inkscape is creating a structure like this:

<flowRoot
       xml:space="preserve"
       id="flowRoot3089"
       style="font-size:16px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
       transform="translate(19.71875,334.88681)">
   <flowRegion id="flowRegion3091">
        <rect id="rect3093" width="50.78125" height="75" x="34.765625" y="155.89932"/>
   </flowRegion>

    <flowPara id="flowPara3123">Item 1</flowPara>
    <flowPara id="flowPara3137">Item 2</flowPara>
    <flowPara id="flowPara3139">Item 3</flowPara>
</flowRoot>

However, this is not acceptable to Batik for some reason.

like image 885
JeffV Avatar asked Oct 13 '10 14:10

JeffV


1 Answers

Inkscape sets the SVG version of the document to 1.1 instead of 1.2, but still uses flowing text.

The simple solution for you is to edit your svg document and change the SVG version attribute to 1.2. Inkscape will not change it back to 1.1 and it handles the 1.2 version specifier fine.

Batik will then be happy to provide most functionality, however you'll also run into another Inkscape bug if you mess with pretty much any of the text attributes within the flow root that Inkscape creates. It sets the background color to the selected foreground color for the text, which means if you set the text color to red in Inkscape, when batik renders it, you'll see a red square ... the text is there, but its red too, so not really visible. This an Inkscape bug and is clearly visible in the code for the flowRegion -> rect element.

The solution is to manually edit your flowRect attributes after tweaking them with inkscape.

Batik also seems to do better if you use the standard svg output rather than inkscape svg output.

like image 62
David Avatar answered Dec 06 '22 00:12

David