Importing SVG from Inkscape and use in D3

We've already shown you how to load external SVG files in a couple of the examples from the previous chapters. In this section, we'll give a quick overview of all the steps you need to load an SVG file that we modified ourselves in Inkscape and show it using D3.

For this, we've taken an SVG image of a tiger and used Inkscape to rotate it so that it looks like this:

Now let's look at the minimal code required to import this tiger (DVD3/src/chapter-08/D08-05.html):

d3.xml('data/tiger.svg', loaded); 
 
function loaded(err, tiger) { 
    var tigerSVG = d3.select(tiger.documentElement.querySelector("g")).attr("transform", null).node(); 
    svg.append("g").node().appendChild(tigerSVG); 
} 
}; 

When we open this example in the browser, we can see our rotated tiger:

Now we can use D3 to modify the SVG.