Auto line-wrapping in SVG text

Text wrapping is not part of SVG1.1, the currently implemented spec. You should rather use HTML via the <foreignObject/> element.

<svg ...><switch><foreignObject x="20" y="90" width="150" height="200"><p xmlns="http://www.w3.org/1999/xhtml">Text goes here</p></foreignObject><text x="20" y="20">Your SVG viewer cannot display html.</text></switch></svg>

Here's an alternative:

<svg ...>  <switch>    <g requiredFeatures="http://www.w3.org/Graphics/SVG/feature/1.2/#TextFlow">      <textArea width="200" height="auto">       Text goes here      </textArea>    </g>    <foreignObject width="200" height="200"      requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">      <p xmlns="http://www.w3.org/1999/xhtml">Text goes here</p>    </foreignObject>    <text x="20" y="20">No automatic linewrapping.</text>  </switch></svg>

Noting that even though foreignObject may be reported as being supported with that featurestring, there's no guarantee that HTML can be displayed because that's not required by the SVG 1.1 specification. There is no featurestring for html-in-foreignobject support at the moment. However, it is still supported in many browsers, so it's likely to become required in the future, perhaps with a corresponding featurestring.

Note that the 'textArea' element in SVG Tiny 1.2 supports all the standard svg features, e.g advanced filling etc, and that you can specify either of width or height as auto, meaning that the text can flow freely in that direction. ForeignObject acts as clipping viewport.

Note: while the above example is valid SVG 1.1 content, in SVG 2 the 'requiredFeatures' attribute has been removed, which means the 'switch' element will try to render the first 'g' element regardless of having support for SVG 1.2 'textArea' elements. See SVG2 switch element spec.

The textPath may be good for some case.

<svg width="200" height="200"    xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs>  <!-- define lines for text lies on -->  <path id="path1" d="M10,30 H190 M10,60 H190 M10,90 H190 M10,120 H190"></path> </defs> <use xlink:href="#path1" x="0" y="35" stroke="blue" stroke-width="1" /> <text transform="translate(0,35)" fill="red" font-size="20">  <textPath xlink:href="#path1">This is a long long long text ......</textPath> </text></svg>