Inline SVG doesn't scale

Question

I'm trying to animate some vector graphics. Therefore I need to use svg inline or use something like https://github.com/jonathantneal/svg4everybody for external embedding in IE. So my HTML looks like this currently:

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  <symbol id="chart" viewBox="0 0 1042 1024"><!-- SVG CODE --></symbol>
</svg>

<svg role="img" class="icon" width="200" height="200">
  <use xlink:href="#chart"></use>
</svg>

http://codepen.io/anon/pen/LEWjvX

But as you might see the SVG is pretty small, although I used width both in the HTML and CSS (not sure if I need both?). It just doesn't scale. According to many articles I read about this problem (like this one http://css-tricks.com/svg-symbol-good-choice-icons/ or http://css-tricks.com/scale-svg/) it should work that way. What am I doing wrong?

FYI: I used icomoon to create the SVG sprite and Illustrator to create the SVGs. To animate the SVG I gave most of the paths a class name, if that makes any difference.

Answer 1

Try this; change the viewBox of the symbol to be closer to size it was designed in. I did a quick look for the outer dimensions of the paths, then assumed 100x100.

<symbol id="compass" viewBox="0 0 100 100">

CodePen: http://codepen.io/rfornal-ssi/pen/GgWMvZ

I only adjusted one part, assuming that you can more forward with the rest of the code from this point.

UPDATE: Based on testing by the OP, we learned that add viewBox to the <svg> tag itself is not needed since <symbol> tags are used.

Answer 2

I'm not sure I understand clearly what's the problem you're asking for help so I'll try to answer a maximum I saw in your snippet.

• If you can't see the chart, I think it's more because of the default fill color being black, than because of the size. If you add fill: #FFF into your #wrapper's css or in an appropriate svg{} statement, you'll see it clearly.

• If your compass is so small, I think it's because your drawn pathes only are 50px large in a 1024x1024 document. (You're setting a viewBox="0 0 1024 1024" to your <symbol> element but setting it to something like 0 0 50 50 will help if you want to use transformations later, or even better, redraw it in a document where they fit right).

• You say that you want to animate those graphics. There are actually a lot of ways to do so. You can look to CSS animations (via a style sheet) or SMIL (directly in the inline svg) or via javascript (by modifying directly the attributes as noticed in Nicholas Kyriakides answer). Look at the examples in the snippet below.

var scale = 1;
window.onload = function(){
document.getElementById('p').addEventListener('click', function(){document.getElementById('linked').setAttribute('transform', 'scale('+(scale+=.1)+')');}, false);
document.getElementById('m').addEventListener('click', function(){document.getElementById('linked').setAttribute('transform', 'scale('+(scale-=.1)+')');}, false);
};

.icon {
 width: 400px;
 height: 200px;
 }
.wrapper {
 background: black;
 width: 80%;
 max-width: 400px;
 margin: 0 auto;
 color:#fff;
 fill: #fff;
 }
text {
 cursor: pointer;
 }
.icon:hover{
 cursor: pointer;
 }
.icon:hover .chart{
 fill: #FAF;
 -webkit-animation: color 5s;
 animation: color 5s forwards alternate;
 }
@-webkit-keyframes color{ 
  0%{ fill : #FFF;}
  10%{ fill : #508694;}
  50%{fill: #FBB03B;}
  90%{ fill : #D19B6F;}
  100%{ fill : #FFF;}
  }
@keyframes color{ 
  0%{ fill : #FFF;}
  10%{ fill : #508694;}
  50%{fill: #FBB03B;}
  90%{ fill : #D19B6F;}
  100%{ fill : #FFF;}
  }

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
 <symbol id="chart" viewBox="0 0 1042 1024">
  <path class="chart" d="M893.78 455.769h145.017v568.231h-145.017v-568.231z"  />
  <path class="chart" d="M671.815 0h145.017v1024h-145.017v-1024z"  />
  <path class="chart bar3" d="M446.89 624.462h145.017v396.578h-145.017v-396.578z"  />
  <path class="chart" d="M224.925 227.884h145.017v796.116h-145.017v-796.116z"  />
  <path class="chart" d="M0 71.029h145.017v952.971h-145.017v-952.971z"  />
 </symbol>
 <symbol id="compass" viewBox="0 0 46.6 46.6">
  <path class="compas__outer" fill="#FFFFFF" d="M22.7,0C10.2,0,0,10.2,0,22.7c0,12.5,10.2,22.7,22.7,22.7   c12.5,0,22.7-10.2,22.7-22.7C45.4,10.2,35.3,0,22.7,0L22.7,0z M22.7,42.9c-11.1,0-20.1-9-20.1-20.1c0-11.1,9-20.1,20.1-20.1   c11.1,0,20.1,9,20.1,20.1C42.9,33.8,33.8,42.9,22.7,42.9L22.7,42.9z M22.7,42.9"/>
  <path class="compass__needle" fill="#FFFFFF" d="M24.7,20.7C24,20,23,19.7,22,19.9l1.5-1.5l-12-6.9l6.9,12l1.5-1.5   c-0.2,0.9,0,2,0.8,2.7c0.7,0.7,1.8,1,2.7,0.8L21.9,27l12,6.9l-6.9-12l-1.5,1.5C25.7,22.5,25.5,21.4,24.7,20.7L24.7,20.7z    M21.8,23.6c-0.5-0.5-0.5-1.3,0-1.8c0.5-0.5,1.3-0.5,1.8,0c0.5,0.5,0.5,1.3,0,1.8C23.1,24.1,22.3,24.1,21.8,23.6L21.8,23.6z    M31.9,31.9l-8.7-5.1l3.7-3.7L31.9,31.9z M31.9,31.9">
   <animateTransform attributeName="transform" begin="0s" dur="2s" type="rotate" from="0 22.7 22.7" to="360 22.7 22.7" repeatCount="indefinite" />
  </path>
 </symbol>
 <symbol id="linked-in" viewBox="0 0 1070 1024">
  <path d="M241.778 1024v-689.778h-227.556v689.778h227.556zM128 238.222c78.222 0 128-53.333 128-120.889s-46.222-117.333-128-117.333c-78.222 0-128 49.778-128 120.889 0 64 49.778 117.333 128 117.333v0 0zM369.778 1024c0 0 3.556-625.778 0-689.778h227.556v99.556c28.444-46.222 85.333-117.333 209.778-117.333 149.333 0 263.111 99.556 263.111 309.333v394.667h-227.556v-366.222c0-92.444-32-156.444-117.333-156.444-64 0-99.556 42.667-117.333 85.333-7.111 14.222-7.111 35.556-7.111 56.889v384h-231.111z" fill="#FFF"/>
 </symbol>
</svg>

<div class="wrapper">
 <h1>CSS @keyframe</h1>
 <svg role="img" class="icon" width="400" height="200">
 <!-- I had to get it out of the <use> because webkit browsers #@ø‡~! http://codepen.io/AmeliaBR/pen/lshrp-->
  <g id="chart">
   <path class="chart" d="M172.1,90.6H200V200h-27.9V90.6L172.1,90.6z"/>
   <path class="chart" d="M129.3,2.8h27.9V200h-27.9L129.3,2.8L129.3,2.8z"/>
   <path class="chart" d="M86,123.1H114v76.4H86V123.1L86,123.1z"/>
   <path class="chart" d="M43.3,46.7h27.9V200H43.3L43.3,46.7L43.3,46.7z"/>
   <path class="chart" d="M0,16.5h27.9V200H0C0,200,0,16.5,0,16.5z"/>
  </g>
  <use xlink:href="#chart" id="charts" x="100"></use>
 </svg>
 <h1>SMIL animateTransfrom</h1>
 <svg viewBox="0 0 1024 1024" preserveAspectRatio="xMidYMin slice" style="width: 100%; padding-bottom: 80%; height: 70px; overflow: visible">
  <use xlink:href="#compass"></use>
 </svg>
 <h1>Javascript</h1>
 <svg viewBox="0 0 1024 1024">
  <use xlink:href="#linked-in" id="linked"></use>
  <text id="p" font-size="200" y="140" x="650">+</text>
  <text id="m" font-size="200" y="140" fill="" x="800">-</text>
 </svg>
</div>