SVG 스트로크-투-필 변환기

스트로크가 적용된 도형이 포함된 SVG를 붙여넣으면, 각 스트로크가 동일한 시각적 형태와 두께를 가진 채워진 패스로 대체된 동등한 SVG를 받을 수 있습니다. 채우기만 안정적으로 렌더링하는 아이콘 시스템이나 디자인 도구에 유용하며, 추가적인 벡터 편집 전에 SVG를 채우기 전용 패스로 축소할 때도 유용합니다.

이 도구는 무엇인가요?

일부 렌더링 파이프라인 — 특정 아이콘 폰트 생성기, 일부 게임 엔진, 오래된 PDF 내보내기 도구, 채우기만 합성하는 도구 — 은 SVG 스트로크를 제대로 처리하지 못하거나 아예 처리하지 못합니다. 스트로크를 동일한 두께의 채워진 도형으로 변환하면 이 문제를 완전히 피할 수 있습니다. 시각적 결과는 동일하지만, 스트로크가 있는 선이 아니라 하나의 채워진 패스로 표현됩니다.

이 도구는 각 도형의 윤곽선을 따라 많은 점을 샘플링하고(브라우저 자체의 path-length API를 사용하며, 이는 SVG 애니메이션이 사용하는 것과 동일한 메커니즘입니다), 스트로크 두께의 절반 거리만큼 양쪽에 평행한 오프셋 선 두 개를 구성한 뒤, 이를 닫아 하나의 채워진 다각형으로 만드는 방식으로 작동합니다.

왜 사용해야 할까요?

<path>뿐만 아니라 path, line, polyline, polygon, rect, circle, ellipse 요소 모두에 대해 하나의 통합된 샘플링 방식으로 작동합니다.
원본 도형 자체에 채우기가 있었다면, 새로운 스트로크 채우기 아래에 별도의 레이어로 보존하므로 채우기와 스트로크를 동시에 가진 도형도 올바르게 변환됩니다.
결과를 복사하기 전에 변환 전/후를 나란히 비교하는 미리보기를 제공합니다.
브라우저 안에서만 완전히 실행됩니다 — 붙여넣은 SVG는 어디에도 업로드되지 않습니다.
무료·즉시 변환이며, 브라우저가 렌더링할 수 있는 범위를 넘는 파일 크기 제한이 없습니다.

사용 방법

SVG 마크업을 텍스트 박스에 붙여넣으세요 (작동하는 예제가 미리 입력되어 있습니다).
"Convert strokes to fills"를 클릭하세요.
변환 전/후 미리보기를 비교하여 결과가 올바른지 확인하세요.
"Copy SVG"를 클릭하여 변환된, 스트로크가 없는 마크업을 복사하세요.

예시

입력

<path d="M20 100 Q100 20 180 100" fill="none" stroke="#3B82F6" stroke-width="12"/>

결과

원본 곡선의 양쪽을 12 단위 간격으로 따라가는 윤곽선을 가진 단일 <path fill="#3B82F6">, stroke 속성은 전혀 없음.

곡선의 형태가 보존되는 이유는 이 도구가 제어점만이 아니라 실제로 렌더링된 패스를 따라 연속적으로 점을 샘플링하기 때문입니다.

자주 묻는 질문

왜 날카로운 모서리가 뾰족하게(miter) 유지되지 않고 둥글게 나오나요?

이는 샘플링 방식의 알려진, 의도적인 단순화입니다. 패스를 따라 촘촘하게 점을 샘플링하면 원래의 stroke-linejoin이나 stroke-linecap 값과 관계없이 자연스럽게 둥근 연결부와 끝단이 만들어집니다. 정확한 miter나 bevel 연결을 재구성하려면 이 도구가 구현하지 않은, 다른 더 복잡한 알고리즘(각 꼭짓점에서 선분 교차 계산)이 필요합니다. 대부분의 아이콘과 일러스트 용도에서는 시각적 차이가 미미하지만, 정확한 miter 연결이 필요하다면 전용 벡터 편집기의 "스트로크 윤곽선화" 기능이 더 정확합니다.

점선 스트로크(stroke-dasharray)도 처리하나요?

아니요 — 이 도구는 모든 스트로크를 실선으로 취급하고 stroke-dasharray/stroke-dashoffset를 무시합니다. 점선 스트로크는 실선인 것처럼 변환되어 외관이 달라집니다. SVG에 점선 스트로크가 있다면, 이 도구는 해당 도형에 적합하지 않습니다.

왜 아무것도 변환되지 않았나요?

이 도구는 속성이든 요소 자체의 style이든, 스트로크 색상("none"이 아닌 값)과 양수의 stroke-width를 동시에 가진 요소만 변환합니다. SVG가 이 도구의 독립된 미리보기 안에서 브라우저가 해석할 수 없는 외부 CSS 클래스를 통해 스트로크를 설정하거나, 클래스를 참조하는 <style> 블록을 통해 설정한다면 계산된 스타일이 올바르게 해석되지 않을 수 있습니다 — 대신 도형에 stroke와 stroke-width를 직접 속성으로 설정해 보세요.

언제 스트로크를 채우기로 변환해야 하고, 언제 스트로크를 유지해야 하나요?

아직 디자인 중이라면 스트로크를 유지하세요 — stroke-width는 편집 가능한 단일 숫자로 남아 있지만, 변환 후에는 이를 잃게 됩니다. 스트로크를 제대로 처리하지 못하는 파이프라인(아이콘 폰트 생성기, 특정 게임 엔진, PDF 내보내기 도구 등)으로 내보낼 경우, 변환은 최종 내보내기 단계로 수행하고 변환이 단방향이므로 원본 스트로크 파일은 편집 가능한 소스로 보관하세요.

변환하면 SVG 파일이 더 커지나요?

대체로 커집니다 — 몇 개의 제어점으로 정의된 스트로크 곡선이 수백 개의 샘플링된 선분으로 이루어진 채워진 윤곽선이 되므로, 패스 데이터가 상당히 늘어납니다. 아이콘의 경우 실무에서는 거의 문제가 되지 않지만, 크기가 걱정된다면 변환 후 결과물을 SVG 최적화 도구에 통과시켜 좌표 정밀도를 줄이세요.

stroke-opacity가 변환된 채우기에 그대로 반영되나요?

아니요 — 변환된 패스는 스트로크의 색상을 채우기 색으로 사용하지만 불투명도는 완전 불투명입니다. 원본 도형의 stroke-opacity 값은 사라집니다. 투명도를 유지해야 한다면, 결과를 복사한 뒤 변환된 패스에 동일한 값으로 fill-opacity를 수동으로 추가하세요.