Using text in templates :

Text position

The text is positioned using absolute coordinates according to the size of the template.

X and Y are pixel positions with the origin of 0,0 at the top left of the template.

You can start, finish or centre the text at the x,y coordinates using the text-anchor attribute. End is similar to right justified text:

text-anchor=”start”

text-anchor=”middle”

text-anchor=”end”

So to position text in the middle of a square template near the top, use something like this:

<text fill="#ffffff" x="540" y="100" field="address" font-family="Meta Pro" font-weight="800" font-size="48" text-anchor="middle">$address$</text>

Font and size

The size of the text is determined by font-size. At the moment this needs to be supplied and there is no “fit text” ability in SVG. Really long text may run over if the font size is too big.

The font-family specifies which font to use for the text.

Use this link to see the fonts currently available:

https://images.therealestatevoice.com.au/fonts

Text effects

You can add a drop shadow or rotate text using the SVG file format here are some examples:

Drop shadow

Drop shadows are good and help when you want to put text over the image so the text can be seen.

Angled text

Here is an example of angling text at 30 degrees:

<text fill="#1A3553" font-size="98" font-weight="500" font-family="Harcourts Script" x="60" xml:space="preserve" y="970" field="address" text-anchor="start" alignment-baseline="middle" transform="rotate(-30)">Richard</text>

Letter spacing

You can control font spacing using the following, minus values will bring the letters closer together:

<text fill="#FFFFFF" font-family="Source Sans Pro" font-weight="900" font-size="62" x="800" xml:space="preserve" y="250" text-anchor="middle" letter-spacing="-2">LISTED</text>

Example without letter spacing:

With letter spacing = -10

How can we help you today?