SVG 원형 프로그레스 바 원주 수식 공식과 CSS stroke-dashoffset 가이드

2026년 7월 23일

대시보드 통계 카드나 파일 업로드 대기 화면에서 원형 게이지로 진행률(%)을 표시하려면, 사각형 바처럼 width만 바꿔서는 안 됩니다. SVG 원의 둘레 길이를 계산해 stroke-dasharray와 stroke-dashoffset 값으로 넣어야 원하는 만큼 채워진 것처럼 보입니다. 크기(지름)나 선 두께, 목표 퍼센트가 바뀔 때마다 반지름부터 다시 구해 이 계산을 손으로 반복해야 하므로, 원리를 알아 두면 값이 왜 그렇게 나오는지 스스로 검증할 수 있습니다.

요약 ① 원형 프로그레스 바는 원 둘레(원주) 길이를 stroke-dasharray로 선언하고, 남은 구간만큼을 stroke-dashoffset으로 가려 진행률을 표현합니다. ② 크기(지름) 120px·선 두께 8px·진행률 75% 기준으로 반지름은 56px, 원주 ≈ 351.86px, stroke-dashoffset ≈ 87.96px가 됩니다. ③ 값을 직접 계산하지 않고 원 크기·두께·색상·진행률만 조절해 SVG·CSS 코드를 바로 받을 수도 있습니다.

원형 프로그레스 바를 만들 때 계산이 필요한 이유

일반 사각형 프로그레스 바는 채워진 부분의 너비(width)만 퍼센트로 바꾸면 되지만, 원형 바는 그렇게 되지 않습니다. SVG <circle> 요소는 테두리(stroke)를 실선으로 그리거나, stroke-dasharray로 점선처럼 끊어 그릴 수 있는데, 이 끊어지는 간격을 원 둘레 전체 길이와 맞추면 "선이 어디까지 그려지고 어디부터 비어 있는지"로 진행률을 표현할 수 있습니다. 그래서 원형 게이지를 만들려면 먼저 원 둘레(원주) 길이를 알아야 하고, 진행률에 맞춰 얼마만큼을 숨길지 계산해야 합니다.

SVG 원주 계산과 CSS 코드로 직접 만드는 방법

계산 순서는 두 단계입니다.

반지름(r) = (크기(지름) − 선 두께) ÷ 2
원주(C) = 2 × 원주율(π) × 반지름(r)
stroke-dashoffset = 원주(C) × (1 − 진행률(P) ÷ 100)

크기(지름) 120px, 선 두께 8px, 목표 진행률 75%를 예로 들면 이렇게 됩니다.

반지름: (120 − 8) ÷ 2 = 56px (선이 원의 중심선을 따라 그려지므로 선 두께의 절반만큼 안쪽으로 들어옵니다)
원주: 2 × 3.14159 × 56 ≈ 351.86px
stroke-dasharray: 351.86 (원 전체 둘레 길이를 그대로 선언)
stroke-dashoffset: 351.86 × (1 − 0.75) ≈ 87.96px (남은 25%만큼을 가려서 숨김 처리)

75% 진행률의 원형 프로그레스 바를 만드는 마크업과 CSS는 다음과 같습니다.

75%

.progress-ring { transform: rotate(-90deg); /* 12시 방향부터 채워지도록 시작점 회전 */ }

.progress-ring-bar { stroke-dasharray: 351.86; stroke-dashoffset: 87.96; /* 75% 진행 상태 / transition: stroke-dashoffset 0.8s ease-in-out; / 진행률(percentage) 값이 바뀔 때 부드럽게 이어짐 */ }

참고 매번 원주율과 반지름 수치를 계산기로 두드려 stroke-dashoffset 픽셀을 산출하지 않아도, 원의 크기·두께·색상·진행률(%)을 슬라이더로 조절하면서 SVG와 CSS 코드를 그대로 복사할 수 있습니다.

값을 직접 계산해 코드를 손으로 고치는 대신, 진행률과 스타일만 바꿔가며 결과를 바로 확인하고 싶다면 저희 도구로 확인하기.

CSS 원형 진행률 생성기

진행 퍼센트(%), 원 크기(지름), 게이지 두께 및 색상을 조절하여 최적화된 SVG 및 CSS 원형 차트 코드를 즉시 획득해 보세요.

진행률별 stroke-dashoffset 값과 디자인 팁

크기(지름) 120px, 선 두께 8px(반지름 56px, 원주 ≈ 351.86px)를 기준으로, 진행률에 따른 stroke-dashoffset 값은 다음과 같습니다.

진행률	stroke-dashoffset
25%	263.89px
50%	175.93px
75%	87.96px
100%	0px

디자인을 적용할 때 참고할 점은 두 가지입니다.

시작점을 12시 방향으로 돌리기: SVG <circle>의 기본 시작 위치는 3시 방향입니다. 12시부터 시계 방향으로 차오르게 하려면 SVG 요소에 transform: rotate(-90deg)를 지정합니다.
끝단을 둥글게 처리하기: 진행 게이지의 양 끝을 둥글리려면 stroke-linecap: round를 추가합니다. 인포그래픽처럼 부드러운 인상을 줍니다.

자주 쓰는 크기별 반지름과 원주 참고표

배지처럼 작은 원부터 큰 대시보드 카드까지, 크기(지름)와 선 두께 조합이 달라지면 반지름과 원주도 함께 바뀝니다. 반지름 = (지름 − 선 두께) ÷ 2 공식을 대입해 미리 값을 뽑아 두면, 화면 크기별로 값을 매번 새로 계산하지 않고 아래 표에서 바로 확인할 수 있습니다.

크기(지름)	선 두께	반지름	원주
80px	6px	37px	≈232.48px
120px	8px	56px	≈351.86px
160px	10px	75px	≈471.24px
200px	12px	94px	≈590.62px

같은 진행률이라도 크기가 커질수록 원주가 늘어나 stroke-dashoffset 값도 함께 커진다는 점에 유의합니다. 예를 들어 크기 200px·선 두께 12px 조합에서 진행률 75%라면, stroke-dashoffset은 590.62 × 0.25 ≈ 147.65px입니다.

정리

원형 프로그레스 바는 원주(C = 2 × π × r)를 stroke-dasharray로, 남은 구간을 stroke-dashoffset으로 표현합니다.
반지름(r)은 크기(지름)에서 선 두께를 뺀 값의 절반이며, stroke-dashoffset = 원주 × (1 − 진행률 ÷ 100) 공식으로 원하는 퍼센트의 값을 계산할 수 있습니다.
시작점 회전(rotate(-90deg))과 끝단 처리(stroke-linecap: round)는 디자인 완성도에 영향을 줍니다.
크기나 선 두께, 진행률이 자주 바뀌는 경우, 값을 직접 계산하는 대신 도구로 SVG·CSS 코드를 바로 받는 편이 빠릅니다.

CSS 원형 진행률 생성기

진행 퍼센트(%), 원 크기(지름), 게이지 두께 및 색상을 조절하여 최적화된 SVG 및 CSS 원형 차트 코드를 즉시 획득해 보세요.

📖 실제 사용자들이 겪는 현실적인 사연과 트러블

원형 프로그레스 바(Circular Progress Bar)를 개발하는 과정은 단순히 원 하나를 그리는 것으로 끝나지 않습니다. 다양한 프레임워크와 화면 해상도, 성능 제약 속에서 예상치 못한 문제들이 실무자들을 괴롭힙니다. 다음은 프론트엔드 실무 현장에서 수많은 개발자와 디자이너들이 경험한 생생한 트러블슈팅 사례 3가지입니다.

사연 1: 고해상도 레티나 디스플레이에서 캔버스(Canvas)의 한계를 깨달은 헬스 테크 대시보드 엔지니어

스타트업에서 피트니스 앱의 사용자 칼로리 소모량을 보여주는 대시보드를 담당하던 엔지니어 A씨는 초기에 HTML5의

사연 2: 뷰박스(viewBox) 경계선에 잘려버린 원형 차트 때문에 밤을 새운 주니어 개발자

입사 3개월 차 주니어 프론트엔드 개발자 B씨는 지름이 200px이고 선 두께(stroke-width)가 20px인 두꺼운 도넛형 프로그레스 바를 디자인 시안대로 구현하라는 미션을 받았습니다. B씨는 크기가 200px이므로 아무 생각 없이 SVG 요소의 반지름 속성을 r="100"으로 설정했습니다. 브라우저에서 결과를 확인한 순간, 원의 외곽선 상하좌우 10px 가량이 반듯하게 잘려나가 찌그러진 사각형처럼 보이는 기괴한 현상을 목격했습니다. 반나절의 디버깅 끝에 B씨는 SVG의 Stroke(선)가 패스(경로)를 기준으로 안팎 50%씩 걸쳐서 그려진다는 충격적인 사실을 알게 되었습니다. 즉, 선 두께가 20px이면 패스의 바깥쪽으로 10px, 안쪽으로 10px이 그려지는데, 반지름을 전체 공간인 100px로 잡으면 바깥쪽으로 그려져야 할 10px이 SVG viewBox 범위를 벗어나 클리핑(Clipping) 되어버린 것입니다. 올바른 반지름 공식은 r = (지름 - 두께) / 2 = (200 - 20) / 2 = 90이 되어야 한다는 것을 배운 뒤로는 절대 같은 실수를 반복하지 않고 있습니다.

사연 3: 무거운 Lottie 애니메이션을 걷어내고 85%의 번들 사이즈 다이어트에 성공한 SaaS 기업

엔터프라이즈 B2B 고객을 타겟으로 하는 SaaS 분석 플랫폼의 리드 개발자 C씨는, 대시보드의 메인 화면 로딩 속도가 느리다는 사용자 불만에 시달렸습니다. 원인을 분석해보니, 화려하게 빙글빙글 도는 원형 로딩 인디케이터와 퍼센티지 차트가 모두 디자이너가 추출해 준 8MB짜리 Lottie 애니메이션 JSON 파일로 떡칠되어 있었습니다. 웹팩 번들 사이즈를 엄청나게 잡아먹는 것은 물론이고, 로우엔드 기기에서는 CPU 스파이크(Throttle) 현상까지 일으켰습니다. C씨는 과감하게 모든 Lottie 파일을 삭제하고, 고작 1.2KB에 불과한 순수 SVG와 CSS stroke-dasharray 컴포넌트로 이를 전면 교체했습니다. 결과는 대성공이었습니다. 초기 로딩 번들 사이즈가 85% 이상 대폭 줄어들었으며, 복잡한 자바스크립트 파싱 과정이 사라져 렌더링 지연 시간(TBT: Total Blocking Time)이 눈에 띄게 개선되었습니다. 사용자의 디바이스 배터리 소모량까지 줄여주어, 가볍고 우아한 CSS 데이터 시각화의 강력함을 팀원 모두가 실감하는 계기가 되었습니다.

🔬 핵심 기술 메커니즘: SVG 원형 프로그레스 바의 구동 원리

SVG 원형 진행률 막대가 어떻게 수학적으로 계산되고, 어떻게 시각적으로 부드럽게 렌더링되는지 그 심층적인 메커니즘을 상세하게 파헤쳐 보겠습니다. 단순히 코드를 복사해서 붙여넣기만 하는 단계를 넘어, 브라우저가 화면에 원을 렌더링하는 정확한 원리를 이해해야 복잡한 응용이 가능합니다.

1. SVG Circle Stroke의 좌표 기하학과 반지름 계산식

SVG의 캔버스 역할을 하는 것은 뷰포트(Viewport)와 뷰박스(viewBox)입니다. 예를 들어 D x D (120 x 120px)의 공간을 가정한 좌표계를 생각해 봅시다. SVG에서 stroke(선)는 항상 그려진 경로(Path)의 중심선을 기준으로 뻗어 나갑니다. 즉, 선 두께(StrokeWidth)가 8px이라면 4px은 경로의 안쪽으로, 나머지 4px은 경로의 바깥쪽으로 영역을 차지합니다. 따라서 원이 화면 경계에 잘리지 않고 온전히 그려지려면, 지름을 120px로 만들고 싶을 때 실제 코딩해야 할 경로의 반지름은 그 절반인 60px에서 선 두께의 절반(4px)을 뺀 값이 되어야 합니다.

참반지름 공식 (True Radius Formula): $r = rac{D - ext{StrokeWidth}}{2} = rac{120 - 8}{2} = 56 ext{px}$

이렇게 얻은 반지름을 이용해 원의 전체 둘레 길이를 계산합니다. 원의 둘레, 즉 원주(Circumference)는 기하학의 가장 기본적인 공식에 의해 도출됩니다.

참원주 공식 (True Circumference Formula): $C = 2pi r = 2 imes 3.1415926535... imes 56 approx 351.858377 ext{px}$

이 수치(약 351.86)는 앞으로 진행률을 조절하는 가장 중요한 기준점이 됩니다.

2. CSS Dash Offset 렌더링 마스킹 물리학

SVG 선의 점선(dash) 기능을 활용하면 실선이 아닌 진행률 막대를 만들 수 있습니다. 핵심은 점선의 길이를 원주 전체 길이와 똑같이 만드는 것입니다.

stroke-dasharray: C C; 이 속성은 '선 그려짐 길이'와 '공백 길이'를 설정합니다. 여기서 C(351.86)를 넣으면, 하나의 긴 점선이 원 한 바퀴를 완벽하게 감싸게 됩니다.
stroke-dashoffset: $C imes (1 - rac{ ext{Progress}}{100})$ 이 속성은 점선이 시작되는 위치를 밀어내는(Offset) 역할을 합니다. 마치 가림막을 치는 것과 같은 물리적 마스킹 효과를 냅니다.
- 진행률 0% 일 때: Offset = C (351.86px). 점선이 원둘레만큼 완전히 뒤로 밀려나 0%의 텅 빈 트랙만 보입니다.
- 진행률 50% 일 때: Offset = 0.5C (175.93px). 절반만 밀려나므로, 원의 반쪽이 채워진 게이지가 시각화됩니다.
- 진행률 100% 일 때: Offset = 0px. 전혀 밀려나지 않아 점선이 처음부터 끝까지 가득 차, 완벽하게 닫힌 둥근 원이 완성됩니다.

3. 좌표계 회전 (Coordinate System Rotation)

SVG의 삼각함수 기본 좌표계에서, 0 라디안(radian) 즉 각도 0의 시작점은 3시 방향(우측, x=r, y=0)입니다. 하지만 우리가 일상적으로 보는 프로그레스 바나 시계는 대부분 정각 12시(최상단) 방향에서부터 시작하여 시계 방향으로 차오릅니다. 이 직관적인 UI를 구현하기 위해서는 렌더링된 SVG 요소를 반시계 방향으로 90도 회전시켜야 합니다.

transform: rotate(-90deg); 그리고 이때 회전의 축이 원의 정중앙이 되도록 transform-origin: 50% 50%; 또는 rotate(-90deg 60 60)와 같은 기준점을 반드시 설정해야 합니다. 이 설정이 누락되면 원이 엉뚱한 궤적을 그리며 뷰포트 밖으로 튕겨져 나가는 대참사가 발생합니다.

📊 상황별 비교표: 원형 프로그레스 구현 기법 매트릭스

웹에서 원형 진행 게이지를 그릴 수 있는 방법은 다양합니다. 각 기법이 가진 특징과 장단점을 비교하여 프로젝트 상황에 맞는 최적의 선택을 할 수 있습니다.

비교 항목	Pure SVG + stroke-dashoffset (추천)	CSS conic-gradient() + 마스크	HTML5 Canvas arc()	Animated GIF / Lottie	WebGL 셰이더
벡터 스케일링 선명도	무한 스케일링 (완벽히 깨끗함)	브라우저 렌더링에 따라 다름	고해상도(Retina) 처리 별도 필요	확대 시 깨지거나 파일 용량 폭증	매우 깨끗함 (단, 오버엔지니어링)
CSS 애니메이션(Transition) 지원	완벽 지원 (매끄럽고 단순함)	부분 지원 (@property 등 최신 스펙 필요)	미지원 (requestAnimationFrame으로 JS 수동 코딩)	Lottie 플레이어 의존	미지원 (JS 렌더 루프 필요)
초기 로딩 번들 및 파일 크기	가장 가벼움 (약 1KB 미만)	가장 가벼움	보통 (캔버스 제어 로직 필요)	매우 무거움 (수백 KB ~ MB)	무거움 (Three.js 등 라이브러리)
구현 난이도 및 유지보수	쉬움 (수학 공식만 알면 됨)	매우 쉬움	다소 복잡함	디자이너 의존도 매우 높음	매우 어려움
크로스 브라우저 호환성	모든 브라우저 완벽 지원	구형 브라우저 제약 있음	우수함	라이브러리 종속적	저사양 기기에서 발열 유발

비교 요약: 가장 널리 쓰이고 성능상 이점이 큰 방법은 단연코 '순수 SVG 기반 방식'입니다. 용량이 깃털처럼 가볍고, CSS 애니메이션과의 궁합이 환상적이며, 어떠한 화면에서도 픽셀 하나 깨지지 않는 뚜렷함을 자랑합니다.

⚠️ 원형 프로그레스 바 제작 시 흔히 저지르는 5가지 실수

원형 차트를 만들면서 수많은 프론트엔드 개발자들이 무심코 범하는 치명적인 오류들이 있습니다. 이 다섯 가지만 체크해도 디버깅 시간을 획기적으로 줄일 수 있습니다.

선 두께를 고려하지 않은 반지름 계산 (Clipping 오류): 전체 지름을 2로 나누기만 하고 선 두께(stroke-width)의 절반을 빼지 않는 실수입니다. viewBox 밖으로 테두리가 밀려나 원의 상하좌우가 납작하게 잘려 보이는 원인이 됩니다. 항상 $r = (D - S)/2$ 공식을 잊지 마세요.
회전 시 기준점(transform-origin) 누락: SVG 요소를 12시 방향으로 돌리기 위해 rotate(-90deg)를 적용할 때, transform-origin: center; (또는 50% 50%)를 빼먹는 경우입니다. 원이 중심축을 잃고 화면 왼쪽 상단으로 사라져 버립니다.
거친 끝단 처리 방치 (stroke-linecap 누락): 선의 끝을 둥글게 만들어주는 stroke-linecap: round;를 빼먹으면, 진행 바의 양 끝이 무를 자른 듯 뭉툭하게 각이 집니다. 특히 진행률이 낮을 때 디자인 완성도를 깎아먹는 주범입니다.
부정확한 원주율 사용에 따른 오차 발생: π 값을 단순히 3.14로만 계산하면, 둘레 픽셀 값이 미세하게 어긋납니다. 결과적으로 100% 진행률에서도 아주 미세한 틈(Gap)이 생겨 선이 완벽히 닫히지 않는 버그가 생깁니다. JavaScript의 Math.PI를 쓰거나 최소 소수점 4자리(3.1416) 이상을 사용해야 합니다.
will-change 속성 미적용으로 인한 애니메이션 뚝뚝 끊김: 데이터가 쉴 새 없이 변하는 복잡한 대시보드나 실시간 모니터링 시스템에서, CSS 애니메이션에 will-change: stroke-dashoffset; 최적화를 해주지 않으면 브라우저 렌더링 엔진에 과부하가 걸려 버벅일 수 있습니다.

💡 5-step 무결점 SVG 원형 프로그레스 바 제작 워크플로우

가장 안정적이고 정확하게 컴포넌트를 설계하기 위한 단계별 가이드라인입니다.

1단계: SVG 캔버스 크기 및 선 두께 확정 컴포넌트가 화면에서 차지할 전체 크기(D)와 그려질 선의 두께(S)를 결정합니다. 예: D = 120px, S = 8px.
2단계: 수학적 참반지름(r) 도출 뷰박스 내에서 잘리지 않기 위해 $r = (D - S)/2$를 계산합니다. 예: $(120 - 8)/2 = 56$.
3단계: 원주(C, 전체 둘레 길이) 계산 및 변수 할당 $C = 2 imes pi imes r$ 공식으로 원주를 구합니다. 예: $2 imes 3.14159 imes 56 = 351.86$. 이 값을 CSS나 JS 변수(CSS Custom Property)로 저장해 둡니다.
4단계: 백그라운드 트랙과 포그라운드(진행) 원 배치 2개의 태그를 사용해 하나는 회색조의 옅은 배경 선으로, 다른 하나는 브랜드 컬러를 적용한 진행 선으로 만듭니다. 앞서 구한 r, cx, cy 속성을 부여합니다.
5단계: CSS 트랜지션 및 Dash Offset 동적 수식 적용 포그라운드 에 stroke-dasharray: 351.86;을 지정하고, JavaScript 프레임워크(React, Vue 등)를 통해 전달된 퍼센트(P) 값에 따라 stroke-dashoffset 속성을 동적으로 업데이트합니다. 이때 transition: stroke-dashoffset 0.6s ease-out;을 더해 애니메이션을 완성합니다.

🔍 시각화 마스터를 위한 7가지 전문가 SVG 테크닉 팁

단순한 구현을 넘어, 유저 경험(UX)을 극대화하는 7가지 고급 팁입니다.

현대적이고 부드러운 감성의 끝단 처리: 디자인이 각지고 투박해 보이는 것을 막기 위해 반드시 stroke-linecap="round" 속성을 챙기세요. 원형 디자인의 트렌디함이 살아납니다.
다중 색상 그라디언트(Multi-stop Gradient) 적용: 단색 선 대신 내부에 나 를 정의한 뒤, stroke="url(#myGradient)" 형태로 적용하면 생동감 넘치는 게이지를 만들 수 있습니다.
가운데 정렬된 텍스트 앵커 활용: 태그를 사용해 진행 퍼센트를 표시할 때, dominant-baseline="central"과 text-anchor="middle" 속성을 주면 x="50%" y="50%" 만으로 완벽한 상하좌우 정렬이 이루어집니다.
오류 없는 인플레이스 회전 보장: 회전 애니메이션 시 요소가 이탈하지 않도록 transform-origin: 50% 50%;를 설정하거나, CSS 대신 SVG 내부 속성인 transform="rotate(-90 cx cy)"를 직접 사용하세요.
계기판형 반원(Semi-circular Speedometer) 게이지 응용: 360도 원이 아니라 자동차 속도계 같은 180도 반원 게이지를 만들고 싶다면, stroke-dasharray를 전체 원주가 아닌 절반(0.5C)으로 제한하고 시작점 회전 각도를 조정하면 손쉽게 구현됩니다.
부드러운 데이터 스트림 업데이트: 주식 호가나 센서 모니터링 등 데이터가 1초에도 여러 번 바뀔 때는 ease-out 같은 일반 이징 함수 대신 linear를 사용하거나, D3.js 기반의 보간법(Interpolation)을 곁들이면 화면이 훨씬 부드럽습니다.
보일러플레이트 코드 제너레이터 활용: 크기와 굵기를 바꿀 때마다 이 모든 수식을 다시 타이핑할 필요 없이, 본 페이지 상단의 생성기 도구를 이용해 즉각적으로 완성된 코드를 뽑아 쓰는 것이 실무자의 지혜입니다.

🎯 렌더링 기술 선택을 위한 의사결정 트리 (Decision Tree)

언제 SVG를 쓰고, 언제 다른 기술을 써야 할지 한눈에 파악하세요.

Q: 화면을 확대하거나 축소했을 때 테두리 라인이 완벽하게 매끄러워야 합니까?
- No ➔ Canvas 또는 WebGL 고려.
- Yes ➔ 2번으로 이동.
Q: 진행 상태가 퍼센트(%)에 따라 부드럽게 차오르는 애니메이션이 필요합니까?
- No ➔ 순수 CSS conic-gradient()가 가장 간단함.
- Yes ➔ 3번으로 이동.
Q: 리액트, 뷰 등 프레임워크와 결합해 번들 사이즈를 최소화하고 싶습니까?
- No ➔ Lottie 애니메이션 또는 서드파티 라이브러리 사용.
- Yes ➔ 정답: SVG + stroke-dashoffset 기법 (가장 완벽한 조화)

이 의사결정 트리를 통해 대부분의 최신 웹 UI 환경에서는 수학적 SVG 기반 접근 방식이 정답이라는 결론에 도달하게 됩니다.

📑 용어 해설 치트시트 (Terminology Cheatsheet)

웹 시각화를 위한 필수 용어들을 짧게 정리했습니다. 코드 리뷰나 커뮤니케이션 시 헷갈리지 않게 활용하세요.

원주 (Circumference): 원의 테두리 전체 길이를 의미합니다. 공식은 2 × π × r 입니다. 이 길이를 기준으로 선의 길이를 결정합니다.
stroke-dasharray: SVG 선을 점선으로 만들어주는 속성입니다. 이 값을 원주와 동일하게 주면, 하나의 거대한 점선 조각이 만들어집니다.
stroke-dashoffset: 점선이 시작되는 위치를 얼만큼 밀어낼지 결정합니다. 진행률 0%일 때는 원주만큼 꽉 밀어내고, 100%일 때는 0으로 만듭니다.
stroke-linecap: round: 선의 시작점과 끝부분을 네모난 직각이 아니라 둥근 곡선으로 부드럽게 렌더링하는 속성입니다.
viewBox: SVG 내에서 그래픽이 그려지는 논리적인 캔버스 비율과 좌표계를 설정하는 속성으로, 이 바깥으로 나가는 그래픽은 잘려(Clip) 보이지 않습니다.
벡터 스케일링 (Vector Scaling): 이미지를 점(Pixel)의 집합이 아닌 수학 공식으로 그리기 때문에, 화면을 무한대로 확대해도 깨짐이 발생하지 않는 특성입니다.

자주 묻는 질문

단순한 사용법을 넘어서, 기술의 본질을 꿰뚫어 보는 3가지 심층 질문과 명쾌한 답변입니다.

Q1. 왜 SVG의 반지름(r)을 계산할 때 전체 캔버스 지름의 절반에서 선 두께(stroke-width)의 절반을 빼야만 하나요?

A1. 브라우저의 SVG 렌더링 엔진은 선(Stroke)을 그릴 때 기준이 되는 보이지 않는 중심선(Path)을 따라 정확히 양쪽으로 똑같은 굵기만큼 번지게 그립니다. 만약 선 두께가 20px이라면, 중심선 안쪽으로 10px, 바깥쪽으로 10px이 그려집니다. 만약 반지름을 캔버스의 끝부분에 딱 맞추면 바깥쪽으로 그려져야 할 10px 몫의 선이 SVG의 캔버스(viewBox) 경계 밖으로 밀려나 화면에 표시되지 않고 싹둑 잘려버립니다. 이를 방지하기 위해 중심선 자체를 아예 선 두께의 절반만큼 안쪽으로 밀어 넣어 모든 선이 안전 영역 안에 들어오도록 하는 것입니다.

Q2. SVG 원형 궤도에 단색이 아니라 화려한 다중 색상 그라디언트를 입히려면 어떻게 해야 합니까?

A2. 일반 CSS의 background-image 속성으로는 SVG 내부의 선 색상을 제어할 수 없습니다. 대신 SVG 마크업 내부 상단에 요소를 선언하고 그 안에 나 태그를 생성합니다. 그 안에 와 같이 여러 색상의 지점을 정의한 뒤, 그라디언트 요소에 id (예: id="myGrad")를 부여합니다. 마지막으로 의 stroke 속성에 그라디언트의 아이디를 참조하는 방식인 stroke="url(#myGrad)"를 선언하면 선을 따라 부드럽게 이어지는 그라디언트를 완성할 수 있습니다.

Q3. 순수 CSS인 conic-gradient() 함수로 그리는 원형 차트와 SVG 기반 방식은 근본적으로 어떤 차이가 있나요?

A3. CSS의 conic-gradient()는 요소의 배경(background)을 피자 조각처럼 원뿔 형태로 색칠해 나가는 방식입니다. 코드가 극단적으로 짧고 구현이 쉬운 장점이 있지만, 치명적인 단점이 있습니다. 바로 진행률이 변할 때 자연스럽게 스르륵 차오르는 CSS transition(애니메이션) 효과를 주기 매우 까다롭다는 것입니다. (최신 @property 스펙을 쓰면 가능하지만 구형 브라우저 지원이 끊깁니다). 반면 SVG stroke-dashoffset 기법은 거의 모든 브라우저에서 압도적으로 매끄러운 60fps 애니메이션을 기본적으로 지원하며, 테두리 끝단을 둥글게(round) 처리하는 디테일 구현이 훨씬 쉽습니다. 동적이고 아름다운 UI에는 항상 SVG 방식이 우위를 점합니다.

;