XMLSVGFORMATTER

XML & SVG 포맷터

XML 및 SVG 코드를 정리하고 실시간 SVG 미리보기를 제공합니다.

INPUT

0 lines

OUTPUT

도구 설명 및 사용 방법

XML 형식 데이터의 계층 관계를 파악해 가지런히 가시화하며, 특히 SVG 데이터 파일의 경우 화면에 실제 그래픽 출력 화면을 함께 나타내어 주는 입체적 포맷터입니다.

사용 단계

XML 또는 SVG 소스 텍스트를 좌측의 소스 입력창에 삽입합니다.

들여쓰기 유형에 맞추어 태그 정렬이 이뤄지며 문법 태그 누락이 없는지 모니터링됩니다.

업로드한 코드가 SVG 마크업일 경우, 실시간 벡터 프리뷰어로 완성된 그래픽 모양새를 우측 패널에서 육안 확인합니다.

완벽하게 서식 정리된 XML/SVG 결과를 복사하거나 다운로드하여 이용합니다.

작동 원리 및 상세 설명

XML & SVG Formatter는 DOM Parser 인터페이스를 활용해 텍스트를 XML 문서 트리 구조로 해석합니다. 각 노드의 네스트 뎁스(Depth) 정보를 추적하며, 여는 태그, 자식 노드 그룹, 닫는 태그를 수직 전개하고 특성 속성(Attributes)들을 가독성 높게 개행 배치하여 조립해 냅니다. SVG 데이터의 경우 실시간 렌더러가 태그 내용을 직접 브라우저 인라인 영역에 바인딩하여 백터 그래픽 화면을 구현합니다.

자주 묻는 질문 (FAQ)

SVG 프리뷰 화면이 아무것도 보이지 않는 이유는 무엇인가요?

입력된 SVG 코드의 XML 문법 태그가 누락되었거나, viewBox 속성 및 너비/높이 크기가 지정되지 않아 영역이 축소되었을 수 있습니다. 코드 문법 오류 체크창을 살피어 태그 짝을 맞춰 주십시오.

네임스페이스를 포함한 복합 XML도 정렬이 되나요?

예, SOAP 메시지나 안드로이드 레이아웃 파일 등 네임스페이스 기호(:)를 품은 모든 구조적 XML 구문을 계층별 들여쓰기로 깔끔하게 정렬해 줍니다.

코드 사용 예시

정렬된 SVG 마크업 코드 예시

xml

<!-- SVG Vector Graphic -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="#3b82f6" />
</svg>

루트 XML 구조와 닫는 원소 태그가 탭 사이즈(2 spaces) 깊이로 들여쓰기 정렬된 코드입니다.