CodePen

HTML

            
              
<h2>SVG icons coloured using js and hash</h2>
<p>
  We can append the SVG src with a HEX value. Try changing values in the HTML pane.
</p>
<div class="icons">
  <h4>Using <code>iframe</code> tag</h4>
  <!-- These are the same image. Change the hex value in the url to colour the SVG -->
  <iframe src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/477/icon.svg#FC237A" width="128" height="96"></iframe>
  <iframe src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/477/icon.svg#00F2FF" width="128" height="96"></iframe>
</div>

<!--CURRENTLY BROKEN -->
<p><code>embed</code> and <code>object</code> used to work but now not functional. I haven't had a chance to investigate</p>

<div class="icons">
  <h4>Using <code>object</code> tag</h4>
  <!-- These are the same image. Change the hex value in the url to colour the SVG -->
  <object type="image/svg+xml" data="https://s3-us-west-2.amazonaws.com/s.cdpn.io/477/icon.svg#FC237A"></object>
  <object type="image/svg+xml" data="https://s3-us-west-2.amazonaws.com/s.cdpn.io/477/icon.svg#00F2FF"></object>
</div>

<div class="icons">
  <h4>Using <code>embed</code> tag</h4>
  <!-- These are the same image. Change the hex value in the url to colour the SVG -->
  <embed type="image/svg+xml" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/477/icon.svg#FC237A"/>
  <embed type="image/svg+xml" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/477/icon.svg#00F2FF"/>
</div>

<p>
  <a href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/477/icon.svg" target="_blank">Here's the svg file</a>
</p>
<p>
  <a href="https://twitter.com/scottjehl/statuses/326453680243097601" target="_blank">How Scott Jehl did it</a>
</p>
            
          
!

CSS

            
              @import compass

// CURRENTLY BROKEN
object
  @include border-radius(4px, 4px)

.icons
  padding:
    top: 2em
    bottom: 3em
    
h4
  margin-bottom: 2em
            
          
!

JS

            
              /* https://twitter.com/scottjehl/statuses/326453680243097601 */
            
          
!
999px
Loading ..................