개발자 도구 / 19

SVG 경로 명령 시각화 및 검사 도구

SVG 경로 데이터(d 속성)를 토큰별 분석, 명령 매개변수, 시각적 렌더링으로 확인합니다.

SVG 경로 명령 시각화 및 검사 도구: TOEA는 경로 명령(M, L, C, Q, A, Z)을 토큰으로 분리하고 대화형 SVG 캔버스 미리보기를 렌더링합니다. 서버에 파일을 전혀 업로드하지 않고 브라우저에서 100% 로컬로 실행됩니다.

카테고리
개발자 도구
실행 횟수
브라우저에서
비용
무료 · 가입 불필요
사용 가능 여부
사용 가능

경로 명령어 (4 토큰)

MMove To (Absolute)M 10 80
QQuadratic Bezier Curve (Absolute)Q 52.5 10, 95 80
TSmooth Quadratic Bezier (Absolute)T 180 80
ZClose PathZ

명령 읽기

대문자 명령은 절대 좌표를 사용하고, 소문자 명령은 현재 지점을 기준으로 상대적으로 이동합니다. 각 명령은 정해진 개수의 값을 받습니다. H와 V는 1개, M, L, T는 2개, S와 Q는 4개, C는 6개, A는 7개이며 Z는 받지 않습니다. 값이 더 있으면 명령을 반복하고, M 뒤의 추가 좌표 쌍은 L로 처리됩니다. 호의 7개 값은 두 반지름, 회전, 큰 호 또는 작은 호와 방향을 선택하는 두 플래그, 그리고 끝점입니다.

미리보기 크기와 축약된 숫자

미리보기에는 원점부터 200 × 200 단위 영역이 표시됩니다. 24단위 격자에 그린 아이콘은 왼쪽 위에 작게 나타나고, 512단위 아이콘 세트의 경로는 가장자리 밖으로 나갑니다. 이는 경로가 아니라 캔버스의 크기 때문입니다.

최적화 도구는 구분 기호를 생략해 두 숫자를 M10-5 또는 .5.5처럼 작성하는 경우가 많습니다. 분석 결과는 브라우저와 같은 방식으로 읽습니다. 빼기 기호나 두 번째 소수점은 새 숫자의 시작이므로 .5.5는 0.5와 0.5로 해석됩니다. 호 플래그는 한 자리 숫자이므로 a5 5 0 015 5에서 플래그는 0과 1이고 끝점은 5 5입니다. 읽는 대신 도형을 변경하려면 SVG 편집기에서 여십시오.

사용 방법

  1. SVG 경로 데이터(예: M10 10 L90 90 Z)를 붙여넣습니다.
  2. 명령 토큰과 설명을 검사합니다.
  3. 렌더링된 벡터 경로 미리보기를 확인합니다.

개인정보 보호 및 제한사항

처리는 100% 브라우저에서 실행되며 데이터를 보관하지 않습니다.

관련 도구

자주 묻는 질문

어떤 SVG 경로 명령을 분석할 수 있나요?

MoveTo, LineTo, Cubic Bezier, Quadratic Bezier, Elliptical Arc, ClosePath를 지원합니다(절대 좌표 및 상대 좌표).

무료 도구 · 브라우저에서회 실행 · 계정 불필요