svg 요소 svg 요소는 Scalable Vector Graphics를 의미하며, XML 기반의 W3C 그래픽 표준 권고안이다. 기존에 사용해 왔던 canvas 요소로는 벡터(vector) 이미지를 표현할 수 없었다. 하지만 svg 요소는 픽셀 기반인 웹 페이지에서 픽셀의 영향을 받지 않는 벡터 이미지를 표현할 수 있게 해준다. 따라서 이 요소는 도표나 그래프 등 벡터 기반의 다이어그램(diagram)를 표현하는 데 매우 효과적이다. 사각형 그리기 다음 예제는 rect 요소를 사용하여 사각형을 그리는 예제이다. 이 문장은 사용자의 웹 브라우저가 svg 요소를 지원하지 않을 때 나타납니다! 사각형을 그리는데 사용하는 rect 요소의 속성은 다음과 같다. 속성 설명 width 도형의 너비를 설정함. hei..

Canvas vs SVG canvas 요소와 svg 요소는 거의 같은 결과물을 얻을 수 있는 비슷한 동작을 하는 요소이다. 어떤 경우에는 canvas 요소를 사용하는 것이 더 나으며, 어떤 경우에는 svg 요소를 사용하는 것이 더 나은 경우가 있다. 작업 환경에 따른 선택의 기준 다음 그림은 화면 크기 및 픽셀 수에 따른 렌더링 시간(rendering time)을 보여준다. 렌더링(rendering)이란 프로그램을 사용하여 모델로부터 영상이나 화면을 만들어내는 과정을 가리킨다. 따라서 렌더링 시간이란 코드를 실행하여 그 결과가 화면에 표시되는 시간을 의미한다. canvas 요소의 성능은 화면이 작거나, 픽셀 수가 많을 경우(>10k)에 좋다. svg 요소의 성능은 화면이 크거나, 픽셀 수가 적을 경우(