스프라이트

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

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

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

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



 [ 한빛미디어 HTML+CSS 도서 보러가기]