SVG 경로 편집기
무료 온라인 서비스 SVG Path Editor 설치가 필요 없는 도구
SVG 경로 편집기 소개
SVG 경로 편집기는 SVG 경로의 d 속성을 작성하고 다듬으며 도형이 실시간으로 업데이트되는 것을 볼 수 있게 해줍니다. 경로 문자열을 입력하거나 붙여넣으면 미리보기가 편집에 따라 다시 그려지고, 보기는 좌표에 맞춰 자동으로 맞춰집니다. 선과 채우기 색과 선 너비를 설정하고, 완성된 경로를 복사하고, 내장된 명령 참조를 열 수 있습니다. 모든 작업은 브라우저에서 처리되며 아무것도 업로드되지 않습니다.
사용 방법
1. 입력란에 경로 데이터를 입력하거나 붙여넣습니다 2. 선 색, 채우기 색, 선 너비를 설정합니다 3. 실시간으로 업데이트되는 미리보기를 확인합니다 4. 필요하면 명령 참조를 엽니다 5. 복사를 클릭해 완성된 경로 문자열을 가져옵니다
최상의 결과를 위한 팁
경로는 M으로 이동, L로 선, C로 곡선을 그리는 등 좌표를 가진 명령의 나열입니다. 대문자 명령은 절대 좌표와 정확한 위치를 사용하고, 소문자는 이전 점을 기준으로 한 상대 좌표를 사용합니다. 보기는 경로의 숫자를 훑어 자동으로 맞춰지므로, 도형이 잘려 보이면 여백을 추가하거나 좌표를 확인하세요. 호, 베지어 등 명령의 정확한 문법은 참조 카드에서 확인할 수 있습니다.
▶d 속성이란 무엇인가요?
SVG 경로를 설명하는 데이터 문자열로, 그리기 명령과 좌표의 목록입니다. 편집기는 그 문자열을 받아 정의된 도형을 렌더링합니다.
▶미리보기는 경로에 어떻게 맞춰지나요?
경로의 모든 숫자를 훑어 가장 작은 x, y와 가장 큰 x, y를 찾은 뒤, 작은 여백을 더해 보기 상자를 만들어 도형 전체가 보이게 합니다.
▶대문자와 소문자 명령의 차이는?
M, L 같은 대문자는 원점 기준 절대 좌표를 사용합니다. m, l 같은 소문자는 이전 점 기준 상대 좌표를 사용합니다.
▶내 경로를 검증하나요?
브라우저의 SVG 엔진으로 입력한 대로 렌더링하므로, 구문 오류는 누락되거나 이상한 도형으로 나타납니다. 명령 참조가 실수를 찾고 고치는 데 도움을 줍니다.
▶결과를 복사할 수 있나요?
네. 복사 버튼이 경로 문자열을 클립보드에 써서 SVG 파일이나 소스 코드에 붙여넣을 수 있게 합니다. 다시 시작하려면 지우기 버튼도 있습니다.
이 도구가 당신에게 도움이 되었다면, 저에게 커피 한 잔 사주세요.
제게 커피 한 잔 사주세요.