CODEWITHSUNDEEP
htmlcsssvgiconsfont-awesome
Unbreakable
Unbreakable

Reputation: 8084

How to format svg icons size

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.

Image with font-awesome icons:

enter image description here

 <div class="animated flipInY col-lg-3 col-md-3 col-sm-6 col-xs-12">
     <div class="tile-stats">
         <div class="icon"><i class="fa fa-sort-amount-desc"></i>
         </div>
     <div id = "topbar3" class="count"></div>
     <h3>Occupancy Sq Ft</h3>
</div>

Now I want to replace it with SVG Icon:

Code: 

<div class="animated flipInY col-lg-3 col-md-3 col-sm-6 col-xs-12">
    <div class="tile-stats">
    // SVG File
    <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">
    <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"/>
    </svg>
    <div id = "topbar3" class="count"></div>
    <h3>Occupancy Sq Ft</h3>
     </div>
     </div>

Output: enter image description here

I wanted the image to be small size just like the image initial image. but it has become huge. Kindly guide me.

Upvotes: 2

Views: 24243

Answers (1)

Paulie_D
Paulie_D

Reputation: 114991

You have to apply a size to the SVG or it will keep expanding until it reaches the edge of it's parent container.

svg {
  height: 48px;
  margin: 0 2em;
  fill: darkorange;
}
<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">
  <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" />
</svg>

Upvotes: 7

Related Questions