SVG 예제

SVG는 XML로 작성됩니다.

SVG 예제

아래 예제는 간단한 SVG 파일 예제입니다. SVG 파일은 .svg 확장자로 저장해야 합니다:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>

예제 보기(SVG를 지원하는 브라우저에서만 사용)

SVG 원본 코드를 확인하려면 이 예제를 열고 창에서 오른쪽 클릭하여 "원본 코드 보기"를 선택하세요.

코드 설명:

첫 번째 줄에는 XML 선언이 포함되어 있습니다. standalone 속성에 주의하세요! 이 속성은 이 SVG 파일이 "독립적"인지 아니면 외부 파일을 참조하는지를 정의합니다.

standalone="no"는 SVG 문서가 외부 파일을 참조할 것이라는 것을 의미합니다. 여기서는 DTD 파일입니다.

두 번째와 세 번째 행은 이 외부 SVG DTD를 참조합니다. 이 DTD는 “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”에 위치하고 있습니다. 이 DTD는 W3C에 위치하며, 모든 허용된 SVG 요소를 포함하고 있습니다.

SVG 코드는 <svg> 요소로 시작되며, 열린 태그 <svg>와 닫힌 태그 </svg>를 포함합니다. 이는 루트 요소입니다. width와 height 속성은 이 SVG 문서의 너비와 높이를 설정할 수 있습니다. version 속성은 사용되는 SVG 버전을 정의할 수 있습니다. xmlns 속성은 SVG 이름 공간을 정의합니다.

SVG의 <circle>는 원을 생성합니다. cx와 cy 속성은 원 중심의 x와 y 좌표를 정의합니다. 이 두 속성을 무시하면 원점이 (0, 0)로 설정됩니다. r 속성은 원의 반지름을 정의합니다.

stroke 및 stroke-width 속성은 형태의 경계를 어떻게 표시할지를 제어합니다. 우리는 원의 경계를 2px 너비의 검은색 경계로 설정했습니다.

fill 속성은 형태 내의 색상을 설정합니다. 우리는 채우기 색상을 빨간색으로 설정했습니다.

닫힌 태그의 역할은 SVG 요소와 문서 자체를 닫는 것입니다.

주석:모든 열린 태그는 닫힌 태그가 있어야 합니다!