CodePen

HTML

            
              <!--CURRENTLY BROKEN -->
<h2>SVG icons coloured using js and hash (CURRENTLY BROKEN)</h2>

<!-- These are the same image. Change the hex value in the url to colour the SVG -->
<div class="icons">
  <object type="image/svg+xml" data="http://elbone.github.io/cdn/codepen/icon.svg#FC237A"></object>
  <object type="image/svg+xml" data="http://elbone.github.io/cdn/codepen/icon.svg#00F2FF"></object>
</div>

<p>
  We can append the SVG src with a HEX value. <br />
  Try changing values in the HTML pane.
</p>
<p>
  <a href="https://cdn.rawgit.com/Elbone/elbone.github.com/master/cdn/codepen/icon.svg#FC237A" 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>
            
          
!

↑ Insert the most common viewport meta tag

CSS

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

.icons
  padding:
    top: 2em
    bottom: 3em
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              /* https://twitter.com/scottjehl/statuses/326453680243097601 */
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................