Home

Animated Navigation buttons in powerbi with SVG

Creating SVG Powered Navigation Buttons in PowerBI

Written by

James Mounsey-Moran

in

Not every SVG needs to be used as a measure in Power BI. In some cases, it makes more sense to take a simpler approach and use .SVG files directly. This is especially helpful when working with buttons in Power BI, which currently do not support imageURL (like we would use in the new card visuals, for example) and instead only allow image input. Hopefully this blog post helps you with creating SVG powered navigation buttons in PowerBI.

Thankfully, those image options give us all we need to make buttons more dynamic. You can use animated SVG icons or even animate the entire button if needed.

Power BI buttons let you define multiple visual states, including Default, Hover, Selected etc. Each state can be customised with different settings for Text, Icon, Fill, and Border. Both Icon and Fill accept image files.

SVG files can contain coded information, which means you can embed animation directly into them. You just need to make sure the .SVG file is correctly structured and works as expected inside Power BI.

A useful tool for testing and previewing SVG files is https://www.svgviewer.dev.

Icon Example

This example uses the Icon section of the button visual. Here, we apply an animated SVG that responds to the button state, such as when a user hovers over it.

Creating the SVG

For this example, I am creating a simple arrow that moves up and down when the button is hovered over. We need two versions of the SVG. One will be static for the default state. The other will contain the animation for the hover state.

Note: Make sure to include the namespace in your SVG. This is required for it to render correctly in Power BI.

Static

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg 
   xmlns="http://www.w3.org/2000/svg"
width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
  <line x1="6" y1="18" x2="18" y2="6" />
  <polyline points="10 6 18 6 18 14" />
</svg>

Hover

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg 
   xmlns="http://www.w3.org/2000/svg"
width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
  <g>
    <animateTransform
      attributeName="transform"
      type="translate"
      values="0 0; 1 -1; 2 -2; 3 -3; 4 -4; 0 0"
      keyTimes="0; 0.1; 0.25; 0.45; 0.8; 1"
      dur="2s"
      repeatCount="indefinite"
    />
    <line x1="6" y1="18" x2="18" y2="6" />
    <polyline points="10 6 18 6 18 14" />
  </g>
</svg>

Copy the code up to https://www.svgviewer.dev/ to preview, from here you can also download the .svg file as well which makes things nice and simple!

Into PowerBI, Insert a new blank button, select the button to format at and under Style / Icon, choose Icon Type – Custom

Next we need to apply the two image files, one for the default status and the other for hover

Default

  • Under Style Apply Settings to: Firstly make the state as Default
  • Next, go back to the Icon section and apply the static SVG. I set the image fit as normal
  • Tweak the placement as required using alignment and padding ( I used left horizontal alignment, middle vertical, with padding of 10 on the left and 7 at the bottom.
  • I then set the icon size at 40, but against this can be tweaked as required

Hover

  • This time under Style Apply Settings to: Switch to Hover
  • Back Under Icon, apply the animated svg. And set the image fit the same as your default setting (especially if using a similar icon for each)
  • If using the same icon like I have in this example ensure your placement and size matches the default settings
  • In my example I also added an extra border around the button, feel free to experiment and see what you like best!

Fill Example

This example instead uses the Fill option of the button visual. Again, we apply an animated SVG that responds to the button state, such as when a user hovers over it but this time instead of affecting an icon, we can affect the button itself.

Creating the SVG

For this example, a wave animation down the left hand side of the button that appears once hovered over. Unlike the icon example, we only need one SVG file this time as our default state for this example is just a solid fill background (just make sure your background matches the colour we are adding for the svg)

Note: Make sure to include the namespace in your SVG. This is required for it to render correctly in Power BI.

Hover

<svg xmlns="http://www.w3.org/2000/svg" width="259" height="74" viewBox="0 0 259 74">
  <style>
    .wave-accent {
      fill: #6bfad8;
      animation: waveMove 4s linear infinite;
    }

    @keyframes waveMove {
      0% { transform: translateY(0); }
      100% { transform: translateY(-160px); }
    }
  </style>
  <rect x="0" y="0" width="259" height="74" rx="6" ry="6" fill="#292929" />
  <defs>
    <clipPath id="waveClip">
      <rect x="0" y="0" width="25" height="74" />
    </clipPath>
  </defs>
  <g clip-path="url(#waveClip)">
    <g class="wave-accent">
      <path d="M12.5,0 q10,10 0,20 -10,10 0,20 10,10 0,20 -10,10 0,20 10,10 0,20 -10,10 0,20 10,10 0,20 -10,10 0,20 H0 V0 Z" />
      <path d="M12.5,160 q10,10 0,20 -10,10 0,20 10,10 0,20 -10,10 0,20 10,10 0,20 -10,10 0,20 10,10 0,20 -10,10 0,20 H0 V160 Z" />
    </g>
  </g>
</svg>

Copy the code up to https://www.svgviewer.dev/ to preview and download the .SVG file.

Note this time, we have added the width and height in various parts of the code. This needs to match up with your size of the button in PowerBI to ensure if fills the whole area

Into PowerBI, Insert a new blank button, select the button to format at and under Style / Icon, choose Icon Type – Custom

Next we need to apply the single image file for the hover status

Default

  • Under Style Apply Settings to: Ensure we are set on Default
  • Ensure the fill colour is set to exactly the same colour being used within your button
  • You may want to tweak the positioning of the text on your button, I applied middle horizontal and vertical alignment and then moved it around with padding

Hover

  • Under Style Apply Settings to: Switch to Hover
  • Under Fill, browse and apply the animated svg. In this instance I’ve set the Image Fit just as Normal

And that now should be it! You should have two different types of animated navigation buttons, you can apply the actions you need them to do down in the button settings and you are sorted!

Please play around experiment with different types and shapes and of course share!

Thanks for reading!

More posts