There are more properties associated with the text element than any other. Many are concerned with achieving good results when the text is non-European requiring a different writing direction from left-to-right and even bi-directional text (in Hebrew, for example, the writing direction is normally right-to-left but embedded European words are written left-to-right).
The properties are a superset of the ones defined in CSS.
The diagram below shows some of the properties that are primarily concerned with how individual characters are rendered.
The font-family property defines the font to be used for the text. The font-size property defines the size of the characters using one of the SVG unit measures.
The font-style property has the values normal, italic and oblique.
The font-weight property defines the boldness of the rendering and has the same set of possible values as those used in CSS. Similarly, the text-decoration property has the same possible values as those used in CSS.
Text is rendered in a similar way to paths and both the interior fill of the characters and the stroke to be used for the outline can be specified by the fill and stroke properties.
One of the most useful properties associated with the whole text string is the text-anchor property which specifies where in the text string the text origin is located. This is particularly useful when trying to centre text, say, within a rectangle. In this case defining the origin at the middle position in the x-direction and defining the value as middle will achieve the desired result.
Simple formulae can be rendered using the baseline-shift property. The example in the diagram below requires the following:
<text x="10" y="240" style="fill:blue" >x <tspan style="baseline-shift:super">super</tspan> +y <tspan style="baseline-shift:sub">sub</tspan> +1 </text>
The writing-mode property defines the direction that the text is drawn. The possible values are lr, tb, and rl.
Defining font-size in SVG can be achieved by font-size="50". However, if you are defining font-size as a property (style="font-size:50px", say) CSS has the rather fussy view that unless the value is zero you have to specify the coordinates even when there is no unit to specify. Early browsers and plug-ins were quite happy to accept style="font-size:50" but as the influence of CSS increases, you are probably wise to scatter px over your unit-less quantities to ensure the browser accepts your property value.
So far this has not extended to other values in SVG but note that transform is destined to be a CSS property in which case you will need to think about transform: translate(100px,150px). If SVG paths ever become a styling property, it is possible that:
<path d="M0,0L.5.5.8.2Z" />
will have to be written something like:
d: M 0, 0 L 0.5px, 0.5px L 0.8px, 0.2px Z
making most SVG documents and their stylesheets nearly 3 times longer in length. Hopefully, this move of SVG content into CSS will never happen.