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

Find everything you need to get certified on Fabric—skills challenges, live sessions, exam prep, role guidance, and more. Get started

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!

Not applicable

I found this tutorial very helpful as I'm not very familiar with jQuery:

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

Helpful resources

July 2024 Power BI Update

Power BI Monthly Update - July 2024

Check out the July 2024 Power BI update to learn about new features.

July Newsletter

Fabric Community Update - July 2024

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

Top Solution Authors
Top Kudoed Authors