title: Load external SVG into the DOM, current document not subdocument
body: <p>I am trying to load an external SVG document into a simple web page so that I can use it as a basic chloropeth map. However, using <code>&lt;object data=""&gt;&lt;/object&gt;</code> in the HTML results in the SVG loading as a subdocument.</p>
  
  <p>Basically I am unable to query the SVG paths by ID using jquery (ex: <code>$('#NY').css("fill", "red")</code> doesn't do anything). Obviously I can just cut and paste the actual SVG content into the HTML, but I'm curious if there is a way to get the SVG path stuff to load into the HTML document using <code>&lt;object&gt;</code> or similar.</p>
  
  <p><strong>The HTML:</strong></p>
  
  <pre><code>&lt;object data="/static/metric/img/map_US.svg" type="image/svg+xml"&gt;
  &lt;/object&gt;
  </code></pre>
  
  <p><strong>Here's a shot of the DOM using the console</strong> (notice the SVG stuff is <em>inside</em> a <code>#document</code> subdocument!):</p>
  
  <p><img src="//i.stack.imgur.com/TTSK5.png" alt="SVG Subdocument DOM"></p>