title: I want to put text in SVG (youtube logo)
body: <p>Sir, I want to put text after the svg.  the text should be in center after SVG image , by using windows paint. i try make a image exactly the way I want.
  I want to put it on my website.</p>
  
  <p>I am not good in css and html, please help me.
  For example.</p>
  
  <p><a href="https://i.stack.imgur.com/xRd1D.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xRd1D.png" alt="enter image description here"></a></p>
  
  <p>I try following code but it's not working. it put text below the SVG, which i not want.</p>
  
  <p>Sorry My English is too bad.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;style&gt;
  
  .alert {
      padding: 20px;
      background-color: #f9f6f9;
      color: black;
      opacity: 1;
      transition: opacity 0.6s;
      margin-bottom: 15px;
  }
  
  .closebtn {
      margin-left: 15px;
      color: black;
      font-weight: bold;
      float: right;
      font-size: 22px;
      line-height: 20px;
      cursor: pointer;
      transition: 0.3s;
      
  }
  
  .closebtn:hover {
      color: blue;
  }
  &lt;/style&gt;
  
  
  &lt;div class="alert"&gt;
    &lt;span class="closebtn"&gt;&amp;times;&lt;/span&gt;  
   
    
    &lt;svg     width="10%" height="10%" version="1.1" id="YouTube_Icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
    y="0px" viewbox="0 0 1024 721" enable-background="new 0 0 1024 721" xml:space="preserve"&gt;
       
       
    &lt;a href="https://www.youtube.com/vedicaim"&gt;
       
  &lt;path id="Triangle" fill="#FFFFFF" d="M407,493l276-143L407,206V493z"/&gt;
  &lt;path id="The_Sharpness" opacity="0.12" fill="#420000" enable-background="new    " d="M407,206l242,161.6l34-17.6L407,206z"/&gt;
  &lt;g id="Lozenge"&gt;
   &lt;g&gt;
    
     &lt;lineargradient id="SVGID_1_" gradientunits="userSpaceOnUse" x1="512.5" y1="719.7" x2="512.5" y2="1.2" gradienttransform="matrix(1 0 0 -1 0 721)"&gt;
     &lt;stop  offset="0" style="stop-color:#E52D27"/&gt;
     &lt;stop  offset="1" style="stop-color:#BF171D"/&gt;
    &lt;/stop&gt;&lt;/stop&gt;&lt;/lineargradient&gt;
    &lt;path fill="url(#SVGID_1_)" d="M1013,156.3c0,0-10-70.4-40.6-101.4C933.6,14.2,890,14,870.1,11.6C727.1,1.3,512.7,1.3,512.7,1.3
     h-0.4c0,0-214.4,0-357.4,10.3C135,14,91.4,14.2,52.6,54.9C22,85.9,12,156.3,12,156.3S1.8,238.9,1.8,321.6v77.5
     C1.8,481.8,12,564.4,12,564.4s10,70.4,40.6,101.4c38.9,40.7,89.9,39.4,112.6,43.7c81.7,7.8,347.3,10.3,347.3,10.3
     s214.6-0.3,357.6-10.7c20-2.4,63.5-2.6,102.3-43.3c30.6-31,40.6-101.4,40.6-101.4s10.2-82.7,10.2-165.3v-77.5
     C1023.2,238.9,1013,156.3,1013,156.3z M407,493V206l276,144L407,493z"/&gt;
   &lt;/path&gt;&lt;/g&gt;
  &lt;/g&gt;
  &lt;/path&gt;&lt;/path&gt;&lt;/a&gt;
  &lt;/svg&gt;
    
  
    &lt;strong&gt;Subscribe!&lt;/strong&gt; to our &lt;a href="https://www.youtube.com/xyz"&gt;YouTube channel&lt;/a&gt;
  
  &lt;/div&gt;
  
  &lt;script&gt;
  var close = document.getElementsByClassName("closebtn");
  var i;
  
  for (i = 0; i &lt; close.length; i++) {
      close[i].onclick = function(){
          var div = this.parentElement;
          div.style.opacity = "0";
          setTimeout(function(){ div.style.display = "none"; }, 600);
      }
  }
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>