7.7 svg 요소(Element)
svg는 Scalable Vector Graphics(SVG)의
약자로 XML 내에서 2차원 그래픽을 구현하는데 사용되는
언어입니다. SVG에서는 직원과 곡선 등을 표현하는데 사용되는 벡터(Vector)
그래픽과 이미지, 마지막으로 텍스트 3가지 타입의
그래픽 객체를 지원하는데 여기서는 간단하게 원, 직사각형, 이미지, 텍스트를 나타내는 예제를 알아봅니다.
첫 번째 예제는 원(circle), 직사각형(rectangle),
텍스트를 나타내는 간단한 예제입니다.
메모장을 열어서
HTML5 문서의 기본 태그들을 작성한 후 body 요소의 시작과 마침 태그 내에 다음과
같이 코드를 작성합니다.
<body>
<svg width="200"
height="200" style="background-color:#CEF6D8" >
<circle cx="50"
cy="50" r="45" fill="none"
stroke="black" />
<rect x="0"
y="0" width="30" height="30"
fill="green"
stroke="blue" stroke-width="2"/>
<text x="100"
y="100" font-family="Century Gothic"
font-size="20" fill="blue" >
text <tspan
font-weight="bold" fill="red">요소</tspan>를 이용해서 나타낸 부분
</text>
<text x="120"
y="120" font-family="Century Gothic"
font-size="20" fill="blue" >
<tspan x="120"
y="120" rotate="-30,0,30">
text 요소를 이용해서 나타낸 부분
</tspan>
</text>
</svg>
</body>
위에서 사용된 svg 요소의 시작 태그와 마침 태그
안에 포함된 자식 요소들 및 관련 속성들을 정리하면 다음과 같습니다.
|
요소 |
기능 |
|
svg |
circle, rect, text 같은 다른 그래픽
요소들을 포함하는 컨테이너 요소 |
|
circle |
cx, cy속성은 원의 중심좌표를 r 속성은 반지름(radius)를 나타내어 원의 중심좌표를 기준으로 반지름이 r인 원을 그리는 요소 |
|
rect |
x, y 속성은 사각형의 좌측 상단 시작좌표를, width 속성은 사각형의 너비를, height 속성은 사각형의 높이를 설정하며 fill 속성은 설정된 색상으로 사각형 안을 채우는 속성이며, stroke 속성은 사각형의 경계선 색을 설정, stroke-width속성은 사각형의 경계선의 두께 혹은 너비 설정 |
|
text |
x 속성은 좌측끝으로부터 좌표, y 속성은 바닥(bottom)으로부터 좌표를 나타내며 이 위치로 text 가 시작되게 되며 fill 속성은 글자색상을 설정 |
|
tspan |
text 요소 내에서 텍스트, 폰트, 그리고 현재 위치 등을 재설정할 수 있도록 해주는 요소로 첫 번째 text 요소 내에서는 “요소”라는 텍스트의 폰트 색상을 빨강(red)과 진하게 적용되었고 두 번째 text 요소 내에서는 x, y 속성을 이용하여 새로운 좌표를 설정하고 rotate 속성을 이용하여 텍스트를 회전시키는데 사용 |
“svgEx.html”로 저장한 후 IE9와 Firefox를 이용하여 각각 열어보면 다음과 같이 나타나게 됩니다.
위의 결과에서
보는 것처럼 IE9는 svg 크기(너비 : 200, 높이 : 200)가
넘어가도 Text를 표시해주지만 Firefox는 해당 영역을
넘어가는 부분을 잘려서 출력하게 됩니다. 만일 Firefox에서도 잘리지 않고 완전하게 보여지게 하려면 svg 크기를 width=”100%”, height=”100%”와 같이 설정해주면 됩니다.
두 번째 예제는 이미지를 이용한 예제로 이번에 사용할 이미지는 역시 flower2.jpg입니다.
<body>
<svg width ="300"
height="300">
<rect x="5"
y="5" width="200"
height="200" style="fill: #000000"/>
<image x="10"
y="10" width="200" height="200"
xlink:href="flower2.jpg"
preserveAspectRatio="none"
/>
</svg>
</body>
위에서 사용된 image 요소의 속성을 정리하면 다음과
같습니다.
|
속성 |
기능 |
|
x |
x축의 좌측 상단으로부터 x 좌표, 디폴트는 0 |
|
y |
y축의 좌측 상단으로부터 x 좌표, 디폴트는 0 |
|
width |
이미지의 너비(가로) |
|
height |
이미지의 높이(세로) |
|
xlink:href |
이미지의 경로 URL을 나타냄 |
|
preserveAspectRatio |
이미지의 위치나 크기를 결정하는데 사용. |
이제 “svgImageEx.html”로 저장하고 브라우저를 통해 보면 다음과 같이 나타나게 됩니다.
마지막으로 위
코드에 조그마한 수정을 가해서 이미지를 회전해볼까요? 위 코드에서 다음과 같이 코드를 작성합니다.
<g
transform="rotate(3)">
<image x="10"
y="10" width="200" height="200"
xlink:href="flower2.jpg"
preserveAspectRatio="none"
/>
</g>
위와 같이 g 요소의 시작 태그와 마침 태그 안에 기존의 image 요소에 대한 코드를 자식 요소로 갖도록 설정하는데 여기서 g 요소는 그래픽 요소들을 그룹핑하는데 사용하는 요소이고 그 안에 사용된 transform 속성은 변환을 위해 사용하는 속성으로 위 코드와 같이 회전하는데 사용하는 rotate나 행렬을 만드는 matrix 변환 작업을 수행할 수 있습니다. 위 코드에서는 rotate(3)으로 설정했으므로 flower2.jpg 이미지를 +3도 회전하여 나타내라는 의미로 브라우저를 통해 보면 다음과 같습니다.
SVG는 다양한 작업을 수행할 수 있는데 “http://www.w3.org/TR/SVG11/struct.html”을
참고하시면 좋을 것 같습니다.
끝으로 여기에서 구체적인 설명이 안된 video, audio, source, track,
canvas 요소에 대해서는 보다 구체적으로 canvas나 audio, video부분에서 자세히 다룹니다.
- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 HTML5 요소(Element)에 대한 부분을 그대로를 공개하는 것으로
본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인
학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기
바랍니다. 끝으로 학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를
비밀댓글로 남겨주시면 연락드리겠습니다.
끝으로 책 한권 분량에 대한 목차(링크 포함)은 "http://fromyou.tistory.com/581"에서 다운로드 받아서 필요하신 학습을 하실 수 있으며 조금이나마 도움이 되셨으면 합니다.
'제가 쓴 책 > HTML5, CSS3 and JavaScript' 카테고리의 다른 글
| 8.2 tbody, thead, tfoot 요소를 이용한 머리말, 본문, 맺음말 형태 만들기 (0) | 2013.07.31 |
|---|---|
| 8. Tabular Data Elements (0) | 2013.07.31 |
| 7.6 math 요소(Element) (1) | 2013.07.31 |
| 7.5 iframe 요소(Element) (0) | 2013.07.31 |
| 7.4 PDF 파일을 embed 요소(Element)를 이용하여 임베딩 (0) | 2013.07.31 |
