Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Score big with last-minute savings on the final tickets to FabCon Vienna. Secure your discount

Reply
player66
New Member

Custom svg import to custom visual

Hi, could anyone please show me the right way on how I can add a custom svg to visual.ts (for example interactive country map, just svg containing path for each region) and bind regions(svg paths) of this map to vanilla or custom barcharts. I have the svg file with a certain country map, which is divided to regions by paths and I want to import it to my custom visual. The behavior I want to achieve is like this: when user click on a certain svg map region, the barcharts change their view to appropriate region's data (for example show population, gdp etc.)

 

Thanks in advance!

2 REPLIES 2
Anonymous
Not applicable

I found this tutorial very helpful as I'm not very familiar with jQuery: https://blog.jongallant.com/2016/12/powerbi-custom-visual-svg-png/

v-viig
Community Champion
Community Champion

You can use jQuery to handle SVG and generate SVG DOM elements.

 

Ignat Vilesov,

Software Engineer

 

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

Helpful resources

Announcements
August Power BI Update Carousel

Power BI Monthly Update - August 2025

Check out the August 2025 Power BI update to learn about new features.

August 2025 community update carousel

Fabric Community Update - August 2025

Find out what's new and trending in the Fabric community.

Top Solution Authors