SVG를 background-image로 가져오기

check

heart

 

 

---

1. URL로 SVG 내려받기

 

SVG 이미지를 내려받기 위해서는 background-image 에 url() 함수의 인자로 이미지의 주소를 넘겨주면 된다.

예를 들어, 체크 모양과 하트 모양 SVG url을 check와 heart 클래스에 넣어주면, 요소 앞에 각각 체크 모양과 하트 모양의 SVG 이미지가 나타나는 것을 볼 수 있다.

 

.check {
    width: 50px;
    height: 50px;
    background-image: url("https://s2.svgbox.net/octicons.svg?ic=check");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.heart {
    width: 50px;
    height: 50px;
    background-image: url("https://s2.svgbox.net/hero-solid.svg?ic=heart");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

 

 

---

2. Data URI로 SVG 내려받는 방법

 

위와 같이 브라우저가 HTTP를 통해서 원격에 있는 SVG 이미지를 내려받는 과정은 비효율적인 측면이 있다. HTTP URL 대신에 Data URI를 사용하면 CSS의 url() 함수에 SVG 코드를 있는 그대로 넘길 수 있고  네트워크를 통해 이미지를 내려받지 않아도 되기 때문에 성능 측면에서도 이점이 있다.

Data URI를 사용할 때는 SVG 코드가 시작하기 전에 data:image/svg+xml;utf8,를 반드시 붙어주어야 한다.

 

.check {
  background-image: url('data:image/svg+xml;utf8,');
  background-repeat: no-repeat;
  background-position: center left;
  background-size: contain;
}

.heart {
  background-image: url('data:image/svg+xml;utf8,');
  background-repeat: no-repeat;
  background-position: center left;
  background-size: contain;
}

 

Data URI를 사용하면 fill이나 stroke처럼 SVG에 특화된 속성을 사용하여 이미지 내의 도형의 색상을 직접 제어할 수도 있다.