Flashing SVG Animation

Adding animation in SVG graphics is useful to bring movement to Niagara PX pages. In the simplest form, this is how to add a flashing animation to an ‘Alert’ message.

Building SVG graphics for Niagara is something we do on a regular basis. We modify existing images to suit the client's needs or we create new ones from scratch. The benefits of SVG images are numerous but in particular they are resolution-independent, which is great as you can create an image once and use it on multiple applications.

There is another advantage to using SVG images, as they are XML based and not bitmaps, once created the code is accessible and can be manipulated to suit our needs. In this case we are able to add animation to a static image. In this basic version of a label, we can make an 'Alert' image flash.

How to add the Animation

Although this demonstration is aimed at the Tridium Niagara engineers, the principle is the same for any application where SVG's can be used. We are going to build this image and export as SVG, modifying the code to allow for the example alert to Flash.

  • In you favourite SVG editting application, I use Affininty Designer, create you Alert image.

  • From the application export the files as an SVG
  • Once you have your SVG file, open the file in a text editor, I have used 'Sublime Text' which colour codes the elements within the text to help readability. (Below is the code before we modify).
  • This is the code used to add animation (Flashing).
<animate
        attributeName="visibility"
        from="visible"
        to="hidden"
        dur="1s"
        repeatCount="indefinite"/>
        </g>
  • This is the full image with the animation code added. (I have given you the code, so that you can cut and paste information, save as an SVG and use).
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 150 25" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
    <rect id="Artboard1" x="0" y="0" width="150" height="25" style="fill:none;"/>
    <clipPath id="_clip1">
        <rect id="Artboard11" serif:id="Artboard1" x="0" y="0" width="150" height="25"/>
    </clipPath>
    <g clip-path="url(#_clip1)">
        <rect x="0" y="0" width="150" height="25" style="fill:rgb(177,45,32);"/>
        <path d="M150,0L0,0L0,25L150,25L150,0ZM2,2L2,23L148,23L148,2L2,2Z" style="fill:white;"/>
        <text x="10.919px" y="16.354px" style="font-family:'Arial-Black', 'Arial Black', sans-serif;font-weight:900;font-size:12px;fill:white;">Abnormal Condition</text>
    <animate
        attributeName="visibility"
        from="visible"
        to="hidden"
        dur="1s"
        repeatCount="indefinite"/>
        </g>
</svg>
Image of the code.
  • The Flashing speed can be adjusted to suit, In the code I have set it to 1 second but this speed is irritating to have on the web, so the live version below is set to 5 sec.
Final version (5 Sec Flash)

Although this animation post has shown a simple flashing effect of an SVG, I have created a few examples of how to add rotational animation to Niagara SVG images and will be writing a post on how to add this slightly more complex process of animation in the next couple of weeks.

Richard