SVG 최적화 도구
SVG를 최적화하고 메타데이터와 스크립트를 제거하며 React JSX로 변환하세요.
SVG 입력
SVG 파일을 여기에 드래그 앤 드롭하세요.
옵션
출력
Input: 0 bytes
Output: 0 bytes
SVG 배경 CSS
미리보기
JSX 출력에 미리보기를 사용할 수 없습니다.
온라인 SVG 최적화 프로그램을 사용하는 이유는 무엇입니까?
확장 가능한 벡터 그래픽(SVG)은 현대 웹 디자인에 필수적이며 모든 해상도에서 선명한 시각 효과를 제공합니다. 그러나 Illustrator, Figma 또는 Sketch와 같은 도구에서 내보낸 원시 SVG 파일에는 파일 크기를 늘리는 불필요한 메타데이터, 주석 및 숨겨진 속성이 포함되어 있는 경우가 많습니다. SVG Pro 도구는 SVG 정리, 축소 및 최적화를 사용하여 더 빠른 페이지 로드와 더 깔끔한 코드베이스를 제공합니다.
개발자를 위한 기능
- SVG에서 JSX로 변환: 표준 SVG 속성(예:
class,stroke-width)을 React 호환 JSX(className,strokeWidth)로 자동 변환합니다. Next.js 및 React 앱에 적합합니다. - 보안 삭제: 사용자가 업로드한 SVG를 사용할 때 XSS 공격을 방지하기 위해
<script>태그 및 인라인 이벤트 핸들러(onclick등)와 같은 악성 코드를 제거합니다. - CSS 배경 생성기: SVG를 CSS 배경 이미지로 사용하기 위해 최적화된 데이터 URI 조각을 즉시 생성합니다.
최적화 기술
- 메타데이터 제거: 브라우저에 필요하지 않은 XML 헤더, 문서 유형 및 편집기 메타데이터(Adobe Illustrator, Inkscape)를 제거합니다.
- 깨끗한 속성: 명시적인 기본값과 쓸모 없는 ID를 제거하여 파일 크기를 줄입니다.
- 구조 축소: 주석을 제거하고 공백을 안전하게 축소합니다.
자주 묻는 질문
SVG를 React 구성 요소로 어떻게 변환합니까?
SVG를 업로드하거나 코드를 붙여넣은 다음 "JSX로 변환" 옵션을 확인하세요. 이 도구는 camelCase 속성을 적용하고 class를 className로 대체하여 바로 붙여넣을 수 있는 React 구성 요소를 제공합니다.
이 SVG 최적화 프로그램을 사용해도 안전한가요?
그렇습니다. SVG Pro는 브라우저에서 완전히 실행됩니다.. 귀하의 파일은 어떤 서버에도 업로드되지 않으므로 귀하의 독점 자산과 데이터가 비공개로 안전하게 유지됩니다.
내 SVG 파일 크기가 왜 그렇게 큰가요?
SVG 파일에는 숨겨진 레이어, 편집기 관련 메타데이터, 경로 데이터의 과도한 정밀도 등 디자인 소프트웨어에서 남겨진 "조잡한" 부분이 포함되는 경우가 많습니다. SVG를 검증하고 축소하면 시각적 손실 없이 파일 크기를 30-70% 줄일 수 있는 경우가 많습니다.