# Using a svg file in image manipulation
**URL:** https://forum.kirupa.com/t/using-a-svg-file-in-image-manipulation/641809
**Category:** programming
**Created:** [February 16, 2020, 7:03pm UTC](https://forum.kirupa.com/t/using-a-svg-file-in-image-manipulation/641809 "2020-02-16T19:03:24Z")
**Posts on this page:** 4
**Page:** 1
### Author:  [@Pyrde\_Pavkki](https://forum.kirupa.com/u/Pyrde_Pavkki)
#### Post date: [February 16, 2020, 7:03pm UTC](https://forum.kirupa.com/t/using-a-svg-file-in-image-manipulation/641809/1 "2020-02-16T19:03:24Z")
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: [https://discord.gg](https://discord.gg)
The svg picture: [https://upload.wikimedia.org/wikipedia/commons/d/d9/Blank\_Map\_World\_Secondary\_Political\_Divisions.svg](https://upload.wikimedia.org/wikipedia/commons/d/d9/Blank_Map_World_Secondary_Political_Divisions.svg)
Thanks 🙂
---
### Author:  [@senocular](https://forum.kirupa.com/u/senocular)
#### Post date: [February 16, 2020, 10:43pm UTC](https://forum.kirupa.com/t/using-a-svg-file-in-image-manipulation/641809/2 "2020-02-16T22:43:01Z")
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.
---
### Author:  [@krilnon](https://forum.kirupa.com/u/krilnon)
#### Post date: [February 17, 2020, 12:45am UTC](https://forum.kirupa.com/t/using-a-svg-file-in-image-manipulation/641809/3 "2020-02-17T00:45:32Z")
> [@senocular](#):
>
> 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).
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.
> [@senocular](#):
>
> 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.
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.
---
### Author:  [@Pyrde\_Pavkki](https://forum.kirupa.com/u/Pyrde_Pavkki)
#### Post date: [February 17, 2020, 5:25am UTC](https://forum.kirupa.com/t/using-a-svg-file-in-image-manipulation/641809/4 "2020-02-17T05:25:12Z")
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