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:

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.

Kaiido · Accepted Answer

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 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;}
  }




	CSS @keyframe
	
	SMIL animateTransfrom
	
	Javascript

Inline SVG doesn't scale

Answers (2)

Related Questions

Inline SVG doesn&#39;t scale

Answers (2)

Related Questions

Inline SVG doesn't scale