SVG 적용 시 Dat URIs 방식

1. 다운로드한 SVG 파일의 소스 코드를 URL-Encorder for SVG 사이트에서 Data URIs 포맷으로 변환한다.
2. 변환된 URL을 CSS의 background-image: url() 값으로 적용한다.

 

// HTML
<i class="icon_play"></i>


// CSS
body {
  background-color: #303033;
}

.icon_play {
  display: inline-block;
  width: 40px;
  height: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath fill='%23fff' d='M26.878 20.844l-12.342 7.837c-.466.296-1.084.159-1.38-.308-.102-.16-.156-.346-.156-.536V12.163c0-.553.448-1 1-1 .19 0 .376.054.536.155l12.342 7.838c.466.296.604.914.308 1.38-.079.124-.184.23-.308.308z' transform='translate(-100 -326) translate(100 326)'/%3E%3C/svg%3E%0A");
  background-size: cover;
}