[SVG] 원 그리기

SVG 원 그리기

SVG(Scalable Vector Graphics)에서 원을 그리기 위해서는 <circle> 태그를 사용합니다. <circle> 태그는 SVG 이미지 내에서 원을 정의하고, 여러 속성을 통해 원의 크기와 위치, 스타일을 지정할 수 있습니다.

기본 구문

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

caption: SVG 코딩

속성 설명

• cx와 cy: 원의 중심점의 x좌표와 y좌표를 정의합니다. 이 값들은 SVG 캔버스 내에서의 위치를 결정합니다.
• r: 원의 반지름을 정의합니다.
• stroke: 원의 테두리 색상을 정의합니다.
• stroke-width: 원의 테두리 두께를 정의합니다.
• fill: 원의 내부 채우기 색상을 정의합니다.

예시

다음 예시는 반지름이 40, 중심점이 (50, 50)인 원을 그리고, 테두리는 검은색, 내부는 빨간색으로 채워진 원을 보여줍니다:

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

caption: 브라우저에서 확인한 SVG 원

 

SVG를 사용하여 원을 그릴 때, cx, cy, r 속성은 필수적으로 지정해야 합니다. stroke, stroke-width, fill 등의 스타일 속성은 원의 외관을 정의하기 위해 사용되며, 이들은 선택적으로 지정할 수 있습니다. SVG는 벡터 그래픽을 다루기 때문에, 그린 이미지는 확대해도 품질이 저하되지 않는 장점이 있습니다.