Images

The SVG can contain multiple images using the <image> tag. The image is referenced by a full URL so it needs to be available online. Width and height are required fields.

Note that images are applied in the order they are found in the SVG file. This enables layering, with later images being applied after earlier images. A good example of this would be adding an agent image and then applying another image that turns the square agent image into a circle.

Position the image using x and y coordinates.

<image x="210" y="430" href="https://images.therealestatevoice.com.au/https://resources.cloudhi.io/images/icon-bathroom.svg" width="22" height="22"/>

A full example:

<svg width="1080" height="1080" xmlns="http://www.w3.org/2000/svg">

  <image y="920" x="80" href="https://assets.cloudhi.io/system/team-members/d71ceb53-392a-462a-a2c8-08390244dfce.jpg" width="130" height="130"/>

  <image href="https://dev.therealestatevoice.com.au/rssFeed/templates/1712051665127.Just-listed-agent-circle.png" width="1080" height="1080"/>

  <text fill="#1A3553" font-family="Source Sans Pro" font-weight="300" font-size="42" x="240" xml:space="preserve" y="970" field="agent">John Smith</text>

  <text fill="#1A3553" font-family="Source Sans Pro" font-weight="300" font-size="38" x="240" xml:space="preserve" y="1020" field="agent_phone">0404 040 040</text>

</svg>

Clipping images

You can clip an image with a path. 

Circle

For example you can clip a square image to a circle. The path needs to specify the centre of the circle and the radius:

<defs>

     <clipPath id="circleClip">

              <circle cx="135" cy="985" r="66"/>

        </clipPath>

 </defs>

 <image y="920" x="80" href="https://assets.cloudhi.io/system/team-members/d7fdd652-ec8c-4a03-b57f-c9e9f4fad07f.jpg.webp" width="130" height="130" clip-path="url(#circleClip)"/>

Rounded Rectangle

X and y represent the top left hand corner of the rectangle, rx and ry the radius of the corners.

<defs>

    <clipPath id="circleClip">

          <rect x="80" y="920" rx="30" ry="30" width="130" height="130"/>

    </clipPath>

 </defs>

 <image y="920" x="80" href="https://assets.cloudhi.io/system/team-members/d7fdd652-ec8c-4a03-b57f-c9e9f4fad07f.jpg.webp" width="130" height="130" clip-path="url(#circleClip)"/>