SVG 최적화 및 경량화
설정된 플러그인과 multipass로 SVGO를 실행해 바이트 크기를 비교하고 미리 본 뒤 최적화된 마크업을 복사하거나 다운로드합니다.
SVG 최적화 및 경량화은 무엇을 하나요?
설정된 플러그인과 multipass로 SVGO를 실행해 바이트 크기를 비교하고 미리 본 뒤 최적화된 마크업을 복사하거나 다운로드합니다. 입력: SVG 파일 1개 또는 원시 SVG/XML 마크업. 출력: 최적화된 SVG 마크업과 -optimized.svg 파일. 원본 파일은 덮어쓰지 않습니다.
이 도구가 바꾸는 것
입력과 출력 동작
처리기는 메모리에 새로운 최적화된 SVG 마크업과 -optimized.svg 파일 결과를 만들며 원본 파일을 덮어쓰지 않습니다.
이 도구의 차이점
옵티마이저는 기존 SVG 마크업을 줄이고 트레이서는 래스터 픽셀에서 SVG 패스를 만듭니다.
사용하기 좋은 경우
- 원본을 덮어쓰지 않고 새 결과가 필요할 때 SVG 최적화 및 경량화을 사용합니다.
- 웹, 문서, 디자인 또는 QA의 다음 단계 전에 자산을 준비하는 데 적합합니다.
- 기본 결과를 그대로 받기보다 설정을 제어하고 미리보기를 확인해야 할 때 유용합니다.
안정적인 결과를 만드는 방법
적절한 입력 준비
SVG 파일 1개 또는 원시 SVG/XML 마크업을 사용합니다. 필요할 때 다시 처리할 수 있도록 원본을 보관하세요.
준비 상태 확인
미리보기나 파일 정보가 나타날 때까지 기다립니다. 파서나 디코더 오류가 나면 브라우저가 지원하는 파일을 사용하세요.
설정을 한 번에 하나씩 조정
SVG 입력, 최적화, 복사 항목을 확인합니다. 한 번에 하나만 바꾸고 실제 표시 크기에서 디테일을 비교하세요.
확인 후 출력 다운로드
출력은 최적화된 SVG 마크업과 -optimized.svg 파일입니다. 다음 단계 전에 크기, 투명도, 애니메이션 또는 관련 메타데이터를 확인하세요.
설정과 트레이드오프
SVG 입력
SVG 입력 설정은 SVG 최적화 및 경량화 결과에 직접 영향을 줍니다. 기본값에서 시작해 한 번에 하나씩 바꾸고 미리보기를 비교하세요. 극단적인 값은 아티팩트, 처리 시간 또는 파일 크기를 늘릴 수 있습니다.
최적화
최적화 설정은 SVG 최적화 및 경량화 결과에 직접 영향을 줍니다. 기본값에서 시작해 한 번에 하나씩 바꾸고 미리보기를 비교하세요. 극단적인 값은 아티팩트, 처리 시간 또는 파일 크기를 늘릴 수 있습니다.
복사
복사 설정은 SVG 최적화 및 경량화 결과에 직접 영향을 줍니다. 기본값에서 시작해 한 번에 하나씩 바꾸고 미리보기를 비교하세요. 극단적인 값은 아티팩트, 처리 시간 또는 파일 크기를 늘릴 수 있습니다.
입력과 출력 동작
입력: SVG 파일 1개 또는 원시 SVG/XML 마크업. 출력: 최적화된 SVG 마크업과 -optimized.svg 파일. 원본 파일은 덮어쓰지 않습니다.
개인정보와 네트워크 동작
원본 파일은 브라우저에 남습니다. 도구가 사이트 자산으로 파서나 인코더 코드를 불러올 수 있지만 그 요청에 사용자 이미지는 포함되지 않습니다.
확인할 제한 사항
- 최적화나 트레이싱은 신뢰할 수 없는 SVG를 위한 보안 정화가 아닙니다.
- 최적화는 크기, ID, 스타일을 바꿀 수 있으므로 렌더링 결과를 비교해야 합니다.
- ID 정리나 크기 제거는 참조와 임베드 동작에 영향을 줄 수 있습니다.
실전 확인 사항
- 원본을 덮어쓰지 않고 새 결과가 필요할 때 SVG 최적화 및 경량화을 사용합니다. 옵티마이저는 기존 SVG 마크업을 줄이고 트레이서는 래스터 픽셀에서 SVG 패스를 만듭니다.
- 웹, 문서, 디자인 또는 QA의 다음 단계 전에 자산을 준비하는 데 적합합니다. 최적화는 크기, ID, 스타일을 바꿀 수 있으므로 렌더링 결과를 비교해야 합니다.
- 기본 결과를 그대로 받기보다 설정을 제어하고 미리보기를 확인해야 할 때 유용합니다. ID 정리나 크기 제거는 참조와 임베드 동작에 영향을 줄 수 있습니다.
문제 해결
파일을 읽을 수 없음
브라우저가 SVG 파일 1개 또는 원시 SVG/XML 마크업을 디코딩할 수 있는지 확인하세요. 확장자만 맞는다고 codec이 동작하는 것은 아닙니다.
처리가 중단됨
SVG 최적화 및 경량화을 더 작은 크기나 적은 파일로 다시 시도하세요. 브라우저 메모리와 codec 지원이 실제 제한입니다.
결과가 다르게 보임
미리보기와 다운로드 파일을 같은 배율로 비교하고 형식, 투명도, 애니메이션, 메타데이터 기대치를 확인하세요.
이 도구에 관한 자주 묻는 질문
SVG 최적화 및 경량화은 무엇을 하나요?
설정된 플러그인과 multipass로 SVGO를 실행해 바이트 크기를 비교하고 미리 본 뒤 최적화된 마크업을 복사하거나 다운로드합니다. 이는 구현된 범위이며 AI나 무손실을 암시하지 않습니다.
SVG 최적화 및 경량화의 입력과 출력은 무엇인가요?
입력: SVG 파일 1개 또는 원시 SVG/XML 마크업. 출력: 최적화된 SVG 마크업과 -optimized.svg 파일. 원본 파일은 덮어쓰지 않습니다.프로덕션 워크플로에 넣기 전에 다운로드 파일을 확인하세요.
파일이 서버로 업로드되나요?
원본 파일은 브라우저에 남습니다. 도구가 사이트 자산으로 파서나 인코더 코드를 불러올 수 있지만 그 요청에 사용자 이미지는 포함되지 않습니다.직접 URL, 폰트, 모델 또는 사이트 라이브러리를 쓰면 위 설명처럼 네트워크 동작이 달라질 수 있습니다.
원본 파일이 바뀌나요?
아니요. 현재 브라우저 세션에서 새 결과를 만들고 사용자가 직접 다운로드합니다.
가장 중요한 제한은 무엇인가요?
최적화나 트레이싱은 신뢰할 수 없는 SVG를 위한 보안 정화가 아닙니다.일괄 처리 전에 대표 파일 하나로 이 항목을 확인하세요.
SVG 최적화 및 경량화은 비슷한 도구와 어떻게 다른가요?
옵티마이저는 기존 SVG 마크업을 줄이고 트레이서는 래스터 픽셀에서 SVG 패스를 만듭니다.실제로 필요한 결과에 인접 도구의 작업이 더 맞으면 그 도구를 선택하세요.
다음 작업 이어가기
SVG 최적화 및 경량화 다음에는 형식, 크기, 레이아웃, 메타데이터 또는 전달 목적에 맞는 도구를 선택하세요.