• 예제 1.2 (원의 크기/색상 등) : Adobe SVG viewer

<?xml version="1.0" ?> <svg width="50" height="50">     <circle cx="40" cy="40" r="40" style="fill:green" /> </svg>

DTD 선언 : Adobe SVG viewer 에서 지정 SVG 문서   - 범위 초과    :ex01-02.svg

• Adobe SVG viewer 의 메뉴 (오른쪽 버튼)
  • 확대, 축소, 원본 보기
  • 고품질, 일시 정지, 음소거
  • SVG 복사, SVG 보기, 소스보기, SVG 따로저장 등

SVG 문서의 구조

• XML 문서 구조와 마찬가지
  • XML 선언, 처리명령, 요소, 주석, 엔티티 등
  • Well-Formed, Valid (SVG DTD)
  • 단, 요소(element) 들은 SVG DTD에 정의되어 있는 대로 사용

• SVG 문서를 구성하는 요소(element)
  • SVG 루트 요소 : <svg>
  • 그래픽 요소 : 도형 및 텍스트 그리기 관련 
    <rect>  <circle>  <ellipse>  <line>  <polyline>  <polygon> 
    <text>  <tspan>  <tref> 등
  • 컨테이너 요소
    <g>  <defs>  <symbol>  <use>  <desc>  <title>  <image>  <switch> 등

기본 도형 그리기

• 요소 및 속성

  도형	요소명	속성
  사각형	rect	x="<좌표값>"  y="<좌표값>"  width="<크기>"  height="<크기>"
  둥근 사각형	rect	x="<좌표값>"  y="<좌표값>"  width="<크기>"  height="<크기>" rx="<크기>"  ry="<크기>"
  원	circle	cx="<좌표값>"  cy="<좌표값>"  r="<크기>"
  타원	ellipse	cx="<좌표값>"  cy="<좌표값>"  rx="<크기>"  ry="<크기>"
  선	line	x1="<좌표값>"  y1="<좌표값>"  x2="<좌표값>"  y2="<좌표값>"
  연결선	polyine	points ="<점들의 리스트>"
  다각형	polygon	points ="<점들의 리스트>"

• style 속성
  • style = "fill:<색상>; stroke:<색상>; stroke-width:<크기>"
  • 또는 fill="<색상>"  stroke="<색상>"  stroke-width="<크기>"
• transform 속성
  • 8장. 좌표시스템과 변환

• 참조 사이트 : 2차원 그래픽스의 기본도형 - 컴퓨터 그래픽스 배움터 4절 (알고리즘 제외)

• 예제 1

<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"     "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg width="180" height="200">     <rect x="1" y="1" width="170" height="190"         style="fill:none; stroke:blue; stroke-width:1"/>     <rect x="40" y="10" width="80" height="40"         fill="yellow" stroke="navy" stroke-width="3" />     <rect x="40" y="60" width="80" height="40" rx="10"         fill="green" />     <g transform="translate(40 150) rotate(-30)">         <rect x="0" y="0" width="80" height="40" rx="20"             fill="none" stroke="purple" stroke-width="5" />     </g> </svg>

• 예제 2

<svg width="200" height="170">     <rect x="0" y="0" width="200" height="170"  fill="yellow" />     <circle cx="40" cy="40" r="30"         fill="red" stroke="blue" stroke-width="4" />     <ellipse cx="130" cy="40" rx="50" ry="30"  fill="red" />     <ellipse transform="translate(80 110) rotate(-20)"          rx="50"  ry="30"         fill="none" stroke="blue" stroke-width="10" /> </svg>

• 예제 3

<svg width="200" height="200">     <line x1="10" y1="50" x2="50" y2="10"         stroke="green" stroke-width="1" />     <line x1="70" y1="50" x2="110" y2="10"         stroke="green" stroke-width="10" />     <line x1="130" y1="50" x2="170" y2="10"         stroke="green" stroke-width="20" />     <polyline fill="none" stroke="red" stroke-width="3"          points="10,95  30,95  30,85  50,85  50,95  70,95  70,80                     90,80  90,95  110,95  110,75  130,75  130,95                     150,95  150,70  170,70  170,95  190,95" />     <polygon fill="lime" stroke="blue" stroke-width="3"          points="100,125  128,137.5  128,162.5                     100,175  72,162.5  72,137.5" /> </svg>

문자(Text) 그리기

• <text> 요소 : <text  x="좌표"  y="좌표"  xlink:href="URI"> ... </text>

<svg width="180" height="100">   <text x="10" y="40" font-family="Arial" font-size="20pt" fill="red">          Hello! 안녕</text>   <text x="10" y="80" font-size="20pt" font-weight="bold" fill="blue">          Hello! 안녕</text> </svg>

• 한글 입력 : 유니코드로 표기

<svg width="180" height="100">   <text x="10" y="40" font-size="20pt" fill="red">          Hello! &#xC548;&#xB155;! </text>   <text x="10" y="80" font-family="Batang" font-size="20pt"    fill="blue"> Hello! &#xC548;&#xB155;! </text> </svg>

• <tspan> 요소 :  <tspan x="좌표"  y="좌표"  dx="상대좌표"  dy="상대좌표"  rotate="각도">
  • inline 텍스트 처리, <span>과 유사

<svg width="200" height="100">    <g style="font-family:Arial; font-size:14pt; fill:blue">       <text x="10" y="30"> Hello!              <tspan font-weight="bold" fill="red">Good</tspan>             Morning! </text>       <text x="10" y="70"> Hello!             <tspan dx="20" dy="-10" font-weight="bold" fill="red">             Wonderful</tspan>            <tspan dx="-30" dy="15" font-weight="bold">Day!            </tspan> </text>   </g> </svg>

• <tref> 요소 :  <tref  x="좌표"  y="좌표"  xlink:href="URI" /> 
  • <defs>에서 정의된 text 를 사용

<svg width="200" height="100">    <defs>       <text id="Hel">Hello!</text>    </defs>    <text x="10" y="20" font-size="10pt"> 3 times : </text>    <text x="20" y="40" style="font-family:Arial; font-size:14pt;         fill:green"> <tref xlink:href="#Hel"/> </text>    <text x="70" y="50" style="font-family:Arial; font-size:16pt;         fill:blue"> <tref xlink:href="#Hel"/> </text>    <text x="130" y="60" style="font-family:Arial; font-size:18pt;         fill:red"> <tref xlink:href="#Hel"/> </text> </svg>

• font 속성
  • font-family : "폰트이름"
  • font-style : "normal | italic | oblique"
  • font-weight : normal | bold | bolder | lighter | 100 | 200 | ... | 900
  • font-stretch : normal | wider | narrower | ... | condensed | ... | expanded
  • font-size

• text-decoration 속성
  • text-decoration : underline | overline | line-through | blink
  • stroke 와 fill

Text on a Path

• <textPath> 요소
  • startOffset="위치"  method="align | stretch"   spacing="auto | exact"   xlink:href="URI"

• <path>를 <defs>에서 정의한 후 참조
  • <textPath>에서 사용 : path 위에 텍스트 그리기
  • <use>에서 사용 : path 를 그리기

  예

<svg width="200" height="100">   <defs>     <path id="MyP1" d="M 20 50 C 40 10 70 70 100 50                                    C 120 10 150 70 180 50 " />   </defs>   <use xlink:href="#MyP1" style="fill:none; stroke:red" />   <text style="font-family:Arial; font-size:14pt; fill:blue">      <textPath xlink:href="#MyP1"> textPath</textPath>      <textPath xlink:href="#MyP1" startOffset="90"> textPath           </textPath>   </text> </svg>

기본 데이터 타입

• <integer>
• <number>
• <length>
• <coordinate>
• <list of ...>
• <angle> : deg, grad, rad
• <color> : 컬러명 또는 rgb(a,b,c)  p.57-59
• <paint>
• <percentage> : %
• <transform-list>
• <uri>
• <frequency> : Hz, kHz
• <time> : ms, s