How to properly display multiline text in SVG 1.1?

Question

Hi,

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.

Answer 1

This is not acceptable since flow* elements are non-standard elements. It comes from an SVG1.2 draft that has never been accepted and it is designed to wrap text in custom shapes. Only Inkscape and some builds of Opera support it. So, don't use it, at least for the moment.

If you don't need text wrapping (and you don't seem to, but I don't understand what you mean by "I would like to keep the lines as lines"), I suggest you use the basic <text/> element.

Answer 2

I'd suggest <text> with <tspan> children. Inkscape can generate that for you quite easily, just don't click and drag an area but instead just click where you want the text and start writing, press return where you want a new line.