HTML 페이지의 SVG

SVG 파일은 다음과 같은 태그로 HTML 문서에 삽입할 수 있습니다: <embed>, <object> 또는 <iframe>.

HTML 페이지의 SVG

아래에서 SVG 파일을 HTML 페이지에 삽입하는 세 가지 방법을 보여드리겠습니다.

<embed> 태그 사용

<embed> 태그는 모든 주요 브라우저에서 지원되며 스크립트 사용이 가능합니다.

주의사항:HTML 페이지에 SVG를 삽입할 때 <embed> 태그를 사용하는 것은 Adobe SVG Viewer가 추천하는 방법입니다! 하지만, 법적 XHTML을 생성해야 한다면 <embed>를 사용할 수 없습니다. HTML 규범에는 <embed> 태그가 없습니다.

문법:

<embed src="rect.svg" width="300" height="100" 
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />

주의사항:pluginspage 속성은 다운로드 URL을 가리킵니다.

<object> 태그 사용

<object> 태그는 HTML 4의 표준 태그로, 모든 최신 브라우저에서 지원됩니다. 단점은 스크립트를 사용할 수 없음입니다.

주의사항:Adobe SVG Viewer의 최신 버전을 설치하셨다면, <object> 태그를 사용할 때 SVG 파일이 작동하지 않습니다. (IE에서는 적어도 작동하지 않습니다)!

문법:

<object data="rect.svg" width="300" height="100" 
type="image/svg+xml"
codebase="http://www.adobe.com/svg/viewer/install/" />

주의사항:codebase 속성은 플러그인 다운로드 URL을 지정합니다.

<iframe> 태그 사용

<iframe> 태그는 대부분의 브라우저에서 작동합니다.

문법:

<iframe src="rect.svg" width="300" height="100">
</iframe>

나는 이렇게 바라본다...

SVG의 이름 공간을 참조하면 SVG 요소가 HTML 코드에 추가되는 것이 너무 좋다면, 이렇게 될 것입니다:

<html xmlns:svg="http://www.w3.org/2000/svg">
<body>
<p>This is an HTML paragraph</p>
<svg:svg width="300" height="100" version="1.1" >
<svg:circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red" />
</svg:svg>
</body>
</html>