SVG 문서 처음 접하기

>> 원문: http://www.namo.co.kr/support/techlist/view.php?idx=389&cateflag=&prodflag=WC&keyfield=subject&keyword=&page=2

 

 

SVG는 XML 문서의 구조를 따릅니다. 간단한 SVG 문서로 아래 예제를 살펴보도록 하겠습니다.

 

[sample1.svg] 

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg>
<rect x="10" y="10" width="100" height="100" style="fill:rgb(255,0,0); stroke:rgb(0,0,0);"/>
</svg>

텍스트 편집기로 위와 같이 입력한 다음 sample1.svg이란 파일로 저장합니다. 웹 브라우저에서 sample1.svg 파일을 열면 아래와 같이 표시됩니다. 이때 웹 브라우저에 SVG 파일을 보여줄 수 있는 플러그 인(SVG Viewer)이 설치되어 있어야 합니다.

 

sample1.svg 파일의 내용을 살펴보면 다음과 같습니다.

<?xml version="1.0"?>

XML 문서 선언으로 이 문서가 XML임을 알리고 버전, 인코딩 방법, DTD의 내용 등 특정 응용 프로그램에서 처리해야 할 정보를 제공하는 역할을 합니다.

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

 이 문서의 타입이 SVG라는 것을 알리고 사용된 DTD의 경로를 명시합니다.

<svg>

SVG 문서의 시작을 알리는 태그입니다.

 

<rect x="10" y="10" width="100" height="100" style="fill:rgb(255,0,0); stroke:rgb(0,0,0);"/>

사각형 개체의 위치, 크기, 색깔을 지정한 부분입니다.

 

</svg>

SVG 문서의 끝을 알리는 태그입니다.