svg를 before, after과 같은 의사 클래스에 적용하기

고민한 이유

보통 before이나 after에는 background-image에 이미지 파일만 사용하여 처리를 많이한다. 하지만 이미지를 올리기 힘든 경우에는 어떻게 처리하는게 좋을까?

SVG Tag

이미 이미지 파일 없이 우리는 svg tag를 이용하여 html에 벡터를 사용해본 사람이 많을 것이라고 생각한다. javascript에서 createURLObject를 이용하면 없는 파일을 텍스트로 만드는 것처럼 CSS에서도 이런 방법이 있지 않을까?

SVG URL-encoder

https://yoksel.github.io/url-encoder/

이 페이지에 들어가면, svg를 URL-encoder로 바꾸어 주는 기능이 있다. 이것을 이용하면

 <svg viewBox="0 0 12 12" class="chevronDownRoundedThick" style="width: 12px; height: 12px; display: block; fill: rgba(55, 53, 47, 0.35); flex-shrink: 0; backface-visibility: hidden; transition: transform 200ms ease-out 0s; transform: rotateZ(-90deg); opacity: 1;"><path d="M6.02734 8.80274C6.27148 8.80274 6.47168 8.71484 6.66211 8.51465L10.2803 4.82324C10.4268 4.67676 10.5 4.49609 10.5 4.28125C10.5 3.85156 10.1484 3.5 9.72363 3.5C9.50879 3.5 9.30859 3.58789 9.15234 3.74902L6.03223 6.9668L2.90722 3.74902C2.74609 3.58789 2.55078 3.5 2.33105 3.5C1.90137 3.5 1.55469 3.85156 1.55469 4.28125C1.55469 4.49609 1.62793 4.67676 1.77441 4.82324L5.39258 8.51465C5.58789 8.71973 5.78808 8.80274 6.02734 8.80274Z"></path></svg>

요런 svg Element를 사이트에서 변환하면

Ready for CSS부분을 background-image를 제외하고 복사한다. 사용할 의사 클래스의 content에 넣는다

{
display: inline-block;
width: 12px;
height: 12px;
content: url(data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' class='chevronDownRoundedThick' style='width: 12px; height: 12px; display: block; fill: rgba(55, 53, 47, 0.35); flex-shrink: 0; backface-visibility: hidden; transition: transform 200ms ease-out 0s; transform: rotateZ(-90deg); opacity: 1;'%3E%3Cpath d='M6.02734 8.80274C6.27148 8.80274 6.47168 8.71484 6.66211 8.51465L10.2803 4.82324C10.4268 4.67676 10.5 4.49609 10.5 4.28125C10.5 3.85156 10.1484 3.5 9.72363 3.5C9.50879 3.5 9.30859 3.58789 9.15234 3.74902L6.03223 6.9668L2.90722 3.74902C2.74609 3.58789 2.55078 3.5 2.33105 3.5C1.90137 3.5 1.55469 3.85156 1.55469 4.28125C1.55469 4.49609 1.62793 4.67676 1.77441 4.82324L5.39258 8.51465C5.58789 8.71973 5.78808 8.80274 6.02734 8.80274Z'%3E%3C/path%3E%3C/svg%3E);
}

 

마무리

티스토리 블로그 스킨에 최대한 파일을 업로드 안하는 방법을 찾다가 생각한 벙법이다. 반복되는 svg를 사용하고 싶지 않을 때 효율적인 방법인 것 같다.