XMLSVGFORMATTER

XML & SVG 포맷터

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

INPUT

0 lines

OUTPUT

도구 설명 및 사용 방법

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

사용 단계

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

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

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

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

작동 원리 및 상세 설명

XML & SVG Formatter는 XML 1.0 / 1.1의 well-formedness 규칙과 SVG 1.1/2.0 스펙을 기반으로 동작합니다. 브라우저의 DOMParser를 사용해 문자열을 파싱하고, 다시 XMLSerializer 또는 커스텀 직렬화 로직으로 일관된 들여쓰기와 속성 순서를 가진 문자열로 재구성합니다. SVG의 경우 추가로 <svg> 요소를 실제 DOM에 삽입하여 벡터 그래픽을 실시간으로 렌더링합니다. SVG 최적화의 핵심은 메타데이터(<metadata>, <desc> 불필요 버전), 편집기 잔재 속성, 기본값(예: fill="black"이 기본인 경우), 과도한 공백 제거입니다. 아이콘 시스템, 로고, 인라인 그래픽이 많은 현대 웹앱에서는 이 과정이 번들 크기와 렌더링 성능에 직접적인 영향을 줍니다. 모든 처리는 클라이언트 로컬에서 이루어지므로, 아직 공개되지 않은 디자인 자산이나 내부 XML 스키마도 외부 유출 없이 안전하게 포맷 및 미리보기할 수 있습니다.

자주 묻는 질문 (FAQ)

SVG를 최적화하면 파일 크기가 얼마나 줄어드나요?

불필요한 메타데이터, 주석, 기본값 속성, 공백 등을 제거하면 보통 20~60% 이상 용량 절감이 가능합니다. 특히 여러 아이콘을 모은 sprite나 개별 아이콘 세트에서 효과가 큽니다.

SVG에 <script>나 외부 참조가 포함된 경우 안전한가요?

본 도구는 포맷팅 + 프리뷰만 제공합니다. 악성 스크립트가 포함된 SVG를 직접 렌더링하면 보안 위험이 있을 수 있으므로, 신뢰할 수 없는 출처의 SVG는 별도의 sanitization(예: DOMPurify의 SVG 모드)을 거친 후 사용하세요.

내 XML/SVG 데이터가 서버로 전송되나요?

전송되지 않습니다. 파싱, 들여쓰기, SVG 렌더링 모두 브라우저 내부에서만 수행됩니다. 디자인 자산이나 내부 스키마도 안전하게 처리하세요.

코드 사용 예시

최적화된 SVG를 React 컴포넌트로 사용

jsx

// 1. 도구로 SVG를 정리한 후 복사
// 2. React 컴포넌트로 변환 (또는 svgr 사용)

const CheckIcon = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
    <path d="M20 6L9 17l-5-5" strokeWidth="2" />
  </svg>
);

// 또는 svgr CLI / Vite 플러그인으로 자동 JSX 변환
// npx @svgr/cli --icon --out-dir ./src/icons ./assets/*.svg

실제 아이콘 시스템 구축 시 온라인으로 1차 정리한 뒤, svgr이나 빌드 플러그인을 통해 JSX 컴포넌트로 변환하는 일반적인 개발 흐름입니다.