Hello.

I have made a very simple SVG file (a simple rectangle). I want to access this from javascript such that I can change values in the SVG file.
I feel like I am pretty close to achieving it, but I haven't been able to do it yet, due to how SVG files from Inkscape are laid out.

The ID of the rectangle that I want to modify, is "rect1462", and this is how far I've come:

<object type="image/svg+xml" data="simple.svg" id="entiresvg">
</object>

<script type="text/javascript">
fetch('./data.json')
    .then(response => response.json())
    .then(data => {
    let fromjson = document.getElementById("fromjson");
    fromjson.innerHTML = data.gbps;

    // Wait until the entire SVG has loaded before we try to
    // access it.
    entiresvg.addEventListener("load", function() {
        // Get the DOM of the SVG-file
        let doc = entiresvg.contentDocument;
        let root = doc.rootElement;                         // This works
        let layer1 = root.getElementById("layer1");         // This works
        let rectattr = layer1.getElementById("rect1462");   // This fails because layer1.getElementById is not a function
    });
});
</script>

When I try to run this, it fails, and I don't know how to access the last object. Any ideas? Maybe this is a javascript-specific problem,
but I have been unable to move forward with this.

This might be a bit beyond my ability. I have manipulated svgs in browsers.

Are you using a browser or node ? 

Normally when an svg is loaded into an html document in a browser, all that is needed is document.getElementById

I have never attempted to manipulate the svg DOM itself, because I think although the browser is able to render the svg and access its tags, it does this indirectly via the main DOM.

Also sometimes I have found that changes to the svg code when modfied by a browser are not updated sometimes, unless the browser is forced to render the svg again.

I could be wrong - but I often use:

my_svg = document.getElementById('my_svg')

then 

my_svg.innerHTML = my_svg.innerHTML    - to make sure the svg is rendered with the changes I have made.

Also, if you are using the <object> tag, if you are testing with local files, you may run into a cross origin problem. I test on a local Apache2 at 127.0.0.1

The best tutorial I found on SVG and javascript is this one 

https://www.petercollingridge.co.uk/tutorials/svg/interactive/javascript/

The approach that worked for me was:

var svgObject = document.getElementById('svg-object').contentDocument;

I just uploaded a tiny tutorial to animate your SVG with SVG.js, within Inkscape. It's easy and powerful. You can use it to change any SVG property.

Check it out if interested: https://inkscape.org/forums/tutorials/easy-animation-of-your-svg-in-inkscape-with-svgjs/