OPTIMIZERREACT JSXFORMATTING

SVG 최적화 및 뷰어

SVG 코드를 실시간 렌더링하고 메타데이터 제거 및 React JSX 형태로 변환합니다.

SVG 원본 코드 입력

출력 포맷

도구 설명 및 사용 방법

SVG 코드를 실시간 렌더링하고 메타데이터 제거 및 React JSX 형태로 변환합니다.

사용 단계

SVG 원본 코드를 편집 창에 적어 넣거나 샘플 데이터를 로드합니다.

최적화 처리를 거치며 절감된 바이트 용량을 살핍니다.

리액트 가용 컴포넌트(React JSX) 탭을 선택해 소스 코드를 추출합니다.

미리보기 창의 벡터 그래픽 렌더링 상태를 육안 검사합니다.

작동 원리 및 상세 설명

SVG Optimizer & Viewer는 XML 노드 구조 클리닝 필터에 기반합니다. SVG 코드를 DOM 노드로 파싱해 메타태그와 불용 주석 속성을 필터링 소거하고 좌표계 숫자의 소수점 아래 자릿수를 단순화하여 용량을 낮춥니다. JSX 뷰어는 정규식 치환을 통해 스타일 맵과 하이픈형 속성명들을 리액트 전용 낙타표기법(camelCase)으로 파싱해 출력합니다.

자주 묻는 질문 (FAQ)

최적화 과정에서 코드의 무엇이 소거되나요?

SVG 생성 툴(일러스트레이터, 피그마 등)이 추가한 XML 선언 헤더, 제작 프로그램 메타데이터 주석, 불필요한 공백 및 중복 패스(Path) 속성 등을 소거해 그래픽 해상도 손상 없이 용량만 줄여줍니다.

React 컴포넌트 JSX 변환은 왜 필요한가요?

SVG 코드를 그대로 리액트에 넣으면 class, stroke-width 등 HTML 전용 속성명이 리액트의 camelCase 스펙(className, strokeWidth)과 충돌하여 에러를 냅니다. 변환기는 이를 리액트가 인지하도록 깨끗하게 치환해 줍니다.

코드 사용 예시

최적화 및 React 컴포넌트로 변환된 SVG 코드 예시

typescript

import React from 'react';

export const CircleIcon = (props) => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} {...props}>
    <circle cx={12} cy={12} r={10} />
  </svg>
);

리액트 컴포넌트로 규격화되고 JSX 속성명 변환 및 props 바인딩이 보강된 최종 소스 코드입니다.