SVG, CANVAS

: svg와 canvas는 브라우저에 그림을 그릴 때 사용한다.

SVG

• 벡터 기반 그래픽을 XML형식으로 정의
• 픽셀 기반인 웹페이지에서 픽셀의 영향을 받지 않는 벡터 이미지를 표현
• 확장 가능한 벡터 그래픽을 의미한다.
• 해상도를 줄이거나 늘려도 깨지는 현상이 없다.
• 이미지 생성한 후 텍스트 편집기로 편집할 수 있다.
• svg의 성능은 화면이 크거나 픽셀 수가 적을 경우가 좋다.
• 고품질의 문서 작업이나 정적 이미지의 조작 작업할 때 사용한다.
• 속성

//선 그리기
<svg width="200" height="200">
<line x1="시작될 위치x" y1="시작될 위치y" x2="끝나는 위치x" y2="끝나는 위치y"
			stoke="테두리색상" stroke-width="테두리굵기"/>
</svg>

//사각형 그리기
<svg width="200" height="200">
<rect width="너비" height="높이" stoke="테두리색상" stroke-width="테두리굵기" 
			fill="도형채울색상" opacity="투명도"/>
</svg>
//2
<svg width="200" height="200">
<rect width="200" height="200" style="stoke:orange; stroke-width:5; 
			fill:red; opacity:1;"/> 
</svg>

//원 그리기
<svg width="200" height="200">
<ellipse cx="x" cy="시y" rx="x축반지름" ry="y축반지"
			stoke="테두리색상" stroke-width="테두리굵기"/>
</svg>

CANVAS

• 단일 태그인 그래픽 요소이다.
• canvas는 웹 페이지에 쉬운 방법으로 그래픽을 그려준다.
• 그래픽을 위한 컨테이너 역할만 수행하여, 그래픽을 그리기 위해서 javascript언어를 사용해야한다.
• canvas의 성능은 화면이 작거나, 픽셀 수 가 많을 경우가 좋다
• 복잡하고, 고성능의 애니메이션 작업이나 동영상 조작 등의 작업을 할 때 사용한다.
• 속성

//선 그리기
context.moveTo(0,0) //선이 시작될 좌표설정
context.lineTo(100,100) //선이 끝나는 좌표설정
context.stroke()//선그리기

//사각형 그리기
context.stokeRect(10,10,200,100) //사각형 테두리 그리기(왼쪽 위 x좌표,왼쪽 위 y좌표,너비,높이)
context.fillStyle="red" //색상설정
context.fill() //색 칠하기
context.fillRect(10,10,200,100) //색칠된 사각형 그리기
context.clearRect(10,10,200,100) //사각형 투명하게 만듦

//원 그리기
context.beginPath() //도형그리기 시작
context.arc(150,100,50,0,2*Math.PI) //(x좌표,y좌표,반지름, 시작할 각도, 마칠 각도)설정
context.closePath()//그리기 마침

//텍스트
context.font="40px Arial"// 크기, 폰트, 색상 설정
context.fillText("CANVAS", 10,10) //(텍스트내용, 그리기 시작 위치) 색칠해진 텍스
context.strokeText("CANVAS",20,20) //(텍스트내용, 그리기 시작 위치) 테두리만 있는 텍스트

차이점

SVG

• 해상도 독립적
• DOM의 일부분이 되는 다중 그래픽 요소
• 이벤트 핸들러에 대한 지원
• script 및 css를 통해서 수정 가능
• 렌더링 영역이 넓은 응용 프로그램에 적합함

CANVAS

• 해상도 의존
• 단일 HTML요소
• 이벤트 핸들러에 대한 지원X
• script를 통해서만 수정 가능
• 그래픽이 주작업인 게임에 적합함
• PNG, JPG로 이미지 저장

마지막으로..
둘중에서 작업환경에 맞는 그래픽 요소를 선택해서 사용하면 된다.!

참고자료_tcpschool