title: Load SVG file on click in HTML?
body: <p>I want to load an external SVG file in an HTML page by clicking.</p>
  
  <p>Now I use a JavaScript:</p>
  
  <pre><code>&lt;script language="javascript"&gt;
    &lt;!--
    var state = 'none';
    function showhide(layer_ref) {
        if (state == 'block') {
            state = 'none';
        }
        else {
            state = 'block';
        }
        if (document.all) { //IS IE 4 or 5 (or 6 beta)
            eval( "document.all." + layer_ref + ".style.display = state");
        }
        if (document.layers) { //IS NETSCAPE 4 or below
            document.layers[layer_ref].display = state;
        }
        if (document.getElementById &amp;&amp;!document.all) {
            hza = document.getElementById(layer_ref);
            hza.style.display = state;
        }
    }
    --&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>to screen my SVG with:</p>
  
  <pre><code>&lt;a href="#1" onclick="showhide('div1');"&gt;Show/hide Alignment&lt;/a&gt;                
  &lt;div id="div1" style="display: none;" name="1"&gt;
    &lt;object type="image/svg+xml" data="1.svg"&gt;1 svg file missing&lt;/object&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This way works, but it requests that all SVG files have to be loaded even if I don't screen it.</p>
  
  <p>Is there a way load the SVG <strong>only</strong> when I click to show it?</p>