HTML에서 SVG
SVG 파일은 다음 태그를 통해 HTML 문서에 포함 할 수 있습니다 : <삽입>, <개체> 또는 <iframe> 해당.
SVG 코드는 HTML 페이지에 직접 삽입 할 수 있습니다, 또는 당신은 SVG 파일로 직접 링크 할 수 있습니다.
의 <포함> 태그를 사용하여
<삽입>
- 장점 : 모든 주요 브라우저 지원, 및 스크립팅을 할 수있다
- 단점 : HTML4과 XHTML의 사용을 권장 (하지만 HTML5에서 허용)하지 않음
구문 :
<embed src="circle1.svg" type="image/svg+xml" />
결과 :
의 <object> 태그를 사용하여
<개체>
- HTML4, XHTML과 HTML5 표준에 대한 모든 주요 브라우저가 지원되고, 지원 : 장점
- 단점 : 스크립트의 사용을 허용하지 않습니다.
구문 :
<object data="circle1.svg"
type="image/svg+xml"></object>
결과 :
<iframe> 해당 태그를 사용
<iframe> 해당 :
- 장점 : 모든 주요 브라우저 지원, 및 스크립팅을 할 수있다
- 단점 : HTML4과 XHTML의 사용을 권장 (하지만 HTML5에서 허용)하지 않음
구문 :
<iframe src="circle1.svg"></iframe>
결과 :
SVG HTML 코드에 직접 삽입
파이어 폭스, 인터넷 Explorer9, 구글 크롬과 사파리, 당신은 HTML에서 직접 SVG 코드를 포함 할 수 있습니다.
참고 : SVG는 오페라에 직접 삽입 할 수 있습니다.
예
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>
</body>
</html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>
</body>
</html>
»시도
SVG 파일 링크
또한 <A> SVG 파일을 레이블에 연결할 수 있습니다 링크를 SVG 파일에
또한 <A> SVG 파일이있는 레이블에 연결할 수 있습니다 :
<a href="circle1.svg">View SVG file</a>
결과 :
보기 SVG 파일