Today I've been spending a bit of time trying to manipulate SVGs with D3 (and jQuery). My goal is being able to access/modify local SVGs through JavaScript. Doesn't matter if it's tailored to D3 but that would be extra points.

It seems the solution that works for other people isn't working for me, which has the following JavaScript:

window.onload=function() {
    // Get the Object by ID
    var a = document.getElementById("svgObject");
    // Get the SVG document inside the Object tag
    var svgDoc = a.contentDocument;
    // Get one of the SVG items by ID;
    var svgItem = svgDoc.getElementById("svgItem");
    // Set the colour to something else
    svgItem.setAttribute("fill", "lime");
};

with this HTML object

<object id="svgObject" data="img/svgfile.svg" type="image/svg+xml" height="50" width="50"></object>

and separate SVG file

<svg height="40px" width="40px" xmlns="" viewBox="0 0 800 800">
    <rect id="svgItem" width="800" height="800" fill="red"></rect>
    <circle cx="400" cy="400" r="400" fill="blue"></circle>
</svg>

all found here. It's a simplified version of the code found in this example. My JavaScript code is shown below, straight up out of my editor:

window.onload = function() {
    var checkObject = document.getElementById("checkers"); 
    var checkDoc = checkObject.contentDocument;

    var cheese = checkDoc.getElementById('layer1');
    console.log(cheese);
};

In case it changes anything, my script is loaded at the bottom of the HTML's body. Below is my only HTML element.

<object data="check.svg" type="image/svg+xml" width="100" id="checkers"></object>

and my SVG file (just a gray check, feel free to use).

<svg id="svg2" xmlns:rdf="" xmlns="" viewBox="0 0 100 100" version="1.1" xmlns:cc="" xmlns:dc=".1/">
    <g id="layer1" transform="translate(0,-952.36217)">
        <path id="rawCheck" fill="#dbdbdb" d="m18.75,1004.5,21.607,21.607,40.893-40.893-7.8571-7.8572-33.036,33.036-13.75-14.107z" stroke-opacity="0"/>
    </g>
</svg>

My issue es from calling .contentDocument on checkObject, which should just be calling .contentDocument on the object element but I get this mess:

Uncaught SecurityError: Failed to read the 'contentDocument' property from 'HTMLObjectElement': Blocked a frame with origin "null" from accessing a frame with origin "null". Protocols, domains, and ports must match.

Except it was all angry red color. This confused me, because as far as I can see, my code is pretty close to a copy of the working example, yet here I am.

I have also tried the d3.xml() seen in this question's answer and received the following error

XMLHttpRequest cannot load file:///home/user/Documents/examples/d3/check.svg. Cross origin requests are only supported for HTTP.

as well as

Uncaught NetworkError: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file:///home/user/Documents/examples/d3/check.svg'

If you'd like to see more details on my d3.xml() attempt I'm happy to update this question, I just thought there were a lot of code blocks already.

Today I've been spending a bit of time trying to manipulate SVGs with D3 (and jQuery). My goal is being able to access/modify local SVGs through JavaScript. Doesn't matter if it's tailored to D3 but that would be extra points.

It seems the solution that works for other people isn't working for me, which has the following JavaScript:

window.onload=function() {
    // Get the Object by ID
    var a = document.getElementById("svgObject");
    // Get the SVG document inside the Object tag
    var svgDoc = a.contentDocument;
    // Get one of the SVG items by ID;
    var svgItem = svgDoc.getElementById("svgItem");
    // Set the colour to something else
    svgItem.setAttribute("fill", "lime");
};

with this HTML object

<object id="svgObject" data="img/svgfile.svg" type="image/svg+xml" height="50" width="50"></object>

and separate SVG file

<svg height="40px" width="40px" xmlns="http://www.w3/2000/svg" viewBox="0 0 800 800">
    <rect id="svgItem" width="800" height="800" fill="red"></rect>
    <circle cx="400" cy="400" r="400" fill="blue"></circle>
</svg>

all found here. It's a simplified version of the code found in this example. My JavaScript code is shown below, straight up out of my editor:

window.onload = function() {
    var checkObject = document.getElementById("checkers"); 
    var checkDoc = checkObject.contentDocument;

    var cheese = checkDoc.getElementById('layer1');
    console.log(cheese);
};

In case it changes anything, my script is loaded at the bottom of the HTML's body. Below is my only HTML element.

<object data="check.svg" type="image/svg+xml" width="100" id="checkers"></object>

and my SVG file (just a gray check, feel free to use).

<svg id="svg2" xmlns:rdf="http://www.w3/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3/2000/svg" viewBox="0 0 100 100" version="1.1" xmlns:cc="http://creativemons/ns#" xmlns:dc="http://purl/dc/elements/1.1/">
    <g id="layer1" transform="translate(0,-952.36217)">
        <path id="rawCheck" fill="#dbdbdb" d="m18.75,1004.5,21.607,21.607,40.893-40.893-7.8571-7.8572-33.036,33.036-13.75-14.107z" stroke-opacity="0"/>
    </g>
</svg>

My issue es from calling .contentDocument on checkObject, which should just be calling .contentDocument on the object element but I get this mess:

Uncaught SecurityError: Failed to read the 'contentDocument' property from 'HTMLObjectElement': Blocked a frame with origin "null" from accessing a frame with origin "null". Protocols, domains, and ports must match.

Except it was all angry red color. This confused me, because as far as I can see, my code is pretty close to a copy of the working example, yet here I am.

I have also tried the d3.xml() seen in this question's answer and received the following error

XMLHttpRequest cannot load file:///home/user/Documents/examples/d3/check.svg. Cross origin requests are only supported for HTTP.

as well as

Uncaught NetworkError: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file:///home/user/Documents/examples/d3/check.svg'

If you'd like to see more details on my d3.xml() attempt I'm happy to update this question, I just thought there were a lot of code blocks already.

• javascript
• jquery
• html
• svg
• d3.js

• You will need to run this from a local server. XMLHttpRequest is not allowed for files running of you local file system. – Alexander O'Mara Commented Jul 9, 2014 at 3:05
• Yep, Alexander you're right, thank you very much. This solved both issues. If you post as an answer I'll accept it. – aidankmcl Commented Jul 9, 2014 at 14:28
• I have a similar situation using the vivus.js script and I am running on server and I have set the document domain up properly. – Ryan Coolwebs Commented Mar 17, 2015 at 0:09

1 Answer 1

In Chrome, it is not possible to access an external SVG's contents via JavaScript when the page is opened through the file system (i.e. the URL has the file:// protocol).

To get around this, you can open it through a local server. Alternately, you can disable the Same-Origin Policy web security feature for testing using --disable-web-security mand line argument.

Firefox and probably some other browsers at one point did not have this limitation but that appears to no longer be the case. For security, modern browser generally restrict programmatic access to local file data.