svg text attributes

9.2 Simple Attributes and Properties of the text Element

The simplest form of the <text> element requires only two attributes, x and y, which define the point where the baseline of the first character of the element's content is placed.
The default style for text, as with all objects, is to have a filling black fill: black and no outline: stroke: none.
If you set the outline as well as the fill, the text looks uncomfortably thick.
If you set only the outline, you can get a fairly pleasant set of outlined glyphs, especially if you lower the stroke width.

Example 1.Text placement and outlining

<svg width="360px" height="220px" xmlns="http://www.w3.org/2000/svg">
     <path d="M 20 10 v 190 M 10 30 h 200 M 10 70 h 200 M 10 110 h 200 M 10 150 h 200 M 10 190 h 200" style="stroke:#ddd;"/>
     <text x="20" y="30">Text 1 - simplest text - default</text>
     <text x="20" y="70"  style="fill:black; stroke:none;">Text 1 - simplest text - default</text>
     <text x="20" y="110" style="stroke:black;">Text 2 - outlined and filled </text>
     <text x="20" y="110" style="fill:black; stroke:black; stroke-width:1">Text 2 - outlined and filled </text>
     <text x="20" y="150" style="fill:none; stroke:black; stroke-width:1">Text 3 - outlined only with default stroke-width</text>
     <text x="20" y="190" style="fill:none; stroke:black;  stroke-width:0.5" 3>Text 3 - outlined only with lower stroke width</text>
</svg>

Many of the other properties that apply to text are the same as they are in the Cascading Style Sheets standard.

List of the CSS properties and values (implemented in the Apache Batik viewer version 1.0:)

font-family: The value is a whitespace-separated list of font family names or generic family names. The generic family names are serif, sans-serif, and monospace.
Serif fonts have little "hooks" at the ends of the strokes; sans-serif fonts don't.
Both serif and sans-serif fonts are proportional; the width of a capital M is not the same as the width of a capital I.
A monospace font, which may or may not have serifs, is one where all the glyphs have the same width, like the letters of a typewriter.
font-size: The value is the baseline-to-baseline distance of glyphs if you were to have more than one line of text.
(In SVG, you can't have multi-line content, so the concept is somewhat abstract.)
If you use units on this attribute, as in style="font-size: 18pt", the eighteen-point size
will be converted to user units before being rendered, so it can be affected by transformations.
font-weight: The two most commonly used values of this property arecode bold and normal.
You need the normal value in case you want to place non-bold text in a group that has been set to style="font-weight: bold".
font-style: The two most commonly used values of this property are italic and normal.
text-decoration: Possible values of this property are none, underline, overline, and line-through.
word-spacing: The value of this property is a length, either in explicit units such as pt or in user units. Make this a positive number to increase the space between words, set it to normal to keep normal space, or make it negative to tighten up the space between words. The length you specify is added to the normal spacing.

Example 2. Text weight, style, decoration, and spacing attributes

<svg width="400px" height="200px" viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg">
    <g style="font-size: 18pt">
        <text x="20" y="20" style="font-weight:bold; fill:green;">bold</text>
        <text x="120" y="20" style="font-style:italic; fill:orange;">italic</text>
        <text x="20" y="60" style="text-decoration:underline; fill:blue;">under</text>
        <text x="120" y="60" style="text-decoration:overline; fill:red;">over</text>
        <text x="200" y="60" style="text-decoration:line-through; fill:aqua">through</text>
        <text x="20" y="90" style="word-spacing: 10pt; fill:blueviolet">more word space</text>
        <text x="20" y="120" style="word-spacing: -3pt;fill:coral">less word space</text>
        <text x="20" y="150" style="letter-spacing: 5pt; fill:cadetblue">wide letter space</text>
        <text x="20" y="180" style="letter-spacing: -2pt; fill:dodgerblue">narrow letter space</text>
      </g>
</svg>