Using a svg file in image manipulation

Basically, I am trying to make a bot into an application called Discord, and I have a problem:

This is a bot related to war strategy games, like Hearts of Iron and Civilization.

You have a “roll” command using which you can attack a place, and depending on if you win, the place will be under your control.

Now the problem here is, that these “places” happen to be states and provinces; all of them.

I have a SVG picture with all of this data, it is 4.8mb, and has, if I remember right, around 17-18k lines of code (as XML).

Is there any way, that I could be able to use the XML picture and its paths etc with JS?
Should I do it with e.g. Canvas or something else?

The map would be shown using the “map” command

If you don’t know what Discord is:

The svg picture:

Thanks :slight_smile:

You’d have to get an SVG or XML parser for node (I don’t think it has one built in unless they added one recently). Then you could parse and manipulate the XML. What exactly do you want to do?

Its a pretty hefty file, though. You might want to break it up into smaller SVG files if you’re seeing issues with performance. Then again, as a bot I’m guessing its not going to be running this too much.

A “no thought” way to do this could be to use Puppeteer… pretty sure it pulls in all of Chromium, so you could both parse the XML, run arbitrary JS on its DOM representation, then render it out as PNG or PDF.

Seems like you could keep a pool of Puppeteer instances around with the SVG already loaded, then scale depending on how much you want to use resources idly.

Have you ever heard of war strategy games like Civilization or Hearts Of Iron (a.k.a. HOI)? I am trying to make something similar.

The “roll” command would work as the attacking command. If the attack to the area specified is succesful, will that area be given to the attacker

The map can be seen using a “map” command

Note: the “areas” are states and provinces that actually exist