How to use an interactive SVG using bootstrap 5 + Flask

Question

I wish to use an SVG i created using Inkscape in a flask project. The SVG should be user interactive and to respond to the user, have functionality to change Bootstrap classes on event (if possible) but I have exhausted all research I could afford and still have not found an answer.

I wont mind using javascript (even though it would greatly slow down my work since my javascript ain't that great) although any module that could potentially ease my work will be greatly appreciated.

Unfortunately, I cannot release my source code publicly at the moment.

Answer 1

So beside that i will show you how easy you cann create a eventlisterner (in your case click) looks like think if you able to handle flask you shouldunterstand this easy

Answer 2

As i said here a basic example how to use javascript to change class or more specific how make a element clickable
I comment all steps and show how you csn change a single attribute too.
Eventlistener can be added to all html elements btw.
As i said before, learn javascript is highly recommend for webdevelopment, in case that javascript is included in so many different software ( android apps, backends and so on) you will get a huge advantage with js in your skillset.
And if you work with flask, mean you have basic knowledge of coding so it wouldnt take a lot time to learn a other language.
Sure Js can be confusing sometime and some codearchitectuere can be a mess but you wont cross js manytimes, believe me 🙂

https://code.sololearn.com/WWYq1BevnJB8/?ref=app

If you have any other question feel free to ask
Happy coding 😉✌️

Answer 3

Mhm wrap your svg in a <a> and set the href to your function i would say but without js knowledge that would be a bit kind of flying blind 😉

Answer 4

S3R43o3 thank you so much... I'll try this tomorrow