External SVG + D3 II

this example uses d3 to manipulate paths inside of an svg loaded from an external file.

the image is the famous Ghostscript Tiger.svg

hat tip to @ocampesato for introducing me to the SVG Tiger

this exmaple is based on earlier research for the bl.ock Sporthorse Foal Registrations II. I've found this technique useful again recently, and thought it deserved a few examples of its own.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>External SVG + D3</title>
    <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <style>

/* Make the chart container fill the page using CSS. */
      #chart {
        position: fixed;
        left: 0px;
        right: 0px;
        top: 0px;
        bottom: 0px;
      }
    </style>
  </head>
  <body>

// load the external svg from a file
      d3.xml("Ghostscript_Tiger.svg", "image/svg+xml", function(xml) {
      var importedNode = document.importNode(xml.documentElement, true);
      d3.select("div#vis")
        .each(function() {
          this.appendChild(importedNode);
        })
        // inside of our d3.xml callback, call another function
        // that styles individual paths inside of our imported svg
        styleImportedSVG()
      });

https://d3js.org/d3.v3.min.js