SVG-изображения

<img src="html5.svg" width="50" alt="">
<img src="css3-alt.svg" width="50" alt="">
<img src="sass.svg" width="50" alt="">
<img src="js.svg" width="50" alt="">
<img src="php.svg" width="100" alt="">
<img src="git.svg" width="50" alt="">
<img src="gulp.svg" width="50" alt="">
<img src="github.svg" width="50" alt="">
<img src="google.svg" width="50" alt="">

SVG (инверсия)

<img class="filter-invert" src="html5.svg" width="50" alt="">
<img class="filter-invert" src="css3-alt.svg" width="50" alt="">
<img class="filter-invert" src="sass.svg" width="50" alt="">
<img class="filter-invert" src="js.svg" width="50" alt="">
<img class="filter-invert" src="php.svg" width="100" alt="">
<img class="filter-invert" src="git.svg" width="50" alt="">
<img class="filter-invert" src="gulp.svg" width="50" alt="">
<img class="filter-invert" src="github.svg" width="50" alt="">
<img class="filter-invert" src="google.svg" width="50" alt="">

SVG (цвет)

Для закраски svg-изображения используйте css-фильтры. См. генератор filter.

<img style="filter: invert(63%) sepia(99%) saturate(654%) hue-rotate(350deg) brightness(91%) contrast(92%);" src="html5.svg" width="50" alt="">

<img style="filter: invert(73%) sepia(76%) saturate(4239%) hue-rotate(72deg) brightness(92%) contrast(91%);" src="css3-alt.svg" width="50" alt="">

SVG в кнопках

Кнопка Кнопка 

<button class="button"><img class="filter-invert mar10-r" src="html5.svg" width="16" alt="">Кнопка</button>

<button class="button button-green"><img class="filter-invert mar10-r" src="html5.svg" width="16" alt="">Кнопка</button>

SVG как тэг

 <div class="w50px">
     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
        <path fill="#E09917" d="M0 32l34.9 395.8L191.5 480l157.6-52.2L384 32H0zm308.2 127.9H124.4l4.1 49.4h175.6l-13.6 148.4-97.9 27v.3h-1.1l-98.7-27.3-6-75.8h47.7L138 320l53.5 14.5 53.7-14.5 6-62.2H84.3L71.5 112.2h241.1l-4.4 47.7z"/>
    </svg>
</div>