Question: I want to be able to import SVG files from the file system, layer them, change their fill colors, and then export them as a single vector file.

Answer: 
The solution to this problem was simply to import the SVG data as a string, swap out constants for various properties, and then write the new string to the file system.

For example, the following svg displays an orange circle:

```html
<svg viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg">
  <circle cx="500" cy="500" r="500" fill="orange"/>
</svg>

```

If you wanted to be able to dynamically change the color of the circle, you could just replace the "orange" text with a placeholder name, such as "{FILL\_COLOR}". Now, the SVG should look like this:

```html
<svg viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg">
  <circle cx="500" cy="500" r="500" fill="{FILL_COLOR}"/>
</svg>

```

In your code, you can load the file from the file system as a string and then make changes to it as needed; you could then write the result to the file system. This solution also works perfectly on frontends. Instead of loading the SVG from the file system, simply have it as a hard-coded constant. Once you make the changes to the SVG, you can use the result however you want.

```js
function getCircle(color) {
  const svg = `<svg viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg"><circle cx="500" cy="500" r="500" fill="{FILL_COLOR}"/></svg>`;
  return svg.replace('{FILL_COLOR}', color);
}

```
The best source to refer would be their official docs: <https://svgjs.dev/docs/3.0/getting-started/>

The next in the line source would be stack-overflow's search by svg.js tag: <https://stackoverflow.com/questions/tagged/svg.js>

Now a quick intro from my side.

SVG.JS lets you work very extensively with SVGs. You can import an SVG into your code and start manipulating it. You can change color, size and even add events and animations.

However before you start working with SVGs, you should make sure that the SVG is compressed using some online tool like this: <https://jakearchibald.github.io/svgomg/> and after compressions you should edit your SVG file by adding class selectors within your SVG for paths (regions) so that you can select these paths from your JS code. Example of SVG from one of the projects where I used this technique (trimmed for the sake of simplicity):

```
<svg id="svg-map" class="svg-map" version="1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 363 624">
  <path class="svg-path-1" fill="#FFFFFF" stroke="#FFFFFF" stroke-miterlimit="10" d="M114 ... 24 42z"/>
  <path class="svg-path-2" fill="#FFFFFF" stroke="#FFFFFF" stroke-miterlimit="10" d="M114 ... 24 42z"/>
  <path class="svg-path-3" fill="#FFFFFF" stroke="#FFFFFF" stroke-miterlimit="10" d="M114 ... 24 42z"/>
</svg>

```

You can save your SVG in some folder and render it using the image tag on your HTML page.

Install in your project (Example using NodeJS):

```
npm install svg.js

```

Then import this library into your JS code like this:

```
import { SVG } from '@svgdotjs/svg.js'

```

And now you can select the SVG from your page using the code like this:

```
let mapContainer = SVG.select('.some-svg-class');
let myMapObject = mapContainer.first();

```

And set the viewport:

```
myMapObject.viewbox(0, 0, 500, 700);

```

Now you can loop across all the paths (regions) of the map and perform some manipulation like this:

```
let svgRegionPaths = myMapObject.select('path');
svgRegionPaths.each(function(i, children) {
  this.opacity(0.7);
});

```

This is just an example. You can do a lot more with this library. I haven't shown the example of selecting paths by class selectors but I hope you get the idea.

I was able to pair this with React and make it work more in line with my coding style and requirements for the application.