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 开发者_JS百科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.

---

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.

---

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.

---

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.

---

Alternatively, foreignObject will allow you to include html:

<svg:foreignObject><html:body><div>text here</html:div></html:body></svg:foreignObject>

Doesn't seem to work in Opera or IE, though.