SVGO: 필요한 구조를 잃지 않고 SVG 최적화하기

SVGO로 SVG를 최적화하면서 페이지에서의 사용을 망가뜨리지 않으려면 원본을 보관하고 페이지가 의존하는 구조를 파악한 뒤, 별도로 최적화한 사본을 해당 페이지에서 테스트하세요. 파일이 작아지고 단독 미리보기가 그대로라고 해서 CSS 선택자, 스크립트, 참조가 계속 작동한다고 입증되는 것은 아닙니다.

직접 만든 원본 배지는 그 차이를 보여 줍니다. SVGO의 기본 프리셋은 소스를 437바이트에서 263바이트로 줄였지만, 주변 HTML이 태양의 색을 바꾸는 데 사용하던 ID를 제거했습니다. cleanupIds를 비활성화하자 연결 지점을 유지하는 281바이트 사본이 만들어졌습니다. 이 수치는 SVGO 4.1.0으로 처리한 이 테스트 자료 하나에 대한 것이며 다른 아트워크의 압축률을 보장하지 않습니다.

SVGO는 기존 SVG 마크업을 편집합니다. PNG나 JPG만 있다면 먼저 벡터 도형을 만들거나 복원하세요. 최적화는 비트맵 안의 객체를 편집 가능한 경로로 바꿀 수 없습니다.

보존해야 할 SVG 구조 결정하기

최적화 도구를 실행하기 전에 눈에 보이는 부분과 다른 문서나 애플리케이션이 참조하는 부분을 구분하세요. SVGO 기본 프리셋에는 ID, 그룹, 스타일, 경로 데이터를 바꾸는 작업이 포함됩니다. 연동 도구가 다른 플러그인 구성을 선택할 수도 있으므로 실제 파일을 처리하는 도구의 설정을 확인하세요.

각 항목은 별도로 확인해야 합니다. ID를 보존해도 모든 그룹, 노드, 편집 가능한 객체가 보존되지는 않습니다. 마찬가지로 올바르게 렌더링된다고 해서 편집기가 원하는 레이어 구조를 복원한다는 뜻은 아닙니다. 편집 가능한 마스터를 보관하고 사용할 환경에 맞는 전달용 사본을 만드세요.

재사용 가능한 심벌은 SVG 스프라이트 안내에서 참조를 사용하는 쪽을 다룹니다. 이 글은 파일을 사용하는 코드나 애플리케이션이 파일을 받기 전에 최적화 단계가 무엇을 바꿀 수 있는지에 초점을 맞춥니다.

외부 CSS 연결이 끊어지는 문제 재현하기

Node.js와 npm을 사용할 수 있는 빈 임시 폴더를 사용하세요. 직접 작성한 이 일러스트레이션을 마지막 줄바꿈까지 포함하여 input.svg로 저장하세요. 이는 설정 테스트 자료이며 PerfectVector 변환 결과가 아닙니다.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 160">
  <title>Mountain badge</title>
  <!-- Original illustration for an SVGO configuration test. -->
  <metadata>Editable master: preserve the badge-accent CSS hook.</metadata>
  <path d="M80 12 139 46v68l-59 34-59-34V46Z" fill="#157d78"/>
  <circle id="badge-accent" cx="108" cy="53" r="12" fill="#ef8067"/>
  <path d="m38 111 32-49 21 30 10-15 25 34Z" fill="#fffdf5"/>
</svg>

이 예제에서 사용한 정확한 버전을 설치한 뒤 새로운 출력 파일을 만드세요.

npm install --save-exact svgo@4.1.0
npx svgo input.svg -o default.svg

기존 svgo.config.mjs가 예상하지 못한 설정을 제공하지 않도록 깨끗한 폴더에서 실행하세요. 공식 SVGO 저장소는 별도 출력 파일 이름과 설정 로딩을 설명합니다. 프로젝트 빌드에서는 버전과 설정을 버전 관리에 포함하여 업그레이드를 의도적인 변경으로 다루세요.

default.svg를 텍스트로 여세요. 원은 여전히 산호색으로 채워져 있지만 badge-accent ID는 사라졌습니다. 이 ID는 SVG 문서 내부에서 참조되지 않았습니다. cleanupIds 문서는 플러그인이 사용하지 않는 ID를 제거하고 참조되는 ID를 줄인다고 설명합니다. 외부 페이지의 선택자는 이 테스트 입력에 포함되지 않습니다.

영향을 확인하려면 SVG 마크업을 HTML 페이지에 직접 넣고 SVG 바깥에 다음 스타일을 배치하세요.

<style>
  #badge-accent { fill: #f5bf42; }
</style>

이 테스트에서는 페이지마다 사본 하나를 사용하세요. 원본 SVG의 태양은 선택자가 일치하므로 금색이 됩니다. 기본 설정으로 최적화된 태양은 ID가 없으므로 산호색으로 남습니다. 어느 파일이든 img 요소로 불러오면 다른 테스트가 됩니다. 호스트 페이지가 같은 문서 안의 내부 도형을 선택하지 않기 때문입니다.

연결 지점을 보존하고 테스트 반복하기

같은 폴더에 다음을 svgo.config.mjs로 저장하세요.

export default {
  plugins: [
    {
      name: 'preset-default',
      params: {
        overrides: {
          cleanupIds: false,
        },
      },
    },
  ],
};

이제 다른 사본을 작성하세요.

npx svgo input.svg --config svgo.config.mjs -o preserved.svg
wc -c input.svg default.svg preserved.svg

이 재정의는 기본 프리셋의 나머지를 유지하면서 이 플러그인 하나만 비활성화합니다. 예제에서 보여 준 ID 의존 관계를 위한 출발점입니다. 임의의 아트워크, 애니메이션, 접근성 관계 또는 애플리케이션별 구조에 보편적으로 안전한 설정은 아닙니다.

깨끗한 폴더에서 위 명령을 실행했으며, SVGO 4.1.0의 JavaScript API에서도 동등한 설정을 별도로 실행했습니다. CLI와 API 출력은 바이트 단위로 같았고 최적화된 파일 끝에 줄바꿈이 추가되지 않았습니다. 그런 다음 같은 외부 CSS 규칙을 사용하여 각각 별도의 HTML 문서에서 결과를 렌더링했습니다. 브라우저 결과는 다음과 같습니다.

ID를 보존한 출력은 이 소스의 약 35.7%인 156바이트를 절약했습니다. 기본 출력보다 18바이트 더 크면서 필요한 동작을 유지했습니다. 공백, 줄 끝 형식, 버전, 출력 서식에 따라 바이트 수가 달라질 수 있습니다.

이 테스트에서는 세 사본 모두 viewBox="0 0 160 160"을 유지했습니다. 눈에 보이는 결과와 브라우저가 계산한 채우기를 확인했습니다. 네트워크 전송 시간을 측정하거나 모든 브라우저, 편집기, SVG 기능, 빌드 연동을 테스트하지는 않았습니다.

특정 의존 관계에 맞게 설정 조정하기

몇 개의 ID만 공개 연결 지점으로 사용한다면 cleanupIds의 preserve 및 preservePrefixes 옵션도 사용할 수 있습니다. 의존 대상을 명시할 수 있을 때 사용하고 같은 사용 환경 테스트를 반복하세요. 여러 SVG를 함께 인라인으로 삽입한다면 중복 ID도 확인하세요. 이미 중복된 ID를 유지해도 고유해지지는 않습니다. 하나의 이름을 바꾸면 사용하는 쪽도 갱신해야 합니다.

SVG 내부의 스타일이나 스크립트는 최적화 도구의 동작을 바꿀 수 있습니다. cleanupIds 문서는 이러한 요소가 있을 때 처리를 중단하는 보호 장치를 설명합니다. 이 보호 장치가 다른 문서의 CSS에도 적용된다고 확대 해석하거나 어떤 참조가 ID에 의존하는지 모른 채 정리를 강제하지 마세요.

숫자 정밀도는 별도로 다루세요. 소수 자릿수를 줄이면 마크업이 줄어들 수 있지만 허용 가능한 변경은 아트워크의 좌표 규모와 최종 표시 크기에 따라 달라집니다. 그래픽을 사용할 크기에서 작은 틈, 모서리, 곡선을 살펴보세요. ID 확인을 통과해도 이러한 세부 사항은 보장되지 않습니다.

레이아웃이 크기 조절 동작에 의존한다면 viewBox를 유지하세요. removeViewBox 플러그인 문서는 크기 조절과 잘림의 영향을 경고합니다. 여기서 사용한 문서상의 기본 프리셋에는 포함되지 않으므로 명시적으로 추가하는 것은 별도의 결정입니다. 어떤 버전과 프리셋용인지 확인하지 않은 채 오래된 설정을 복사하지 마세요.

촘촘하게 추적된 외곽선에서는 마크업 최적화와 의도적인 노드 정리 역시 다른 문제를 해결합니다. SVG 노드 안내로 도형을 단순화해야 하는지 판단하고 편집 후 실루엣을 비교하세요. 소스가 작아졌다고 자동으로 더 깔끔한 커팅 경로가 되는 것은 아닙니다.

실제 사용 환경에서 전달용 사본 검증하기

설정을 선택한 후 최적화된 파일을 실제로 받는 작업 흐름에 넣으세요. 기본 상태와 이에 의존하는 마우스 오버, 선택, 테마, 애니메이션 상태를 확인하세요. 정적인 미리보기는 상호작용 후에만 실행되는 선택자를 놓칠 수 있습니다.

웹 그래픽이라면 로컬 최적화 파일뿐 아니라 최종 빌드 결과도 살펴보세요. 프레임워크나 번들러가 나중에 자체 최적화를 실행할 수 있습니다. 전달된 마크업이 다르면 테스트를 반복하세요.

편집 가능한 파일을 전달하려면 대상 편집기에서 사본을 열고 받는 사람이 필요한 부분을 선택하세요. 작은 글자, 구멍, 분리된 색상, 클리핑을 확인하세요. 웹 사본이 검증을 통과해도 소스 마스터는 보관하세요.

파일 최적화는 전송 압축과도 다릅니다. SVGZ와 SVG 비교 안내는 동일한 소스 바이트를 복원하는 gzip 왕복 과정을 보여 줍니다. SVGO는 전달 전에 소스를 바꾸며, 그 뒤 gzip으로 해당 바이트를 인코딩할 수 있습니다. 각 작업을 그 목적에 맞춰 비교하세요.

최적화 전에 벡터화가 필요한 경우

벡터 마스터가 없고 단일 이미지로 된 PNG 또는 JPG만 있다면 PerfectVector의 이미지 벡터화 작업 흐름으로 SVG 후보 파일을 준비할 수 있습니다. 채택하기 전에 원본과 비교하고 구멍, 작은 세부 요소, 분리된 영역을 살펴보세요. 아트워크 확인 후 페이지에 필요한 ID나 그룹을 추가하고, 전달용 사본을 최적화한 뒤 연결 지점을 테스트하세요.

PerfectVector는 기존 SVG의 최적화 도구가 아니며 웹사이트의 선택자를 재구성하지 않습니다. 기존 벡터 마스터가 있다면 사용하세요. 연속적인 톤의 세부 묘사가 편집 가능한 외곽선보다 중요하다면 사진을 래스터로 유지하세요. 블로그의 벡터 준비 안내는 이러한 소스 선택을 다룹니다.

FAQ

cleanupIds를 비활성화하면 모든 SVG를 안전하게 최적화할 수 있나요? 아닙니다. 해당 플러그인의 제거와 축소로부터 ID를 보존하지만 다른 플러그인은 여전히 스타일, 그룹, 도형, 경로 데이터를 바꿀 수 있습니다. 파일을 받는 작업 흐름에서 사용하는 기능과 참조를 검증하세요.

최적화된 SVG가 단독으로는 올바르게 보이는데 페이지에서는 잘못 보이는 이유는 무엇인가요? 단독 미리보기에서는 외부 CSS나 스크립트를 실행하지 않을 수 있습니다. 이 예제에서는 SVG 자체의 산호색 채우기가 정상 렌더링되었지만 선택 대상 ID가 제거되어 페이지의 금색 변경은 실패했습니다.

유일한 편집용 마스터를 최적화해야 하나요? 마스터를 보관하고 최적화된 전달용 사본을 작성하세요. 최적화 후 파일이 올바르게 렌더링되더라도 객체 구조는 이후 편집에 덜 유용할 수 있습니다.

SVGO가 PNG를 벡터 경로로 바꿀 수 있나요? 아닙니다. SVGO는 SVG 마크업을 처리합니다. 편집 가능한 도형이 필요하고 적절한 벡터 마스터가 없을 때 래스터를 벡터로 추적하는 작업은 그보다 앞선 단계입니다.

Sources

1. SVGO 저장소 — 설치, 명령줄 출력, 설정 로딩, optimize API를 설명합니다.
2. SVGO 기본 프리셋 — 플러그인 목록과 재정의 및 연동 차이를 설명합니다.
3. SVGO cleanupIds — ID 제거, 축소, 보존 옵션과 관련 보호 장치를 설명합니다.
4. SVGO removeViewBox — viewBox를 명시적으로 제거할 때의 크기 조절 위험을 설명합니다.

아트워크와 동작 검사를 통과하는 가장 작은 사본을 보관하세요. 시작 파일에 편집 가능한 벡터 도형이 아직 없다면 래스터 아트워크에서 SVG를 준비하고 도형을 살펴본 뒤, 전달용 사본을 최적화하기 전에 추가한 연결 지점을 보존하세요.