SVG 1.2 flowed text is complicted: 11 elements:
Partially implemented by Batik and Inkscape
Rely on CSS Exclusions and CSS Shapes:
Shapes defined by SVG elements.
<def> <circle id="mycircle" cx="150" cy="150" r="125"/> </def> <text x="100" y="100" font-size="18px" text-align="justified" line-height="125%" wrap-margin="25" shape-inside="url(#mycircle)">This is a mockup of...</text>
<text x="100" y="100" font-size="18px" text-align="justified" line-height="125%" wrap-margin="25" shape-inside="url(#mycircle),url(#mysqare)">This is a mockup of...</text>
Note: The way I have specified the flow regions conflicts with CSS. I am told the correct way to do this is with CSS Regions. That seems overly kill for our needs.
<text x="100" y="100" font-size="18px" text-align="justified" line-height="125%" wrap-margin="25" shape-inside="url(#mycircle)" shape-outside="url(#mycircle1),url(#mycircle2)">This is a mockup of...</text>
SVG doesn't have <br/> and <p>/</p>; rely on CSS Text 3 properties:
white-space
Additional properties of interest:
Note: 'x' and 'y' are ignored when flowing text but can serve as a fallback for SVG 1.1 renders.
A simple proposal for defining a rectanglular wrapping context using the width/height, top/right/left attributes.