SVG 심벌 스프라이트: ID, ViewBox, 색상 유지하기

SVG 심벌 스프라이트는 이름 있는 아이콘 정의를 하나의 SVG 파일에 저장합니다. 보이는 각 아이콘은 <use> 요소로 필요한 정의를 참조합니다. 개별 파일에서 옮길 때 프래그먼트 ID, 좌표계, 칠 규칙이 보존되어야 이 구성이 작동합니다.

전체 폴더를 합치기 전에 아이콘 두 개로 시작하세요. 이 안내에서 잎은 정사각형 좌표 공간을, 오른쪽 화살표는 넓은 좌표 공간을 사용합니다. 경로를 복제하지 않고 잎이 두 색상으로 나타납니다. 화살표는 잎의 캔버스에 억지로 맞추지 않고 비율을 유지합니다.

소스 아이콘의 모양, 패딩, 시각적 굵기를 아직 맞춰야 한다면 먼저 SVG UI 키트 준비 작업 흐름을 완료하세요. 스프라이트는 아트워크를 구성하며 수정하지는 않습니다.

이름 있는 심벌 정의 두 개 만들기

이 직접 만든 예제를 sprite.svg로 저장하세요.

<svg xmlns="http://www.w3.org/2000/svg">
  <symbol id="pv-leaf" viewBox="0 0 24 24">
    <path fill="currentColor"
      d="M5 19C2 10 9 4 20 4C20 15 14 22 5 19Z"/>
  </symbol>
  <symbol id="pv-arrow" viewBox="0 0 32 16">
    <path fill="currentColor"
      d="M2 5H21V1L30 8L21 15V11H2Z"/>
  </symbol>
</svg>

잎의 이름은 pv-leaf, 화살표의 이름은 pv-arrow입니다. 페이지에서 요청할 식별자입니다. MDN은 symbol을 use로 인스턴스화하는 재사용 그래픽 정의로 설명합니다. 정의 자체는 직접 렌더링되지 않으므로 심벌만 포함한 파일을 단독으로 열면 비어 보일 수 있습니다.

viewBox는 그것이 정의하는 아트워크와 함께 유지하세요. 여기서 잎은 0 0 24 24, 화살표는 0 0 32 16을 사용합니다. 이 숫자는 좌표 경계를 정의하며 필수 표시 크기가 아닙니다. 도형을 조정하지 않고 화살표 경계를 24×24로 바꾸는 것은 정규화가 아닙니다. 좌표와 뷰포트의 매핑은 MDN의 viewBox 참조를 보세요.

기존 아이콘군에는 합의된 그리드를 유지하세요. 여기의 서로 다른 도형은 다른 요점을 보여 줍니다. 묶을 때 이미 확인한 좌표계를 보존해야 합니다. 화살표가 선이나 곡선 끝을 따라야 한다면 사용자 지정 화살촉을 정렬하는 SVG 마커로 부착점과 방향을 정의하세요.

페이지에서 스프라이트 참조하기

sprite.svg, HTML 페이지, icons.css를 같은 제공 디렉터리에 두세요. 로컬 파일 제한이나 다른 호스트가 기본 참조 오류를 가리지 않도록 같은 출처의 HTTP 미리보기로 시작하세요.

icons.css에 다음 규칙을 추가하고 페이지에서 스타일시트를 불러오세요.

.icon {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  vertical-align: middle;
}
.icon-wide {
  width: 3rem;
}
.garden-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #167d8d;
}

그런 다음 HTML body에 다음 인스턴스를 추가하세요.

<button class="garden-button" type="button">
  <svg class="icon" aria-hidden="true" focusable="false">
    <use href="./sprite.svg#pv-leaf"></use>
  </svg>
  Garden
</button>
 
<svg class="icon icon-wide" role="img" aria-label="Right direction"
  style="color: #233b63">
  <use href="./sprite.svg#pv-arrow"></use>
</svg>

# 앞부분은 파일을 찾고 뒷부분은 심벌을 선택합니다. 현대적인 속성은 href입니다. MDN의 use 참조는 외부 참조를 설명하고 브라우저가 교차 출처 로딩을 거부할 수 있다고 경고합니다. 작동하는 스프라이트를 CDN으로 옮겨도 바로 동작한다고 가정하지 말고 실제 전달 위치를 테스트하세요.

브라우저의 기본 루트 글꼴 크기에서 이 규칙은 잎에 24×24 CSS 픽셀 상자를, 화살표에 48×24 상자를 줍니다. 크기는 rem을 사용하므로 루트 글꼴 크기가 다르면 달라집니다. 확대 미리보기뿐 아니라 실제 컴포넌트 안에서도 아이콘을 비교하세요. 올바른 상자 안에도 패딩이 과도한 아트워크가 들어 있을 수 있습니다.

위 버튼은 아이콘 표시와 이름 지정을 보여 줍니다. 제품에서 사용할 때는 애플리케이션의 자체 동작 핸들러를 추가하세요.

파일을 합치기 전에 칠 규칙 선택하기

두 예제 경로 모두 fill="currentColor"를 명시적으로 사용합니다. 이를 통해 사용하는 인스턴스는 주변 CSS의 color를 사용할 수 있습니다. 버튼은 청록색을, 화살표는 남색을 제공합니다. color 참조는 currentColor가 채우기와 스트로크의 값을 제공할 수 있다고 설명합니다.

두 번째 잎에는 같은 pv-leaf 참조를 사용하고 인스턴스의 color를 산호색으로 바꾸세요. 다른 테마 색상을 만들기 위해 경로를 복제하지 마세요.

여러 색상의 로고에서 모든 채우기를 currentColor로 바꾸지 마세요. 이는 색상 팔레트를 의도적으로 버리는 것입니다. 스프라이트로 묶기 전부터 파일의 색상이 바뀐다면 SVG 색상 문제 해결 안내로 앞선 문제를 구분하세요.

참조된 경로에 임의의 페이지 선택자가 접근하는 것을 전제로 스프라이트 API를 만드는 것도 피하세요. MDN은 use의 복제된 콘텐츠에 대한 스타일 제한을 설명합니다. 원하는 칠 동작을 소스 아트워크에 넣고 사용하는 쪽을 테스트하세요.

아트워크 내부의 중복 ID 방지하기

고유한 심벌 이름이 필요하지만 내보낸 SVG에는 그라디언트, 마스크, 클리핑 경로, 다른 참조 정의 등의 내부 ID가 더 있을 수 있습니다. MDN은 각 SVG id가 노드 트리 안에서 고유해야 한다고 요구합니다. 원래 분리된 두 파일을 합치면 이 규칙을 위반할 수 있습니다.

예를 들어 잎과 배지의 내보내기 결과에 모두 paint0라는 그라디언트가 있다고 가정해 보세요. 잎의 그라디언트 ID와 일치하는 참조에 함께 접두사를 붙이세요.

프래그먼트는 여전히 원하는 정의를 가리켜야 합니다. MDN의 fill 예제는 그라디언트 ID와 url(#...)의 관계를 보여 줍니다. 두 참조가 모두 잎의 그라디언트를 가리키게 하지 말고 배지에도 자체 접두사를 지정하세요.

이 두 경로 예제에는 중첩 정의가 없어 첫 확인에 유용합니다. 실제 내보내기 결과에서는 파일을 합치기 전에 모든 ID와 로컬 참조 목록을 만드세요. 최적화 도구나 생성기를 실행한 후 전달된 스프라이트에서 목록을 다시 확인하세요. 바깥 심벌의 이름만 바꿔서는 중복 내부 ID가 해결되지 않습니다.

각 인스턴스에 맥락에 맞는 이름 지정하기

보이는 ‘Garden’ 옆의 잎은 버튼이 이미 제공하는 정보를 반복합니다. SVG는 aria-hidden="true"를 사용하여 버튼 텍스트가 이름을 제공하게 합니다. 이 속성은 상호작용 버튼이 아니라 장식용 SVG에 유지하세요. MDN의 aria-hidden 안내는 장식 콘텐츠를 다루고 포커스 가능한 요소를 숨기지 않도록 경고합니다.

독립된 화살표는 역할이 다릅니다. 근처 텍스트 없이 방향을 전달합니다. 바깥 SVG는 MDN의 포함된 SVG 이미지 이름 지정 안내에 따라 role="img"와 aria-label="Right direction"을 사용합니다.

라벨은 사용 위치에서 결정하세요. 재사용되는 잎은 인터페이스에 따라 ‘정원’, ‘식물성’을 뜻하거나 단순한 장식일 수 있습니다. 브라우저 접근성 검사 도구와 대상 보조 기술로 최종 컴포넌트의 접근성 이름을 테스트하세요. 재사용 가능한 심벌만으로는 그 맥락이 정해지지 않습니다.

소스 파일뿐 아니라 전달된 스프라이트 확인하기

이 직접 만든 예제를 같은 출처의 브라우저 테스트 자료에서 확인했습니다. 잎은 청록색과 산호색으로 렌더링되었고 넓은 화살표는 모양을 유지했으며 의도적으로 누락한 프래그먼트는 빈 아이콘 상자를 만들었습니다. 브라우저 접근성 트리에는 Garden 버튼과 이름 있는 화살표가 나타났습니다. 이는 해당 테스트 자료의 확인이며 브라우저 간 또는 화면 읽기 프로그램 인증이 아닙니다.

묶은 후에도 같은 작은 확인 목록을 사용하세요.

1. 파일: 페이지가 최종 URL에서 원하는 스프라이트를 불러오는지 확인하세요.
2. 프래그먼트: 대소문자를 포함하여 모든 href 프래그먼트를 전달된 심벌 ID와 비교하세요.
3. 경계: 작은 컴포넌트와 확대 아트워크에서 잘림, 패딩, 종횡비를 비교하세요.
4. 칠: 단색 아이콘을 두 테마 색상으로 렌더링하고 고정 색상 아트워크는 별도로 살펴보세요.
5. 내부 참조: 접두사를 붙인 칠, 마스크, 클리핑 참조가 최적화 후에도 연결되는지 확인하세요.
6. 의미: 각 상호작용 컴포넌트의 이름과 의미 있는 독립 이미지의 라벨을 살펴보세요.

파일은 불러와지지만 인스턴스 하나가 비어 있다면 도형을 바꾸기 전에 프래그먼트를 확인하세요. 같은 아트워크가 일반 SVG로도 비어 있다면 더 넓은 빈 SVG 확인을 따르세요. 확대 시 픽셀처럼 보이면 스프라이트가 원인이라고 가정하기 전에 포함된 래스터 이미지를 살펴보세요.

PNG 아이콘이 유일한 소스인 경우

단순한 아이콘이 PNG로만 남았다면 묶기 전에 PerfectVector로 PNG를 SVG로 변환하세요. 결과 실루엣, 구멍, 색상 영역을 소스와 비교한 뒤 좌표 경계와 칠 규칙을 확정하세요. 마지막으로 확인한 아트워크에 안정적인 ID를 지정하고 스프라이트에 추가하세요. 변환은 벡터 아트워크를 제공하며 심벌 이름, 컴포넌트 의미, 전달 구조를 선택하지 않습니다.

깨끗한 원본 SVG가 있다면 사용하세요. 다시 추적하면 끊어진 프래그먼트 참조를 해결하지 못한 채 도형 복원 단계만 추가됩니다. 남은 문제가 묶음 방식이 아니라 아트워크에 있다면 SVG 편집 및 준비 안내를 살펴보세요.

FAQ

SVG 스프라이트를 직접 열면 비어 있는 이유는 무엇인가요? 심벌 정의만 포함한 스프라이트는 심벌을 직접 표시하지 않습니다. 빈 문서를 손상된 아트워크로 취급하기 전에 올바른 파일 경로와 프래그먼트 ID를 가진 SVG use 인스턴스로 테스트하세요.

모든 심벌에 같은 viewBox가 필요한가요? 아닙니다. 묶을 때 확인된 각 좌표계를 보존하세요. 같은 디자인 시스템 그리드를 공유하는 아이콘은 일치하는 경계를 사용할 수 있지만 넓은 심벌의 viewBox 숫자만 바꿔서는 정사각형 아이콘이 되지 않습니다.

페이지 색상을 바꿔도 아이콘 색이 바뀌지 않는 이유는 무엇인가요? 소스의 칠 규칙을 확인하세요. 고정된 fill과 currentColor를 사용하도록 작성한 경로는 다릅니다. 의도적인 여러 색상 아트워크를 보존하고 어떤 채우기나 스트로크가 인스턴스 색상을 상속할지 명시적으로 선택하세요.

스프라이트를 다른 도메인에 둘 수 있나요? 외부 use 참조가 출처를 넘어 작동한다고 가정하지 마세요. 같은 출처 테스트 자료에서 시작하고 전달 방식을 바꾸기 전에 실제 호스트와 대상 브라우저를 테스트하세요. 로컬 예제 성공은 교차 출처 지원을 입증하지 않습니다.

Sources

1. MDN — symbol — 재사용 정의와 간접 렌더링.
2. MDN — use — 외부 프래그먼트, 스타일 제한, 출처 제약.
3. MDN — viewBox — 좌표 경계와 뷰포트의 관계.
4. MDN — color — SVG 칠의 입력값인 currentColor.
5. MDN — id — 문서 트리 안의 식별자 고유성.
6. MDN — fill — 그라디언트 URL 같은 페인트 서버 참조.
7. MDN — aria-hidden — 장식 콘텐츠와 포커스 가능한 요소 주의 사항.
8. MDN — img 역할 — 의미 있는 이미지에 라벨을 붙인 바깥 SVG.

확인된 아이콘 두 개로 시작하고 실제 컴포넌트에서 이름, 경계, 색상을 테스트하세요. 소스 하나가 적합한 래스터 이미지로만 있다면 SVG 경로를 복원하고 아트워크를 살펴본 뒤 채택한 결과를 스프라이트에 추가하세요.