웹 문서에 SVG를 넣는 다양한 방법 > 기술자료

• 목록
• 게시판 리스트 옵션
  • 검색

svg 를 html 문서에 삽입하는 다양한 방법을 정리해봅니다


1. img 넣기
<img src="vector-img.svg" alt="">
<a href="링크"><img src="vector-img.svg" alt=""></a>
img를 이용해 SVG를 넣으면, SVG 안의 script가 전혀 작동하지 않게 된다. style은 작동한다.


2. object 넣기
<object data="vector-img.svg" type="image/svg+xml"></object>
파일 경로는 src가 아니라 data 속성에 적어 준다
밖에서 감싸는 a 태그가 작동하지 않는다


3. embed 넣기
<embed src="vector-img.svg" type="image/svg+xml">
밖에서 감싸는 a 태그가 작동하지 않는다


4. iframe 넣기
<iframe src="vector-img.svg"></iframe>
밖에서 감싸는 a 태그가 작동하지 않는다
 

	scale	외부 a link	height:auto	CSS style	script
inline svg	O	O	O	O	O
img	O	O	O	O	X
object	O	X	X	O	O
embed	O	X	X	O	O
iframe	X (webkit O)	X	X	O	O

참고자료
https://mytory.net/archives/11213