[svg] 이미지 SVG 삽입하는 방법 + svg에 css 적용

1. object로 삽입하는 방법 (이미지 개별로 css 적용 가능)

 

1) html에 object로 svg 삽입
* bgimg나 img태그로 삽입 시 css 제어 불가
* 인라인으로 삽입 시 마크업 지저분해짐
<object type="image/svg+xml" data="img.svg">svg를 지원하지 않을 시 안내 문구 삽입</object>

2) svg 상단에 stylesheet 연결
<?xml-stylesheet type="text/css" href="style.css"?>

3) path에 class 삽입해 style 적용
3-1) 링크 연결 시 svg 바로 하단에 a링크 삽입

 

 

* 참고

https://nykim.work/35

[SVG] SVG 다루기

https://svgontheweb.com/ko/

웹에서 SVG 사용하기

 

---

2. img로 삽입하는 방법 (하나의 svg 파일로 색상 변경 가능)

 

1) html에 img로 svg 삽입
<img src="img.svg" alt="">

2) 원하는 컬러의 filter 값 계산해 css 적용

https://codepen.io/sosuke/pen/Pjoqqp

img{filter: invert(33%) sepia(12%) saturate(1774%) hue-rotate(188deg) brightness(96%) contrast(89%);}

 

*참고

https://intrepidgeeks.com/tutorial/3-change-the-color-of-svg-file-in-html-img-tag