SVG는 벡터 기반 그래픽을 XML 형식으로 정의한다.
SVG란?
- SVG는 Scalable Vector Graphics의 약자이다
- SVG는 웹의 그래픽을 정의하는 데 사용된다
- SVG는 W3C 권장 사항이다
HTML <svg> 태그
HTML <svg> 요소는 SVG 그래픽을 위한 컨테이너이다.
SVG에는 경로, 상자, 원, 텍스트 및 그래픽 이미지를 그리는 여러 가지 방법이 있다.
SVG 원(SVG Circle)
| <!DOCTYPE html> <html> <body> <svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> 죄송합니다. 브라우저는 인라인 SVG를 지원하지 않습니다. </svg> </body> </html> |
상기의 예제를 실행한 결과 그림은 아래와 같다.
SVG 사각형
| <!DOCTYPE html> <html> <body> <svg width="400" height="100"> <rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" /> 죄송합니다. 브라우저는 인라인 SVG를 지원하지 않습니다.. </svg> </body> </html> |
상기의 예제를 실행한 결과 그림은 아래와 같다.
SVG 둥근 사각형(SVG rounded rectangle)
| <!DOCTYPE html> <html> <body> <svg width="400" height="180"> <rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5" /> 죄송합니다. 브라우저는 인라인 SVG를 지원하지 않습니다.. </svg> </body> </html> |
상기의 예제를 실행한 결과 그림은 아래와 같다.
SVG 별(SVG Star)
| <!DOCTYPE html> <html> <body> <svg width="300" height="200"> <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" /> 죄송합니다. 브라우저는 인라인 SVG를 지원하지 않습니다.. </svg> </body> </html> |
상기의 예제를 실행한 결과 그림은 아래와 같다.
HTML SVG 로고(Logo)
| <!DOCTYPE html> <html> <body> <svg height="130" width="500"> <defs> <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" /> <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" /> </linearGradient> </defs> <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" /> <text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text> 죄송합니다. 브라우저는 인라인 SVG를 지원하지 않습니다. </svg> </body> </html> |
상기의 예제를 실행한 결과 그림은 아래와 같다.
HTML SVG과 HTML 캔버스의 차이
SVG는 XML로 2D 그래픽을 설명하는 언어이다.
Canvas는 JavaScript를 사용하여 2D 그래픽을 즉시 그린다.
SVG는 XML 기반이므로 SVG DOM 내에서 모든 요소를 사용할 수 있다. 요소에 JavaScript 이벤트 핸들러를 연결할 수 있다.
SVG에서는 그려진 각 모양이 개체로 기억된다. SVG 개체의 속성이 변경되면 브라우저에서 모양을 자동으로 다시 렌더링할 수 있다.
캔버스는 픽셀 단위로 렌더링된다.
캔버스에서는 그래픽이 그려지면 브라우저에서 그래픽을 잊어버린다.
위치를 변경해야 하는 경우 그래픽으로 가려졌을 수 있는 모든 개체를 포함하여 전체 장면을 다시 그려야 한다.
캔버스와 SVG 비교
| 캔버스 | SVG |
| . 해상도 종속 . 이벤트 처리기를 지원하지 않습니다 . 열악한 텍스트 렌더링 기능 . 결과 이미지를 .png 또는 .jpg로 저장할 수 있다 . 그래픽 집약적인 게임에 적합 |
. 해상도 독립 . 이벤트 처리기 지원 . 렌더링 영역이 큰 애플리케이션에 가장 적합(Google 지도) . 복잡할 경우 렌더링이 느림(DOM을 많이 사용하는 모든 항목은 느림) . 게임 응용 프로그램에 적합하지 않음 |
이상으로 HTML에서 SVG와 캔버스의 활용과 비교 등을 살펴보았다.
쉬운 것 같지만, 꼭 손으로 코딩하며 손으로 익히고 머리로 익히며 실습하면 실력이 향상될 거에요
모두 화이팅입니다!!!
출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.
'HTML > HTML 기본문법' 카테고리의 다른 글
| HTML 비디오(HTML Video) (0) | 2023.06.19 |
|---|---|
| HTML 멀티미디어(HTML Multimedia) (0) | 2023.06.18 |
| HTML 캔버스 그래픽스(Canvas Graphics) (0) | 2023.06.16 |
| HTML input form* 속성 (0) | 2023.06.15 |
| HTML input 속성-3 (0) | 2023.06.14 |
댓글