SVG 를 저장/불러오기 없이 background-image나 <img> 로 넣기

 

 

https://svgencode.com/

SVG Encoder

 

 

SVG 코드를 맨 위에 SVG Raw Code 에 복붙하면

아래 다양한 유형별로 쓸 수 있게 만들어준다.

 

오른쪽에는 해당 SVG를 미리보기로 볼 수 있음

 

아래에 코드들이 나오는데, 그걸 복사해서 원하는 방식으로 붙여넣으면 됨

 

아래 코드는 background-image url 로 쓸 수 있게 바뀐 코드

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='48px' viewBox='0 -960 960 960' width='48px' fill='%235f6368'%3E%3Cpath d='M480-427q-12 0-23-2.5t-21-8.5L95-619q-13-7-18.5-18.5T71-661q0-12 5.5-23T95-702l341-181q10-5 21-8t23-3q12 0 23 3t22 8l340 181q13 7 19.5 18t6.5 23q0 12-6.5 23.5T865-619L525-438q-11 6-22 8.5t-23 2.5Zm0-87 280-146-280-147-278 147 278 146Zm2-147Zm-2 327 335-177q4-3 20-5 18 0 31 12.5t13 31.5q0 11-5.5 21.5T856-434L525-258q-11 6-22 8.5t-23 2.5q-12 0-23-2.5t-21-9.5L106-434q-11-6-17-16.5T83-472q0-19 13-31.5t31-12.5q5 0 10.5 1.5t9.5 4.5l333 176Zm0 180 335-177q5-4 20-4 18 0 31 12.5t13 30.5q0 11-5.5 21.5T856-254L525-78q-11 6-22 8.5T480-67q-12 0-23-2.5T436-78L106-254q-11-6-17-16.5T83-292q0-18 13-30.5t31-12.5q4 0 10 1.5t10 3.5l333 176Z'/%3E%3C/svg%3E");