CSS+SVG Experiments 1.0

Shapes are defined as SVG 1.2. Colors are defined in CSS, including a hover state. Colors are called out by classes, which have been added to the SVG parameters.

HTML

<html>
<head>
    <title>CSS+SVG Experiments 1.0</title>    
</head>
<body>
<div class="wrap">
<h1>CSS+SVG experiments</h1>
    <p>Shapes are defined as SVG 1.2. Colors are defined in CSS, including a hover state. Colors are called out by classes, which have been added to the SVG parameters.</p>
<h2>Testing SVG re-coloring by css</h2>
 <a href="/a"><svg version="1.2" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     x="0px" y="0px" width="99.338px" height="80.729px" viewBox="0 0 99.338 80.729" xml:space="preserve">
        <path id="twitter" class="twitter" fill="#7A7A7A" d="M99.338,9.557c-3.655,1.621-7.583,2.716-11.705,3.209c4.207-2.522,7.439-6.516,8.961-11.275
    c-3.938,2.336-8.3,4.031-12.942,4.945C79.935,2.475,74.637,0,68.776,0C57.521,0,48.395,9.125,48.395,20.379
    c0,1.598,0.181,3.153,0.528,4.645C31.985,24.174,16.968,16.061,6.916,3.73c-1.755,3.01-2.76,6.511-2.76,10.246
    c0,7.071,3.599,13.309,9.066,16.963c-3.341-0.105-6.483-1.022-9.23-2.549c-0.002,0.084-0.002,0.17-0.002,0.256
    c0,9.875,7.024,18.112,16.348,19.985c-1.71,0.465-3.51,0.715-5.369,0.715c-1.313,0-2.59-0.128-3.834-0.366
    c2.593,8.097,10.12,13.989,19.038,14.153C23.198,68.6,14.41,71.857,4.861,71.857c-1.645,0-3.267-0.097-4.861-0.284
    c9.019,5.782,19.731,9.156,31.241,9.156c37.486,0,57.986-31.055,57.986-57.987c0-0.883-0.021-1.762-0.06-2.637
    C93.151,17.233,96.605,13.644,99.338,9.557z"/>
</svg></a>
    
    <h2>Multiple shapes, repeated classes</h2>
    
<svg version="1.2" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     x="0px" y="0px" width="123.8px" height="107.121px" viewBox="0 0 123.8 107.121" xml:space="preserve">
<path class="twitter" fill="#7A7A7A" d="M99.338,9.557c-3.655,1.621-7.583,2.716-11.705,3.209c4.207-2.522,7.439-6.516,8.961-11.275
    c-3.938,2.336-8.3,4.031-12.942,4.945C79.935,2.475,74.637,0,68.776,0C57.521,0,48.395,9.125,48.395,20.379
   ...

CSS

/* Primary Elements */

.wrap {padding: 15px;}

/* Typography */
h1 {
    font-family: sans-serif;
    font-size: 22px;
    margin-bottom: 8px;
}

h2 {
    font-family: sans-serif;
    font-size: 18px;
    margin: 25px 0px;
}

h2:first-child {margin-top: 0px;}

p {
    font-family: sans-serif;
    font-size: 14px;
    color: #505050;
}

path.twitter {fill: #7A7A7A; cursor:pointer;}
path.twitter:hover {fill: #00AACE;}

rect.square {fill: #7A7A7A; cursor:pointer;}
rect.square:hover {fill: rgb(255,69,0);}

.twitter-button {
    width: 32px;
    height: 32px;
    background: url('http://imperativeideas.com/misc/dev/jfiddle/twitter.svg') no-repeat 0px 3px;
    background-size: 100% auto;
    -webkit-transition: all .5s linear;
    -moz-transition: all .5s linear;
    -ms-transition: all .5s linear;
    -o-transition: all .5s linear;
    transition: all .5s linear;
}

.twitter-button:hover {
    width: 256px;
    height: 256px;
    background: url('http://imperativeideas.com/misc/dev/jfiddle/twitter-active.svg') no-repeat 0px 3px;
    background-size: 100% auto;
}

div.twitter-button span {
    display: block;
    width:32px;
    height:32px;
}