Geek Answers Handbook

How to display multiline text in SVG 1.1?

I would like to take a multi-line block of text and display it in SVG. I would like to save the strings as strings. Is there any way to do this?

I use Inkscape for my base drawing and Batik for my rendering. It seems that the two disagree on how to do this.

Inkscape creates this structure:

<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 unacceptable to Batik for some reason.

+4
source share
4 answers

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

A simple solution for you is to edit your svg document and change the SVG version attribute to 1.2. Inkscape will not change it to 1.1 and will do an excellent job with the version 1.2 specifier.

Batik will then be happy to provide most of the functionality, however, you will also encounter another Inkscape error if you make significant use of any of the text attributes in the stream root created by Inkscape. It sets the background color for the selected foreground color for the text, which means that if you set the text color to red in Inkscape, when the batik displays it, you will see a red square ... there is text, but its red color too, so in fact not visible. This is an Inkscape error and is clearly visible in the code for the streamRegion → rect element.

The solution is to manually edit the flowRect attributes after setting them using inkscape.

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

+5
source

This is unacceptable because the elements of the stream * are non-standard elements. It comes from a draft SVG1.2, which has never been adopted, and is intended to transfer text to custom forms. This only supports Inkscape and some Opera builds. Therefore, do not use it, at least for now.

If you don’t need text wrapping (and it doesn’t seem to you, but I don’t understand what you mean by “I would like to save lines as strings”), I suggest you use the base <text/> .

+4
source

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

+2
source

Alternatively, foreignObject will allow you to enable html:

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

It doesn't seem to work in Opera or IE.

+1
source

More articles:


All Articles