소개

아직 SVG에 대해서는 모르는 것뿐이므로 검증하면서 쓰고 있지만 더 좋은 방법이 있을지도 모릅니다.
「이쪽이 좋다!」등 있으면 매번 업데이트 해 나가고 싶습니다.

환경

Adobe Illustrator(R) 17.0 (Illustrator CC)

하고 싶은 조건

①Illustrator에서 SVG 아이콘 내보내기

② 각 아이콘은 네 모퉁이에 1px의 여백을 포함하여 32px × 32px의 크기
※ 아슬아슬하게 만들면 튀어나오거나 버리거나 할 가능성이 있기 때문에

③모든 아이콘을 하나의 아트보드로 관리

내보내기 방법

파일→내보내기→내보내기 형식→파일 종류 「SVG」를 선택
※그 밖에도 있지만 할애

표시 무너짐이 일어나는 내보내는 방법을 재현

①파일→내보내기→내보내기 형식→파일 종류「SVG」를 선택하고「내보내기」버튼을 클릭


②설정 화면이 열리므로 아래와 같이 설정하고 「OK」버튼을 클릭

※SVG 옵션의 설명에 대해서는 Adobe 공식 사이트을 확인해 주십시오.

③HTML과 CSS를 준비하고, 아래와 같이 써 보자

<i class="spriteIcon"></i>

.spriteIcon {
    background-image: url("icon_sprite.svg");
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 32px;
    content: "";
    display: inline-block;
    height: 32px;
    vertical-align: middle;
    width: 32px;
}

④브라우저로 확인하면 훌륭하게 여러가지 브라우저·디바이스로 표시 무너짐을 일으키고 있다. (검증하기 쉬운 것은 FireFox, chrome, IE11당)
(1) 아이콘의 경계가 어긋나 선이 희미하게 보이고 있다


(2) 스프라이트 이미지 전체가 표시됩니다.

원인과 해결책

①아이콘의 경계가 어긋나 선이 희미하게 보이고 있다
원인: 아트보드의 여백이 무시되어 오브젝트가 어느 범위 밖에 내보내져 있기 때문에
솔루션: 아트보드별로 내보내기

② 스프라이트 이미지 전체가 표시됨
원인 : SVG 옵션의 「응답」에 체크를 넣으면 SVG에 width와 height가 기술되지 않기 때문에
해결책 : SVG 옵션의 "반응형"을 선택 해제하고 내보냅니다. 또는 SVG 파일을 텍스트 편집기에서 열고 아래와 같이 width와 height를 기술한다

<svg id="hogehoge" data-name="hogehoge" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 416" width="32" height="416">

작은 재료

PC와 SP에서 같은 스프라이트 이미지를 사용하는 경우는, background-position·width·height를 조정하면 가능.

요약

①여백을 포함하여 내보내기를 하고 싶은 경우는, 아래와 같이 「아트보드마다 작성」에 체크를 넣는다


②아래와 같이 「축소」에만 체크를 넣는다

추가

2017/08/14
「아트보드 내보내기. 아이콘 각각이 아트보드 관리되고 있는 것이 전제」라고 지적을 받았습니다. 감사합니다!
지적에 따라 내용을 수정했습니다.