Is possible to scale SVG using CSS? I use <img>
to insert an SVG icon in HTML. Here is my code: http://jsfiddle.net/kw5fuw7L/.
nav {
width: 100%;
background: #202125;
box-shadow: 0px 1px 0px 0px #2C2E32;
padding: 0;
overflow: hidden;
}
nav ul {
list-style: none;
overflow: hidden;
margin: 0;
padding: 0;
}
nav ul li {
float: left;
position: relative;
padding: 20px 0;
width: 120px;
text-align: center;
}
nav ul li.active {
background: #F5A623;
}
svg path {
fill: #fff !important;
}
nav ul li .svg-container {
width: 20px;
height: 10px;
margin: 0 auto;
padding: 0 auto;
}
nav ul li img {
display: block;
margin: 0 auto;
padding: 0 auto;
width: 100%;
}
nav ul li span {
display: inline-block;
color: #fff;
padding-top: 10px;
}
nav ul li a {
position: absolute;
top: 0;
left: 0;
height: 80px;
width: 120px;
text-indent: -5000em;
}
Unfortunately, I have to use this code too: http://jsfiddle.net/praveenscience/wuSF7/, to give them color. It works okay before I put there this script.
I would be grateful if someone have idea how to scale an SVG icons.