들어가며

우리는 픽셀의 시대를 살아가고 있습니다. 웹 디자이너와 웹 개발자들에게 픽셀이란 뗄레야 뗄 수 없는 친구이면서 골치덩어리입니다. 완벽한 웹 사이트를 위해서는 파일 용량을 줄여 성능을 높여야 합니다. 웹 상에 아이콘, 로고, 일러스트레이션 이미지 등을 사용한다면, SVG를 사용하는 것이 유일한 방법입니다. SVG는 확장 가능한 벡터 그래픽(Scalable Vector Graphics)의 약자로 모든 스크린에서 화질이 선명하며, 최소 용량이고, 편집과 수정이 쉽다는 장점을 지니고 있기 때문입니다.

본 실습 가이드에서는 웹에서 SVG 사용법에 관한 유용한 팁과 방법들을 알려드리고, 여러분의 웹 사이트 개발 과정에 최대한 활용하실 수 있게 도움을 드리고자 합니다.

SVG

확장 가능한 벡터 그래픽(Scalable Vector Graphics)는 2차원 그래픽을 표현하기 위해 만들어진 XML파일 형식의 마크업 언어입니다. 벡터는 기본적인 도형, 패스 등 일러스트에서 작업하는 모든 것이 될 수 있습니다. 일반적으로 웹 상 이미지 파일형식은 JPEG를 많이 사용합니다. SVG는 코드로 수정할 수 있기 때문에 (텍스트 편집기에서 수정이 가능하고, CSS / JS로 이미지 변경이 가능합니다) 다른 이미지 형식보다 강력한 기능을 가지고 있습니다.

  • 독립적인 해상도
  • 모든 종류의 최신 브라우저 지원
  • 경쟁력있는 기술(W3C 표준)
  • 작성 및 수정의 편리
  • CSS & JS로 구현
  • 높은 압축 용량

웹을 위한 SVG 제작 과정은 매우 간단합니다. JPEG 또는 PNG 파일 변환 작업보다 복잡하지 않습니다. 선호하는 벡터 그래픽 편집기 (Illustrator, Sketch, Inkscape [무료], [shape 레이어를 사용하는 경우 Photoshop에서도 가능])에서 실제 원하는 결과물과 동일한 크기로 그래픽 작업을 하세요. 제가 사용하고 있는 일러스트레이터를 중심으로 설명하겠지만, 모든 소프트웨어에도 동일하게 적용하여 작업할 수 있습니다. 페이지에서 사용 중인 웹 글꼴로 스타일을 지정하지 않으면 올바른 글꼴로 표시되지 않을 가능성이 높으므로, 텍스트를 윤곽선으로 변환해야 합니다. 모든 객체를 솔리드 모양으로 확장하는 것을 걱정하지 마십시오. 특히 스트로크가 있는 경우 페이지에서 이를 조작하고 확장하더라도 파일 크기는 작아지지 않습니다. 레이어 / 그룹에 넣은 이름은 해당 요소의 ID로 변경되어 SVG에 추가됩니다. 전체 파일 크기 용량이 조금 증가되겠지만 스타일링을 편하게 해 줍니다.

SVG로 내보내기 위해 먼저 디자인 작업 내용이 전체 픽셀 (23.3px x 86.8px이 아닌)의 영역 내에 있는지 확인하세요. 영역 밖에 있으면 실제 결과물이 선명하지 않을 수 있으므로 주변에 있는 아트보드를 자르세요. 일러스트에서는 Object > Artboards > Fit to Artwork Bounds를 사용하여 아트웍 경계에 맞춰서 자릅니다. 그 다음, save as 버튼을 누르고 SVG를 선택하고, 기본 설정 그대로 사용하세요. 물론 지금 단계에서 최적화가 가능하겠지만, 이후에 최적화 작업을 할 것이기 때문에 지금 설정 단계에서 시간을 보내는 것은 무의미합니다.

파일 용량 줄이는 방법

(외부 참고자료를 확인하세요)

SVG 최적화와 관련된 훌륭한 글들이 이미 많이 있지만, 그 중 가장 효과적이고 유용한 몇 가지 팁과 방법을 공유합니다. 별도로 해야할 추가 작업이 많지 않아 쉽게 도입하여 작업할 수 있습니다.

SVG 파일 용량을 가장 효과적으로 최소화하려면 불필요한 코드를 제거하는 것이 가장 효과적입니다. SVGO는 가장 유명하고 최상의 도구로, 불필요한 코드를 모두 제거합니다. - 참고 : CSS / JS로 조작하려는 경우에는 주의하여 사용해야합니다. 파일을 과도하게 최적화하면, 추후 작업이 더 어려워질 수 있습니다. SVGO의 가장 편리한 기능은 빌드 프로세스에 추가하여 자동으로 사용할 수 있다는 것입니다. (또는 GUI를 사용할 수 있습니다)

'불필요한 코드 삭제'에서 더 나아가 그래픽 편집기에서 추가 작업을 할 수 있습니다. 먼저 가능한 적은 수의 경로/도형을 사용해 작업을 했는지, 한 경로에 몇 개의 포인트가 있는지 확인합니다. 가능한 모든 요소를 결합하고 단순화하여, 경로 내 포인트 수를 최대한 제거합니다. VectorScribe는 일러스트레이터 플러그인으로 Smart Remove Brush Tool으로 전체 모양을 동일하게 유지하면서 포인트를 제거 할 수 있습니다.

최적화 전

Pre optimisation

Smart Remove Brush Tool로 포인트 제거

Post optimisation

이제 화면을 확대해 보겠습니다. 일러스트레이터에서 View > Pixel Preview로 픽셀 미리보기를 활성화하고 경로 포인트 위치를 ​​확인합니다. 파일 크기를 최소화하기 위해서는 이미지를 픽셀 격자(예 : 전체 픽셀 값) 내로 배치합니다. 모든 곳을 꼼꼼하게 작업해야 가장 선명한 화질로 렌더링을 해줍니다. (반 픽셀 이상을 넘지 않도록 주의하세요)

포인트가 픽셀과 맞지 않음

포인트가 픽셀과 맞지 않음

포인트를 픽셀에 맞춤

포인트를 픽셀에 맞춤

도형이 두 개 이상인 경우, 불필요하게 겹쳐져 있는 부분을 제거합니다. 패스가 정렬되어 있어도 흰색 선이 희미하게 보이기 때문에 이를 없애기 위해 서로 약간 겹쳐 놓습니다. 기억하세요 : SVG에서 z-index는 파일의 맨 마지막 부터 차례대로 순서에 따라 정의되므로, 가장 맨 앞에 올 도형의 코드는 파일 맨 끝에 넣습니다.

최적화 후

마지막으로, 잊지말고 .htaccess파일에서 웹 사이트에서 SVG의 gzip 압축을 사용하도록 설정해야합니다.

AddType image/svg+xml svg svgz
<IfModule mod_deflate.c>
    <IfModule mod_filter.c>
        AddOutputFilterByType DEFLATE "image/svg+xml" \
                                      "text/css" \
                                      "text/html" \
                                      "text/javascript"
                                      ... etc
    </IfModule>
</IfModule>

앞에서 설명한 테크닉의 효과성을 구체적으로 설명하기 위해, Breaking Borders로고 이미지를 예제로 최적화를 했습니다. 실제 사용할 크기로 만들고, 패스를 정돈하고, 가능한 한 많은 포인트를 제거하고, 포인트를 픽셀 값에 맞추고, 겹치는 영역을 최대한 제거하여 SVGO를 통해 최종 산출물을 얻었습니다.

원 이미지: 1,413b

Breaking Borders Logo

최적화된 이미지: 409b

Breaking Borders Logo

전체 용량이 71%으로 감소되었음을 알 수 있었습니다. (gzip으로 압축할 경우 83% 이상으로 감소)

추가 : 롭 스텔리니(Rob Sterlini)는 'b'가 반복할 때마다 <use>요소를 반복하여 사용하면 용량을 더 줄일 수 있다고 말했습니다. 정말 좋은 방법입니다.

<use>로 최적화된 이미지 : 311b

Breaking Borders Logo

전체 용량이 78%이상 감소되었습니다.

여러분 사이트에 있는 모든 SVG를 이와 같은 방법으로 작업하여 이미지 용량을 최소화 할 수 있습니다.

웹에서 SVG를 사용하는 방법은 다양합니다. 일부는 유용하지만 피해야 할 것도 있습니다. 해상도 독립성 및 파일 용량의 최소화를 위해서는, SVG를 일반 이미지 형식과 같이 <img>로 참조하거나, CSS에서 background-image로 참조합니다.

Img

일반 이미지와 같이 <picture>요소에서 SVG를 사용할 수 있습니다. 이 메서드는 조작 기능을 제한합니다.

<img src="bblogo.svg" alt="Breaking Borders Logo" height="65" width="68">
Breaking Borders Logo

Background-image

base64 인코딩을 하면 다운로드하는 동안 나머지 스타일 로딩을 차단시키기 때문에 사용하지 않는 편이 좋습니다. 이 메서드는 조작 기능을 제한합니다.

.logo {
  background-image: url(bblogo.svg);
}

Iframe

<iframe>요소 내 SVG를 로드할 수 있습니다. 대부분의 작업을 구현할 수 있지만, 더 발전적인 기능을 사용하고자 한다면 가장 좋은 방법은 아닙니다. ¯\_(ツ)_/¯

<iframe src="bblogo.svg">Your browser does not support iframes</iframe>

Embed

<embed>요소는 '외부 응용 프로그램', '대화형 콘텐츠'를 통합할 때 사용됩니다. SVG를 사용할 수 있겠으나, 사용하지 않는 편이 낫습니다.

<embed type="image/svg+xml" src="bblogo.svg" />

Object

<object>요소는 HTMLHTML문서 내에 직접 내장(inline)시키지 않고 SVG를 조작하는 경우에 가장 좋은 방법입니다.

<object type="image/svg+xml" data="bblogo.svg">현재 브라우저는 iframe을 지원하지 않습니다.</object>
현재 브라우저는 iframe을 지원하지 않습니다.

Inline

SVG 코드를 인라인하면 HTTP 요청은 저장되지만, 이미지는 브라우저에 캐시되지 않습니다. 조작이 가장 쉬운 방법이지만, 인라인 SVG 코드를 유지하는 것은 어려울 수 있습니다.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 65">
  <path fill="#1A374D" d="M42 27v-20c0-3.7-3.3-7-7-7s-7 3.3-7 7v21l12 15-7 15.7c14.5 13.9 35 2.8 35-13.7 0-13.3-13.4-21.8-26-18zm6 25c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7z"/>
  <path d="M14 27v-20c0-3.7-3.3-7-7-7s-7 3.3-7 7v41c0 8.2 9.2 17 20 17s20-9.2 20-20c0-13.3-13.4-21.8-26-18zm6 25c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7z"/>
</svg>

결론

SVG를 최대한 활용하려면 <object>을 사용하세요. 또는 HTTP 요청을 저장하기 위해 인라인으로 사용할 수 있지만 이미지는 캐시되지 않는 문제가 있습니다. 이미지처럼 동일하게 SVG를 사용하려면 <img>또는 background-image를 사용하세요. <iframe><embed>를 사용할 수 있겠으나 가장 좋은 방법은 아니므로 더 이상 설명은 하지 않겠습니다.

Object Inline Img Background-image
CSS 조작 가능 가능 일부 inline 일부 inline
JS 조작 가능 가능 불가능 불가능
SVG 조작 가능 가능 가능 가능
인터렉티브 SVG 애니메이션 가능 가능 불가능 불가능

참고 : '일부 inline'는 CSS <style>이 SVG 코드에 포함 된 경우에 한하여 작동합니다. 자세한 내용은 다음 부분을 참고하세요.

SVG의 가장 큰 장점은 CSS 사용해 스타일을 변경할 수 있다는 것입니다. 일부 페이지에서 파란색 아이콘을 주황색으로 바꾸고 싶을 때, 새 파란색 아이콘을 다시 만들지 않아도 됩니다.

SVG 스타일 변경 방법은 두 가지로, SVG 코드 내부에서 변경하는 방법(inline style)과 외부 스타일 시트(external style)로 변경하는 방법이 있습니다. 인라인 스타일에서는 <style> 태그와 <![CDATA [...]]>태그로 스타일을 묶습니다. 간혹 XML 파서가 특정 문자(예 : >)와 충돌 할 수 있기 때문에 이 방법을 사용하는 것이 가장 좋습니다. 현재 특별한 문자가 없는 경우에도 나중에 CDATA를 사용하여 추가 코드를 작성할 수 있습니다.

인라인 스타일에서는 대부분 모든 것이 구현 가능합니다. 그러나 <img>background-image는 CSS3 애니메이션을 지원하지 않습니다 (애니메이션 섹션 참고) background-image는 인라인 미디어 쿼리를 지원하지 않습니다. (자세한 내용은 미디어 쿼리 섹션 참고)

인라인 스타일

현재 브라우저는 iframe을 지원하지 않습니다.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 65">
  <style type="text/css">
    <![CDATA[
    .firstb { fill: yellow; }
    .secondb { fill: red; }
    ]]>
  </style>
  <path class="secondb" d="M42 27v-20c0-3.7-3.3-7-7-7s-7 3.3-7 7v21l12 15-7 15.7c14.5 13.9 35 2.8 35-13.7 0-13.3-13.4-21.8-26-18zm6 25c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7z"/>
  <path class="firstb" d="M14 27v-20c0-3.7-3.3-7-7-7s-7 3.3-7 7v41c0 8.2 9.2 17 20 17s20-9.2 20-20c0-13.3-13.4-21.8-26-18zm6 25c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7z"/>
</svg>

작업 및 유지 관리 편이를 위해 외부 스타일을 사용한다면, <img> 또는 background-image를 사용하면 안됩니다. <object>를 사용하는 경우 SVG 파일에서 내부적으로 스타일 시트를 참조해야합니다. (아래 코드를 보세요) 참고사항 : SVG는 부모 클래스가 무엇인지 (예 : <object>) 알 수 없으므로 스타일을 사용하지 마세요. 인라인 SVG에서는 불필요하기 때문에 더 쉽게 작업할 수 있다는 장점이 있습니다.

외부 스타일

현재 브라우저는 iframe을 지원하지 않습니다.
// <svg>태그 전에 선언
<?xml-stylesheet type="text/css" href="style.css"?>
// style.css 파일 내
.firstb { fill: yellow; }
.secondb { fill: red; }

자바스크립트를 사용한 기본적인 SVG 변경 방법을 몇 가지 설명하고자 합니다. SVG 파일에 스크립트를 포함시키려면 파싱 오류를 방지하기 위해 <[!][CDATA [...]]>에 안에 코드를 작성해야합니다. <img> 또는 background-image에 보안을 적용하면 스크립트가 실행되지 않습니다. (페이지 내부에 잠재적 악성 코드 실행을 방지하기 위해)

외부 JS로 작업 할 때 (SVG 파일 내 코드를 삽입하지 않고) SVG가 인라인으로 HTML문서안에 내장되어 있으면, 다른 DOM요소처럼 타켓팅 할 수 있습니다. <object>를 사용하는 경우 contentDocument로 타겟팅 할 수 있습니다. 아래 예제보다 더 멋진 작품을 만들어 보세요.

외부 스크립트

현재 브라우저는 iframe을 지원하지 않습니다.
window.onload=function() {
  var object = document.getElementById("logoObject");
  var svgDocument = object.contentDocument;
  var svgb1 = svgDocument.getElementsByClassName("firstb");
  var svgb2 = svgDocument.getElementsByClassName("secondb");
  svgb1[0].setAttribute("fill", "yellow");
  svgb2[0].setAttribute("fill", "red");
};

반응형 웹 디자인에서는 이미지 스타일 지정을 위한 두 가지 옵션이 있습니다. 이미지를 고정 크기로 유지하고 필요할 경우 중단점에서 조정하거나 부모 컨테이너에 따라 페이지 크기를 조정할 수 있습니다.

SVG를 background-image로 사용하는 경우, 브라우저에게 혼란을 줄 수 있어 주의해야 합니다. 이미지 실제 사이즈에서 다른 사이즈 변경할 경우, background-size를 사용해 사이즈 축소 또는 잘라내기 등을 해야합니다.

사이즈 조정이 가능한 SVG를 만들 때, 다음과 같은 몇 가지 사항을 기억해야합니다. (background-image 구현과 함께)

Object

width: 100%;로 설정합니다.

현재 브라우저는 iframe을 지원하지 않습니다.

Inline

max-height이 필요합니다. Safari는 (복잡한 경우) 창 크기를 재조정하지 않습니다.

Img

width: 100%;로 설정합니다.

Breaking Borders Logo

Background-image

이미지 비율을 조절하려면 padding-bottom: #%;를 추가합니다. 이 요소가 없으면 이미지는 보이지 않습니다.

SVG 애니메이션은 SMIL 사양을 기반으로 한 애니메이션 효과를 적용할 수 있습니다. CSS3 애니메이션 또는 JS 애니메이션을 사용할 수 있습니다. SVG 애니메이션과 CSS3 애니메이션을 함께 사용하면 거의 원하는 모든 것을 할 수 있습니다. SVG 애니메이션은 좀더 강력한 기능을 가지고 있습니다. Snap.svg와 같은 자바스크립트 라이브러리를 사용해 복잡한 애니메이션도 비교적 쉽게 만들 수 있습니다. 이 라이브러리는 필자의 자바스크립트 수준의 이상임으로, 아래 예제를 통해 살펴보시길 바랍니다.

SVG 애니메이션 기능은 매우 강력하지만, 실제로 제가 사용한 애니메이션은 일부라 너무 깊이 다루지 않겠습니다. 멋진 애니메이션을 만들고 싶겠지만, 모든 프로젝트가 이를 위해 소비할 수 있는 시간과 예산은 한정적입니다. 그래서 여러분들이 다루기 쉬운 훌륭한 온라인 튜토리얼이 있는 것입니다. 가장 좋은 점은 모든 구현 방법에서 작동한다는 것입니다. 기본적으로 애니메이션을 제어 할 SVG의 모든 경로와 모양에 하위 요소로 <animiate>를 추가 할 수 있습니다. 가장 좋은 점은 모든 애니메이션이 작동한다는 것입니다. Internet Explorer는 SVG 애니메이션을 지원하지 않습니다만, Internet Explorer에서도 작동하게 하려면 FakeSmile 등의 polyfill을 사용할 수 있습니다.

아래 예제가 있습니다. 애니메이션 효과가 좀더 잘 보이도록 파란색을 밝게 했습니다.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 65">
  <path fill="#4e86b1" d="M42 27v-20c0-3.7-3.3-7-7-7s-7 3.3-7 7v21l12 15-7 15.7c14.5 13.9 35 2.8 35-13.7 0-13.3-13.4-21.8-26-18zm6 25c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7z">
    <animate dur="2s" values="#000000; #4e86b1; #000000" keyTimes="0; 0.5; 1" attributeName="fill" repeatCount="indefinite"/>
  </path>
  <path d="M14 27v-20c0-3.7-3.3-7-7-7s-7 3.3-7 7v41c0 8.2 9.2 17 20 17s20-9.2 20-20c0-13.3-13.4-21.8-26-18zm6 25c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7z">
    <animate dur="2s" values="#4e86b1; #000000; #4e86b1" keyTimes="0; 0.5; 1" attributeName="fill" repeatCount="indefinite"/>
    </path>
</svg>

SVG 애니메이션

Object

현재 브라우저는 iframe을 지원하지 않습니다.

Inline

Img

Breaking Borders Logo

Background-image

웹 상의 아이콘이나 일러스트레이션의 애니메이션은 마우스 호버(hover) 등 인터렉션을 위해 사용됩니다. 앞에서 CSS 조작 및 SVG 애니메이션 지원 비교 표를 보았듯이, <img>background-image는 SVG 애니메이션이나 CSS3 애니메이션을 지원하지 않습니다. SVG 애니메이션에서 인터렉티브한 애니메이션 효과를 주려면 begin="mouseover"& begin="mouseout"을 추가하고 하거나, CSS3 애니메이션에 SVG 요소에 클래스를 추가하고 호버에 스타일을 적용 할 수 있습니다. 주의 사항은 외부 스타일 시트에 애니메이션 스타일을 지정하려면 SVG 인라인을 사용하는 경우에는 정상적으로 작동하지만, <object>를 사용하는 경우 SVG 내에 외부 스타일 시트를 참조해야합니다.

인터렉티브 SVG 애니메이션

<object> 또는 인라인에서만 구현됩니다.

현재 브라우저는 iframe을 지원하지 않습니다.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 65">
  <path fill="#4e86b1" d="M42 27v-20c0-3.7-3.3-7-7-7s-7 3.3-7 7v21l12 15-7 15.7c14.5 13.9 35 2.8 35-13.7 0-13.3-13.4-21.8-26-18zm6 25c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7z">
    <animate fill="freeze" dur="0.1s" to="#000000" from="#4e86b1" attributeName="fill" begin="mouseover"/>
    <animate fill="freeze" dur="0.1s" to="#4e86b1" from="#000000" attributeName="fill" begin="mouseout"/>
  </path>
  <path d="M14 27v-20c0-3.7-3.3-7-7-7s-7 3.3-7 7v41c0 8.2 9.2 17 20 17s20-9.2 20-20c0-13.3-13.4-21.8-26-18zm6 25c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7z">
    <animate fill="freeze" dur="0.1s" to="#4e86b1" from="#000000" attributeName="fill" begin="mouseover"/>
    <animate fill="freeze" dur="0.1s" to="#000000" from="#4e86b1" attributeName="fill" begin="mouseout"/>
  </path>
  </svg>

CSS3 애니메이션

<object> 또는 인라인에서만 구현됩니다. 이전에 설명한대로 외부 CSS에서도 작동합니다.

현재 브라우저는 iframe을 지원하지 않습니다.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 65">
  <style type="text/css">
    <![CDATA[
    .firstb { fill: #000; transition: fill 0.1s; }
    .firstb:hover { fill: #4e86b1; }
    .secondb { fill: #4e86b1; transition: fill 0.1s; }
    .secondb:hover { fill: #000; }
    ]]>
  </style>
  <path class="secondb" d="M42 27v-20c0-3.7-3.3-7-7-7s-7 3.3-7 7v21l12 15-7 15.7c14.5 13.9 35 2.8 35-13.7 0-13.3-13.4-21.8-26-18zm6 25c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7z"/>
  <path class="firstb" d="M14 27v-20c0-3.7-3.3-7-7-7s-7 3.3-7 7v41c0 8.2 9.2 17 20 17s20-9.2 20-20c0-13.3-13.4-21.8-26-18zm6 25c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7z"/>
</svg>

PNG와 background-image로 고화질 해상도를 얻을 수 있는 것처럼, SVG 스프라이트를 사용하거나 추가 기능을 사용해 한 단계 더 발전시킬 수 있습니다. 좀더 깊이 들어가면 설명이 복잡해지고 굳이 구현할 필요성도 느끼지 못해 간략히 알아보겠습니다. SVG는 더 적은 HTTP 요청으로 모든 기능을 구현할 수 있다는 것이 큰 장점입니다.

두 가지 방법이 있습니다. 첫 번째 방법은 먼저 SVG 내 <symbol>요소에 정의된 모든 아이콘을 숨긴 후, 필요시에 xlink : href="#id”와 함께 <symbol>을 참조하는 <use>요소를 참조하는 것입니다. 두 번째 방법은 SVG viewbox 속성으로 특정 영역 주변의 아트 보드 (표시된 SVG 영역)를 자르는 것입니다. 이 두 방법 모두 SVG 고급 기술로 실제 사용은 좀더 고려해보는 것이 좋습니다.

이 부분에 대해 좀더 자세히 알고 싶다면 아래 참고자료 리스트를 확인하길 바랍니다. 이 중 Sara SoueidanSVG 스프라이트 창작 테크닉 개요를 읽어보기를 추천합니다.

CSS가 있는 PNG 스프라이트와 같이 SVG 스프라이트를 사용하려면, SVG 코드의 viewBox 속성과 함께 widthheight 속성을 다시 추가해야합니다. 일반적인 최적화 프로세스 중에는 필요하지 않은 속성임으로 제거됩니다. 이 경우 IE9와 10에서는 이미지 스프라이트의 일부를 올바르게 자를 수 있어야 처리해야 합니다. 이들 브라우저에서는 CSS 이미지 사이즈에 정의된 너비와 높이를 사용하기 때문에 실제로는 (전체 이미지가 아닌) 이미지 일부분만 보이게 될 것입니다. 최근에 제가 부딪힌 문제이기도 합니다.

SVG의 큰 장점은 뷰포트 사이즈에서 작업하는 대신 미디어 쿼리(media query)를 통해 이미지 사이즈를 변경할 수 있다는 것입니다. 각 요소의 쿼리를 실행해 구현할 수 있습니다. 멋지죠. 이를 통해 실제 보여지는 SVG 사이즈를 제어할 수 있습니다.

모든 이미지 사이즈에서 회사 로고가 올바르게 보여지게 하려면 어떻게 해야할까요. 어렵지 않습니다! 미디어 쿼리를 통해 크기에 따라 형식을 변경할 수 있습니다. background-image와 별도로 모든 브라우저 내에서 구현할 수 있습니다.(IE9-11은 breakpoint을 무시할 수 있습니다) 아래 슬라이더를 움직여 확인해보세요.


폴백(fallbacks)이란 브라우저별로 지원 사양이 다르기 때문에, 의도한 기능이 지원되지 않을 경우를 대비하여 이와 유사하게 동작하도록 만드는 방법을 말합니다. SVGs는 모든 최신 브라우저에서 지원합니다. IE8는 SVG를 지원하지 않아 PNGs로 처리해야 합니다. 저는 IE8 지원은 불필요하다고 생각하여 이 부분을 깊게 다루지 않을 겁니다. ¯\_(ツ)_/¯ 만약 IE8에서 SVG지원을 하고 싶다면, SVG 폴백 작업이 꽤 복잡해질 겁니다. Amelia Bellamy-Royds가 작성한 CSS-Tricks - SVG 폴백 완벽 가이드를 참고하세요.