인라인 SVG와 img: 아트워크의 동작 방식 선택하기

완성된 그래픽을 표시하려면 <img> 요소에 SVG를 사용하세요. 페이지에서 CSS나 JavaScript로 개별 도형을 바꿔야 한다면 SVG를 인라인으로 넣으세요. 두 방식 모두 같은 벡터 아트워크를 다양한 크기로 표시할 수 있습니다. 인라인 삽입이 도형의 품질을 높이지는 않습니다.

브라우저 탭에서는 로고가 올바르게 보이지만 웹사이트의 색상 규칙을 무시할 때 이 구분이 중요합니다. 파일에는 문제가 없을 수 있습니다. 규칙이 파일 내부에 접근할 수 없을 뿐일 수 있습니다. 아래에서는 같은 산 일러스트레이션을 두 형태로 보여 주므로 에셋 처리 과정을 바꾸기 전에 차이를 확인할 수 있습니다.

필요한 동작 선택하기

외부 SVG는 <img>로 표시해도 벡터 파일입니다. 경계는 페이지와 파일 내부 요소 사이에 있습니다. 페이지 CSS로 이미지 요소의 크기를 조절하거나 회전시키거나 불투명도를 줄일 수 있지만 .logo path 같은 선택자는 src 리소스 안의 경로에 접근할 수 없습니다. 인라인 도형은 페이지의 문서 트리에 속합니다. MDN의 SVG 삽입 안내는 두 방식을 설명합니다.

파일에 무엇이 들어 있는지 아직 확인 중이라면 SVG 파일이란 무엇인가부터 보세요. .svg 확장자만으로 눈에 보이는 모든 세부 요소가 경로라는 뜻은 아닙니다. 온라인 상점에 전달할 때는 파일 내용을 확인한 후 Shopify 사용자 지정 SVG 아이콘 안내를 따르세요.

같은 아트워크를 두 형태로 테스트하기

이 시연에서는 산 경로 두 개와 태양 원 하나를 직접 작성했습니다. 별도 파일에서 아트워크를 불러오고 같은 도형을 HTML에 붙여 넣었습니다. 이는 삽입 테스트이며 PerfectVector 변환 결과가 아닙니다.

Chromium 브라우저 테스트에서 두 버전은 처음에 360 × 240 CSS 픽셀을 차지하며 황금빛 태양을 보여 주었습니다. 그런 다음 .sun을 대상으로 하는 페이지 규칙을 활성화했습니다. 인라인 태양은 산호색으로 바뀌었지만 외부 이미지의 태양은 황금빛으로 남았습니다. 두 상자를 180 × 120으로 줄이면 표시 크기만 바뀌고 이 차이는 그대로였습니다.

1. 별도의 SVG 파일 저장하기

다음 전체 소스로 artwork.svg를 만드세요. viewBox는 그림의 좌표 공간을 정의합니다. 너비와 높이는 명시적인 초기 치수를 제공합니다.

<svg xmlns="http://www.w3.org/2000/svg"
     width="240" height="160" viewBox="0 0 240 160">
  <path d="M34 120 104 26 174 120Z" fill="#233b63" />
  <circle class="sun" cx="183" cy="43" r="20" fill="#f59e0b" />
  <path d="M80 120 146 59 210 120Z" fill="#65a7a0" />
</svg>

2. 이미지와 인라인 사본 추가하기

다음을 artwork.svg 옆에 index.html로 저장한 뒤 브라우저에서 여세요. 두 그래픽의 도형과 칠 속성은 같습니다. 인라인 버전에는 보조 기술을 위한 이름도 있습니다.

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>SVG embedding test</title>
<style>
  .artwork {
    display: block;
    width: 360px;
    max-width: 100%;
    height: auto;
  }
  .theme .sun { fill: #d94862; }
</style>
<body class="theme">
  <h1>External image</h1>
  <img class="artwork" src="artwork.svg"
       width="240" height="160"
       alt="Mountain and sun illustration">
 
  <h2>Inline SVG</h2>
  <svg class="artwork" xmlns="http://www.w3.org/2000/svg"
       width="240" height="160" viewBox="0 0 240 160"
       role="img" aria-labelledby="mountain-title">
    <title id="mountain-title">Mountain and sun illustration</title>
    <path d="M34 120 104 26 174 120Z" fill="#233b63" />
    <circle class="sun" cx="183" cy="43" r="20" fill="#f59e0b" />
    <path d="M80 120 146 59 210 120Z" fill="#65a7a0" />
  </svg>
</body>
</html>

스크린샷은 같은 도형 주변에 스타일이 적용된 비교 레이아웃을 사용합니다. 위의 작은 예제는 동작을 쉽게 재현할 수 있게 구성했습니다.

3. 한 번에 변수 하나씩 바꾸기

body에서 class="theme"를 제거하고 다시 불러오세요. 이제 두 태양 모두 황금빛이어야 합니다. 클래스를 복원하면 인라인 태양만 산호색이 됩니다. .artwork의 width: 360px를 width: 180px로 바꾸세요. 컨테이너에 공간이 있다면 두 그래픽 모두 180 × 120으로 줄어들어야 합니다.

외부 이미지의 태양을 영구적으로 바꾸려면 artwork.svg에서 fill을 편집하세요. 페이지 상태에 반응하게 하려면 인라인 마크업이나 의도적으로 선택한 다른 전달 방식을 사용하세요. SVG 색상 변경 안내는 파일 자체를 편집하는 방법을 다룹니다.

.sun이라는 이름은 이 예제를 위해 추가했습니다. 변환하거나 내보낸 파일에는 의미 있는 부분마다 유용한 클래스가 들어 있지 않을 수 있습니다. 보이는 객체가 선택 가능한 경로 하나라고 가정하지 말고 제어할 도형을 살펴보고 이름을 지정하세요.

크기와 접근성 이름을 명시하기

아트워크를 HTML로 옮길 때 viewBox를 유지하세요. 너비와 높이 속성을 적절한 기준값으로 지정한 뒤 반응형 CSS를 적용하세요. 이 3:2 일러스트레이션에서는 width: 180px; height: auto가 비율을 유지합니다. viewBox 안의 큰 빈 여백은 어느 방식에서든 그리기 영역의 일부로 남습니다. 삽입 방식을 바꿔도 제거되지 않습니다.

레이아웃 상자의 비율이 다르다면 preserveAspectRatio 맞춤 안내에서 전체 아트워크 맞춤, 자르기, 왜곡을 비교할 수 있습니다.

의미 있는 외부 이미지에는 HTML <img>에 alt를 작성하세요. 의미 있는 인라인 이미지의 예제는 <title>을 가리키는 role="img" 및 aria-labelledby를 사용합니다. 인라인 SVG는 HTML 이미지의 alt 속성을 사용하지 않습니다. 이러한 이름 지정 방식은 MDN의 HTML 안의 SVG 안내에 설명되어 있습니다.

인라인 예제를 반복해서 사용한다면 각 title ID에 고유 값을 지정하고 연결된 aria-labelledby를 갱신하세요. 그라디언트, 마스크, 클리핑 경로의 ID에도 같은 원칙이 적용됩니다. 같은 의미의 보이는 텍스트 옆에 놓인 장식용 아트워크에는 <img>의 alt를 비워 두거나 aria-hidden="true"로 인라인 SVG를 보조 기술에서 숨기세요. 전체 링크나 버튼을 실제 맥락에서 테스트하여 목적을 나타내는 이름이 유지되는지 확인하세요.

재사용 가능한 아이콘이 많다면 SVG 심벌 스프라이트가 별도의 정의와 인스턴스 방식을 제공합니다. 모든 페이지에 많은 사본을 붙여 넣기 전에 그 재사용 방식이 필요한지 결정하세요.

성능은 측정으로 판단하기

인라인 마크업은 아트워크를 별도 이미지 리소스로 가져오는 대신 도형을 문서에 넣습니다. 문서의 마크업 양도 증가합니다. 외부 파일은 URL, 응답 헤더, 캐시 상태에 따라 브라우저 캐시에서 재사용할 수 있습니다. MDN의 HTTP 캐싱 안내는 이러한 조건을 설명합니다.

두 사실만으로 어느 버전이 페이지를 더 빠르게 만드는지는 알 수 없습니다. 실제 사본 수와 SVG 복잡도를 갖춘 실제 페이지를 첫 방문과 재방문 때 비교하세요. 이 시연은 칠에 대한 접근과 크기 조절을 테스트하며 로딩 속도 벤치마크가 아닙니다.

외부 이미지 모드에는 CSS 이외의 제약도 있습니다. MDN은 이미지로 사용되는 SVG가 JavaScript를 비활성화하고 외부 리소스를 제한한다고 설명합니다. 누락된 기능을 작동시키려고 낯선 SVG를 인라인으로 옮기지 마세요. 신뢰할 수 없는 마크업은 페이지에 넣기 전에 검토하고 안전하게 정제하세요.

시작 아트워크가 PNG뿐인 경우

소스에 필요한 도형이 없다면 삽입 방식을 선택하기 전에 벡터화해야 합니다. 적합한 래스터 로고나 일러스트레이션이라면 PerfectVector로 PNG를 SVG로 변환하고 원본과 비교해 결과를 살펴본 뒤 채택한 SVG를 아트워크 마스터로 보관하세요. 클래스를 추가하거나 웹 사본을 준비하기 전에 실루엣, 구멍, 작은 색상 영역을 확인하세요.

PerfectVector는 벡터 아트워크를 제공합니다. CSS에 반응할 부분을 선택하고 의미 있는 이름을 추가하며 최종 페이지를 테스트하는 일은 여전히 필요합니다. 이미지 변환이 의미 있는 클래스 이름을 가진 컴포넌트를 자동으로 만들어 주지는 않습니다. 기존 SVG에 이미 사용할 수 있는 경로가 있다면 렌더링된 사본을 추적하지 말고 그 경로를 사용하세요.

래스터 이미지를 포함한 SVG인지도 확인하세요. 이런 파일을 인라인으로 붙여 넣으면 <image> 요소가 노출될 뿐이며 그 안의 픽셀이 개별 색상 변경 가능한 도형이 되지는 않습니다. 사진다운 모습을 유지해야 하는 사진에는 적절한 래스터 전달 형식을 사용하세요.

최종 페이지 확인하기

• 페이지 CSS를 테스트하기 전에 아트워크가 단독으로 올바르게 보이는지 확인하세요.
• 완성된 그래픽 표시에는 <img>를, 요소 직접 제어에는 인라인 SVG를 선택하세요.
• 지원하는 가장 좁은 레이아웃에서 렌더링 크기와 비율을 검증하세요.
• 광범위한 path 규칙에 의존하지 말고 색을 바꾸려는 정확한 도형을 테스트하세요.
• 이미지 이름, 중복 ID, 주변 링크나 버튼을 확인하세요.
• 로딩 동작이 결정에 영향을 준다면 측정하세요. 이 예제에서 속도 결과를 추론하지 마세요.

FAQ

img 태그를 사용하면 SVG가 비트맵이 되나요? 아닙니다. img로 불러온 SVG도 벡터 도형을 렌더링할 수 있습니다. 이미지 요소는 호스트 페이지가 내부 도형을 직접 선택하지 못하게 할 뿐 도형을 PNG로 변환하지 않습니다.

currentColor가 페이지 텍스트 색상을 따르지 않는 이유는 무엇인가요? 외부 SVG 이미지에는 자체 스타일 맥락이 있습니다. 페이지의 color가 파일 내부에서 사용하는 currentColor가 자동으로 되지는 않습니다. 칠이 페이지로부터 상속되어야 한다면 인라인 SVG를 사용하고 해당 fill 또는 stroke가 currentColor를 사용하도록 작성하세요.

기존 SVG를 인라인으로 넣기 전에 변환해야 하나요? 원하는 벡터 도형이 이미 들어 있다면 변환할 필요가 없습니다. 마크업을 검토하고 필요한 참조를 보존하며 적절한 이름을 추가한 뒤 페이지에서 테스트하세요. 래스터 소스에서 도형을 복원해야 할 때만 래스터 벡터 변환이 관련됩니다.

Sources

1. MDN — HTML에 벡터 그래픽 포함하기 — 외부 이미지와 인라인 삽입 동작.
2. MDN — HTML 안의 SVG 소개 — 인라인 마크업, viewBox, 접근성 이름 지정.
3. MDN — HTTP 캐싱 — 캐시 재사용은 응답 정책과 리소스 식별에 따라 달라집니다.
4. MDN — 이미지로 사용되는 SVG — 이미지 맥락에서의 스크립트 및 리소스 제약.

아트워크의 역할에 맞는 삽입 방식을 선택하고 페이지의 실제 스타일로 테스트하세요. 적합한 PNG가 유일한 소스라면 먼저 벡터 도형을 복원하고 결과를 살펴본 뒤 채택한 아트워크를 해당 삽입 방식에 맞게 준비하세요.