HTML 그래픽 - SVG (Scalable Vector Graphics)

SVG svg 요소는 Scalable Vector Graphics를 의미하며, XML 기반의 W3C 그래픽 표준 권고안입니다. 기존에 사용해 왔던 canvas 요소로는 벡터(vector) 이미지를 표현할 수 없었습니다.

하지만 svg 요소는 픽셀 기반인 웹 페이지에서 픽셀의 영향을 받지 않는 벡터 이미지를 표현할 수 있게 해줍니다. 따라서 이 요소는 도표나 그래프 등 벡터 기반의 다이어그램(diagram)를 표현하는 데 매우 효과적입니다.

사각형 그리기 다음 예제는 rect 요소를 사용하여 사각형을 그리는 예제입니다. 이 문장은 사용자의 웹 브라우저가 svg 요소를 지원하지 않을 때 나타납니다!

사각형을 그리는데 사용하는 rect 요소의 속성은 다음과 같습니다. 속성 설명 width 도형의 너비를 설정함.....