title: get undefined from document.getElementsByTagName("svg")[0]
body: <pre><code>console.log(document.getElementsByTagName("svg"));
  </code></pre>
  
  <p>I get this 
  <a href="https://i.stack.imgur.com/Xy3rO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Xy3rO.png" alt="enter image description here"></a></p>
  
  <p>but when </p>
  
  <pre><code>console.log(document.getElementsByTagName("svg")[0]);
  </code></pre>
  
  <p>I only get 
  undefined</p>
  
  <p>The svg element has been created by javascript but i don know whether it has been loaded ...</p>
  
  <p>I am sorry the code is too long but when I remove the code about image ,it works good.
  Here:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;!DOCTYPE html&gt; 
      &lt;html&gt;
      &lt;head&gt;
      &lt;script type="text/javascript"&gt;
      var svgns = "http://www.w3.org/2000/svg";
      var xlinkns = "http://www.w3.org/1999/xlink";
  
      // draw svg frame
      var drawSVG = function (width,height)
      {
          var width = 500,height = 500;
          var testsvgpic = document.createElementNS(svgns,"svg:svg");
          testsvgpic.setAttributeNS(null,"viewBox","0 0 " + width + " " +height);
          testsvgpic.setAttributeNS(null,"id","svgTemplate");
          testsvgpic.setAttributeNS(null,"width",width);
          testsvgpic.setAttributeNS(null,"height",height);
          testsvgpic.style.display = "block"; 
  
          
          document.body.appendChild(testsvgpic);
          console.log("background done!");
      }
  
      //transfor string to array
  
      // define pointsSharp 
      var pointsSharp = function()
      {
          var iconTemplate = document.createElementNS(svgns,"defs");
  
          var pathDisconnected = document.createElementNS(svgns,"path");
          pathDisconnected.setAttributeNS(null,"id","iconDisconnected");
          pathDisconnected.setAttributeNS(null,"d","M 0 0 L 10 10 M 0 10 L 10 0 z");
          pathDisconnected.setAttributeNS(null,"stroke","#808080");
          pathDisconnected.setAttributeNS(null,"stroke-width",3);
        
          iconTemplate.appendChild(pathDisconnected);
  
  //      ......  
       
          console.log(document.getElementsByTagName("svg")[0]);
          console.log(document.getElementsByTagName("svg"));
  document.documentElement.getElementsByTagName("svg").appendChild(iconTemplate);
          }
  
  
  
      &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
      &lt;div id="imgWrap"&gt;&lt;/div&gt; 
      &lt;script type="text/javascript"&gt;
      var imgUrl = 'http://c.s-microsoft.com/zh-cn/CMSImages/20150717_1-1.jpg?version=f4c9d0b8-5817-91b4-c2b8-457c92838ef4';
  
      drawSVG();
  
      //right here
      pointsSharp();
  
      &lt;/script&gt;
      &lt;/body&gt;
      &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>full code :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>        &lt;!DOCTYPE html&gt; 
          &lt;html&gt;
          &lt;head&gt;
          &lt;script type="text/javascript"&gt;
          var svgns = "http://www.w3.org/2000/svg";
          var xlinkns = "http://www.w3.org/1999/xlink";
  
      var imgReady = function (url,callback, error) {
          var width, height, intervalId, check, div,
              img = new Image(),
              body = document.body;
        
          img.src = url;
       
      // 从缓存中读取
          if (img.complete) {
              return callback(url,img.width, img.height);
          };
       
      // 通过占位提前获取图片头部数据
          if (body) {
              div = document.createElement('div');
              div.style.cssText = 'visibility:hidden;position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden';
              div.appendChild(img)
              body.appendChild(div);
              width = img.offsetWidth;
              height = img.offsetHeight;
        
              check = function () {
              if (img.offsetWidth !== width || img.offsetHeight !== height) {
                  clearInterval(intervalId);
                  callback(url,img.offsetWidth, img.clientHeight);
                  img.onload = null;
                  div.innerHTML = '';
                  div.parentNode.removeChild(div);
                  };
              };
        
              intervalId = setInterval(check, 150);
          };
       
      // 加载完毕后方式获取
          img.onload = function () {
              callback(url,img.width, img.height);
              img.onload = img.onerror = null;
              clearInterval(intervalId);
              body &amp;&amp; img.parentNode.removeChild(img);
          };
       
      // 图片加载错误
          img.onerror = function () {
              error &amp;&amp; error();
              clearInterval(intervalId);
              body &amp;&amp; img.parentNode.removeChild(img);
          };
       
      };
          // draw svg frame
          var drawSVG = function (width,height)
          {
              var width = 500,height = 500;
              var testsvgpic = document.createElementNS(svgns,"svg:svg");
              testsvgpic.setAttributeNS(null,"viewBox","0 0 " + width + " " +height);
              testsvgpic.setAttributeNS(null,"id","svgTemplate");
              testsvgpic.setAttributeNS(null,"width",width);
              testsvgpic.setAttributeNS(null,"height",height);
              testsvgpic.style.display = "block"; 
  
              
              var bg =  document.createElementNS(svgns,"image");
              bg.setAttributeNS(xlinkns,"href",imgUrl);
              bg.setAttributeNS(null,"id","bg");
              bg.setAttributeNS(null,"x",0);
              bg.setAttributeNS(null,"y",0);
              bg.setAttributeNS(null,"height",height);
              bg.setAttributeNS(null,"width",width);
              bg.setAttributeNS(null,"visibility", "visible");
        
              testsvgpic.appendChild(bg);
              document.body.appendChild(testsvgpic);
              console.log("background done!");
  
          }
  
          //transfor string to array
  
          // define pointsSharp 
          var pointsSharp = function()
          {
              var iconTemplate = document.createElementNS(svgns,"defs");
  
              var pathDisconnected = document.createElementNS(svgns,"path");
              pathDisconnected.setAttributeNS(null,"id","iconDisconnected");
              pathDisconnected.setAttributeNS(null,"d","M 0 0 L 10 10 M 0 10 L 10 0 z");
              pathDisconnected.setAttributeNS(null,"stroke","#808080");
              pathDisconnected.setAttributeNS(null,"stroke-width",3);
            
              iconTemplate.appendChild(pathDisconnected);
  
      //      ......  
           
              console.log(document.getElementsByTagName("svg")[0]);
              console.log(document.getElementsByTagName("svg"));
  
      //here I want to add to   the svg but failed
              document.documentElement.getElementsByTagName("svg").appendChild(iconTemplate);
              }
  
  
  
          &lt;/script&gt;
          &lt;/head&gt;
          &lt;body&gt;
          &lt;div id="imgWrap"&gt;&lt;/div&gt; 
          &lt;script type="text/javascript"&gt;
          var imgUrl = 'http://c.s-microsoft.com/zh-cn/CMSImages/20150717_1-1.jpg?version=f4c9d0b8-5817-91b4-c2b8-457c92838ef4';
  
          imgReady(imgUrl,drawSVG,function () {alert('Img Error!');});
  
          // get wrong here
          pointsSharp();
  
          &lt;/script&gt;
          &lt;/body&gt;
          &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>