HTML의 SVG
SVG 파일은 <embed>, <object> 태그를 사용하여 HTML 문서에 삽입할 수 있습니다.
SVG 코드는 HTML 페이지에 직접 삽입하거나 SVG 파일에 직접 연결할 수 있습니다.
<embed> 태그 사용
<embed>:
장점: 모든 주요 브라우저는 스크립트 사용을 지원하고 허용합니다.
단점: HTML4 및 XHTML에서는 사용하지 않는 것이 좋습니다(그러나 HTML5에서는 허용됨)
구문:
<embed src="circle1.svg" type="image/svg+xml" />
결과:
<object> 태그 사용
<object>:
장점: 모든 주요 브라우저에서 지원되며 HTML4, XHTML 및 HTML5 표준을 지원합니다.
단점: 스크립트가 허용되지 않습니다.
구문:
<object data="circle1.svg"
type="image/svg+xml"></object>
결과:
<iframe> 🎜 >
<iframe>:- 장점: 모든 주요 브라우저에서 지원되며 스크립팅 허용
- 단점: 권장되지 않음 다음에서 사용됨 HTML4 및 XHTML(HTML5에서는 허용됨)
구문:
<iframe src="circle1.svg "> </iframe>
결과:
HTML에 직접 SVG 코드 삽입Firefox, Internet Explorer 9 , Google Chrome 및 Safari에서는 SVG 코드를 HTML에 직접 삽입할 수 있습니다.
참고: SVG는 Opera에 직접 삽입할 수 없습니다.
인스턴스
인스턴스 실행»온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
<!DOCTYPE html> <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 파일에 링크 SVG 파일에 링크:
<a href="circle1.svg">SVG 파일 보기</a>
결과:SVG 파일 보기
