title: How to format svg icons size
body: <p>I am trying to understand how SVG icon works.I have a "font awesome" icon and I want to replace it with a SVG icon. I studied that font awesome icon and svg automatically adjust their resolution and size. But when I put the svg icon the icon becomes really big. Kindly guide me. </p>
  
  <p>Image with font-awesome icons:</p>
  
  <p><a href="https://i.stack.imgur.com/MEIlv.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MEIlv.jpg" alt="enter image description here"></a></p>
  
  <pre><code> &lt;div class="animated flipInY col-lg-3 col-md-3 col-sm-6 col-xs-12"&gt;
       &lt;div class="tile-stats"&gt;
           &lt;div class="icon"&gt;&lt;i class="fa fa-sort-amount-desc"&gt;&lt;/i&gt;
           &lt;/div&gt;
       &lt;div id = "topbar3" class="count"&gt;&lt;/div&gt;
       &lt;h3&gt;Occupancy Sq Ft&lt;/h3&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Now I want to replace it with SVG Icon:</p>
  
  <p><strong>Code:</strong> </p>
  
  <pre><code>&lt;div class="animated flipInY col-lg-3 col-md-3 col-sm-6 col-xs-12"&gt;
      &lt;div class="tile-stats"&gt;
      // SVG File
      &lt;svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         viewBox="0 0 1024 1024" style="enable-background:new 0 0 1024 1024;" xml:space="preserve"&gt;
      &lt;path d="M912,865V188H765v-47.9c3,1.5,7.7,1.5,12.3,1.5c15.5,0,29.4-4.6,38.7-13.9c6.2-6.2,9.3-15.5,9.3-26.3
        c0-10.8-4.7-20.1-10.9-26.3c-7.7-7.7-20.1-10.7-35.6-10.7c-13.9,0-23.2-0.3-31,1.7h1.2v122H636v677H436V416h-83.5l-43.1-125h-20.1
        l-41.6,125H171v449H3v161h1017V865H912z M293.9,329.4c1.5-7.7,4.6-15.5,6.2-23.2c1.5,7.7,3.1,15.4,6.2,23.2l10.8,35.6h-35.6
        L293.9,329.4z M264.7,416l12.2-38h43.4l13.7,38H264.7z M763,78.1c3-1.5,7.9-1.5,15.6-1.5c17,0,29.5,7.7,29.5,24.8
        c0,17-11,26.3-31.1,26.3c-6.2,0-11.1,0-14.1-1.5V78.1z"/&gt;
      &lt;/svg&gt;
      &lt;div id = "topbar3" class="count"&gt;&lt;/div&gt;
      &lt;h3&gt;Occupancy Sq Ft&lt;/h3&gt;
       &lt;/div&gt;
       &lt;/div&gt;
  </code></pre>
  
  <p><strong>Output:</strong>
  <a href="https://i.stack.imgur.com/HgLXN.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HgLXN.jpg" alt="enter image description here"></a></p>
  
  <p>I wanted the image to be small size just like the image initial image. but it has become huge. Kindly guide me.  </p>