A full treatment of SVG is beyond the scope of this book. However, every SVG graphic must start with the text defined in the __header variable. In addition, every SVG graphic must end with the text defined in the __footer variable. SVG, like other XML, consists of a series of code tags that begin with a tag such as <tag> that must be matched with a corresponding ending tag, </tag>.
The __shapeText variable defines the actual heart graphic. Within the __shapeText string, the first element is the g tag. This is the grouping element within the SVG specification. This means that all the elements within the g tag should be treated as a group. The next tag is a circle. These circle tags define the top of the heart. The next tag, path, draws a triangle that starts at the bottom of the circles and forms the bottom point of the heart. The next tag, animateTransform, is what performs the animation. The type of transform being performed is a scale transform (bigger and smaller) and this is specified in the type property. The initial scale is provided in the from property. The transition scale is provided in the to property. The duration of the animation is provided in the dur property and is set to 1s (zero seconds). Thus, to make the heart beat faster or slower, simply adjust the dur property. A repeatCount property of indefinite means that the animation will continually repeat. Then, we end the g tag.
Now, we can simply concatenate our __header, __shapeText, and __footer together to return the full SVG image. However, since SVG code is just text, we must tell Power BI to treat the text that's returned by the BeatingHeart measure as a web graphic. This is the reason we need to set the Data category for the measure to an Image Url.