Dynamic templates use the SVG format which in its simplest form is a straight forward text file. SVG files “describe” the image in text rather than storing the entire image as a series of pixels. SVG files however, do support the inclusion of one or more pixel based images files.
The basic anatomy of an SVG template is:
Background - a static background image
Fields, such as address or agent name that get replaced with real values when shared
Any other elements required such as text, boxes, lines, circles
Where possible you should try and create as as many elements using SVG, although you can use a background image for more complex designs.
If you are using a background for your template, then it should be uploaded into your TREV account under templates with a category of Template Backgrounds. This will make sure you background is always available and that the backgrounds won't show when you go to add them to a listing. See our article on template categories for more information.
Here is a simple example of an SVG file with a template background and an address field:
<svg width="1080" height="1080" xmlns="http://www.w3.org/2000/svg">
<image href="https://dev.therealestatevoice.com.au/usr123/templates/123456Sold.png" width="1080" height="1080"/>
<text fill="#FFFFFF" font-family="rainehorne" font-weight="300" font-size="50" x="540" xml:space="preserve" y="400" field="address" text-anchor="middle">Address</text>
</svg>
The above example contains the background image ‘Template’ (which we should start calling the background). This background has been uploaded into the dashboard:
<image href="https://dev.therealestatevoice.com.au/usr123/templates/123456Sold.png" width="1080" height="1080"/>
And a line of replaceable text:
<text fill="#FFFFFF" font-family="rainehorne" font-weight="300" font-size="50" x="540" xml:space="preserve" y="400" field="address" text-anchor="middle">Address</text>
The word 'Address' will be replaced by the actual address of the listing when it is shared. This is specified by the field="address" parameter in the text element. You can see what fields are available and how to use fields in our article on 'template fields'.