사용방법
- '샘플 SVG 로드'를 클릭하여 중복 메타데이터가 포함된 디자인에서 내보낸 아이콘이 어떻게 간소화되는지 확인하거나 자신의 '.svg' 파일을 드래그하세요.
- Figma, Illustrator, Sketch 또는 코드 저장소에서 복사한 원본
<svg>코드를 입력 상자에 붙여넣을 수도 있습니다. - 보다 안정적인 기본 최적화를 위해 "표준"을 선택하십시오. 크기를 더 줄여야 할 경우 "Radical"로 전환하세요.
- "원래 볼륨", "최적화된 볼륨", "저장됨"을 확인하고, 오른쪽의 미리보기를 이용하여 그래프에 뚜렷한 변화가 없는지 확인합니다.
- HTML, React 또는 Icon 구성 요소와 함께 사용하려면 "SVG 코드 복사"를 클릭하고, 최적화된 파일을 저장하려면 "SVG 다운로드"를 클릭하세요.
예시 시나리오: 디자인 도구에서 내보낸 브랜드 아이콘을 도구에 붙여넣습니다. 저장 비율 및 미리보기 효과를 확인한 후 단순화된 인라인 SVG를 복사하여 웹 네비게이션 바 또는 버튼 아이콘에 사용합니다.
핵심 기능
- SVGO 기반 SVG 압축: 브라우저 측 SVGO를 사용하여 벡터 마크업을 압축하고 메타데이터, 빈 그룹 및 압축 가능한 속성을 제거합니다.
- Figma/Illustrator 내보내기 코드 정리: 디자인 도구로 내보낸 긴 SVG를 온라인 사용에 더 적합한 아이콘 코드로 변환하는 데 적합합니다.
- 실시간 볼륨 비교: 로딩 후 원래 볼륨, 최적화된 볼륨, 절약 비율이 표시되어 리소스를 교체할 가치가 있는지 빠르게 판단합니다.
- 코드 복사 또는 파일 다운로드: 한 번의 클릭으로 최적화된
<svg>태그를 복사하거나 새.svg파일을 다운로드하세요. - 로컬 처리로 디자인 자산 보호: 파일 읽기, SVGO 최적화, 미리보기 및 내보내기가 모두 현재 브라우저 내에서 완료되며 아이콘, 로고 또는 미공개 일러스트레이션이 업로드되지 않습니다.
관련 도구
그림 주석이 흐릿합니까? EasyTools는 SVG 무손실 크기 조정 및 효율적인 WebP 내보내기를 지원하는 범용 스탬핑 도구를 제공합니다. 한 번의 클릭으로 PNG를 투명한 배경으로 유지하고 JSON 좌표 데이터를 내보낼 수 있습니다. 브라우저 로컬 처리, 개인 정보 보호 및 보안, 전체 형식 호환성.
사진을 편집 가능한 펄러비즈 도안으로 바꾸고 참고 팔레트, 수량 통계, PNG·CSV·1:1 PDF를 내보내세요. 이미지는 브라우저에서만 처리됩니다.
브라우저에서 기본적으로 픽셀 또는 일반 사전 설정으로 이미지 크기를 조정하고, 비율을 고정하고, 출력을 미리 보고, 사진을 업로드하지 않고도 결과를 다운로드할 수 있습니다.
WebP, JPG, PNG 및 기타 이미지 형식을 브라우저에서 로컬로 일괄 변환하여 드래그 앤 드롭, 품질 관리, 미리보기 및 다운로드를 지원합니다. 이미지를 업로드할 필요가 없으며 인위적인 파일 크기 제한도 없습니다.
PNG, JPG, WebP 이미지를 다양한 크기의 ICO 파비콘으로 변환합니다. 브라우저 Canvas를 사용하여 로컬로 처리하고, 디자인 파일을 업로드하지 않고, 생성 후 다운로드할 수 있습니다.
SVG 벡터를 투명한 배경 PNG로 변환합니다. 일괄 드래그 앤 드롭, 1x/2x/4x/8x HD 스케일링을 지원하며 모든 읽기, 렌더링 및 다운로드가 브라우저에서 로컬로 완료됩니다.
브라우저에서 iPhone HEIC 사진을 JPG 형식으로 일괄 변환합니다. 100% 개인 정보 보호, 파일 크기 또는 변환된 이미지 수에 제한이 없으며 모든 처리는 장치에서 로컬로 수행됩니다.
브라우저에서 완전히 기본적으로 실행되는 Adobe Illustrator(.ai) 변환기입니다. AI 파일을 PDF, JPG 또는 PNG 형식으로 변환하는 설치가 필요 없는 소프트웨어를 지원합니다. 100% 비공개이며 안전하며 서버에 업로드할 수 없습니다.
계산 논리
SVG 최적화는 벡터 이미지를 비트맵으로 변환하지 않지만 XML 벡터 마크업 자체를 정리합니다. 이 도구는 브라우저 측에서 실행되는 SVGO를 호출합니다. 일반적인 처리에는 편집기 메타데이터 삭제, 의미 없는 그룹 병합, 빈 속성 제거, 경로 압축 및 좌표 반올림이 포함됩니다.
"표준" 모드는 보다 보수적이며 대부분의 아이콘과 일러스트레이션에 적합합니다. "Radical" 모드는 여러 단계의 최적화를 가능하게 하며 더 짧은 수치 정밀도를 사용합니다. 크기는 더 작을 수 있지만 매우 복잡한 경로의 경우 미묘한 시각적 차이가 있을 수 있습니다. 이 도구는 SVG를 래스터화하지 않으며 여전히 복사 및 다운로드 가능한 벡터 코드로 최적화되어 있습니다.
FAQ
SVG 파일의 크기를 줄이는 방법은 무엇입니까?
가장 일반적인 방법은 디자인 도구로 작성된 메타데이터, 빈 그룹, 중복 속성 및 압축 가능한 경로를 제거하는 것입니다. 이 도구는 SVGO를 사용하여 브라우저에서 이러한 최적화를 수행하고 절감 비율을 표시합니다.
Figma에서 내보낸 SVG 코드를 어떻게 정리하나요?
Figma에서 내보낸 .svg 파일을 도구로 드래그하거나 <svg> 코드를 직접 붙여넣습니다. 복사 또는 다운로드하기 전에 먼저 "표준" 모드에서 결과를 확인하고 미리보기가 정상인지 확인하는 것이 좋습니다.
SVG 압축으로 인해 이미지 품질이 저하되나요?
일반적으로 그렇지 않습니다. SVG는 벡터 마크업이며 SVGO는 주로 눈에 보이지 않는 메타데이터와 중복된 구조를 제거합니다. 그러나 매우 복잡한 경로는 "공격적" 모드에서 약간의 변경을 겪을 수 있습니다. 프로덕션 리소스를 교체하기 전에 미리보기를 시청하는 것이 좋습니다.
이 도구가 내 아이콘이나 일러스트레이션을 업로드합니까?
습관. 파일 읽기, SVGO 최적화, 미리보기, 복사 및 다운로드는 모두 브라우저에서 기본적으로 수행됩니다.
최적화된 SVG를 HTML에서 직접 사용할 수 있나요?
할 수 있다. 'SVG 코드 복사'는 HTML, React 구성 ��소 또는 아이콘 시스템에 인라인 처리하는 데 적합한 전체 <svg> 태그를 복사합니다.
PNG나 JPG를 SVG로 변환할 수 있나요?
할 수 없습니다. 이 도구는 기존 SVG 벡터 코드만 최적화하며 비트맵을 벡터로 변환하지 않습니다.