SVG Icons #
Find similar titles

Icon image를 SVG로 만들기 #

정의 #

스케일러블 벡터 그래픽스(Scalable Vector Graphics, SVG)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식으로, 1999년 W3C(World Wide Web Consortium)의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식이다. SVG 형식의 이미지와 그 작동은 XML 텍스트 파일들로 정의 되어 검색화·목록화·스크립트화가 가능하며 필요하다면 압축도 가능하다.

SVG 형식의 파일은 SVG 기반의 전문 그래픽 편집 프로그램을 사용하여 편집이 가능하다. 물론 XML 파일로 되어 있으므로 문서 편집기로도 편집이 가능하다.

SVG는 크기 축소확대가 가능한 벡터그래픽 요소이다.
SVG는 XML포멧으로 정의된다.
SVG는 이미지 축소확대시에도 해상도에 이상이 없다.
모든 SVG요소들은 애니메이션 기능이 가능하다.
SVG는 W3C에서 권장하는 요소이다.

브라우저 지원 #

인터넷 익스플로러는 IE9부터 SVG를 지원한다.(인터넷 익스플로러를 위한 플러그인이 어도비 사에서 나왔으나, 2009년 1월 1일부터 지원을 중단하였다.)
오페라는 8.0 beta3부터 SVG 1.1 Tiny를 지원한다.
모질라 파이어폭스(1.5 베타 1 이후)는 SVG 1.1의 지원을 위한 기능을 개발 중이다.

특징 #

CSS/JS 조작, 애니메이션 기능, 이미지 스프라이트 기능, 미디어쿼리 등의 기술사용이 가능하다.

장점 #

1. SVG 이미지는 텍스트 편집기로 작성하고 편집 할 수 있다.
2. SVG 이미지를 검색, 인덱싱, 스크립팅 및 압축 할 수 있다.
3. SVG 이미지는 확장 가능하다.
4. 모든 해상도에서 SVG 이미지를 고품질로 인쇄 할 수 있다.
5. SVG 이미지는 확대/축소가 가능하며 이미지는 품질 저하없이 확대 될 수 있다.
6. SVG는 공개 표준이다.
7. SVG 파일은 순수한 XML이다.
8. SVG의 주요 경쟁자는 플래시이다.
9. SVG가 플래시보다 갖는 가장 큰 장점은 다른 표준 (예 : XSL 및 DOM)을 준수한다
10.플래시는 오픈 소스가 아닌 독점 기술에 의존한다.
11. 한 아이콘의 일부요소의 css를 컨트롤 할 수 있다.

단점 #

1. 이미지 크기가 커서 사이트 로딩 속도가 길어질 수 있다.
2. 그래픽 툴을 통해 적용한 일부 필터는 지원되지 않기 때문에 디자인에 한계가 있다.
3. 디자인 작업 전 SVG 파일 생성 작업 가능 여부를 확인해야 한다.
4. IE8이하, Android 2.4는 SVG를 지원하지 않는다.

Plugin을 이용하여 SVG 파일 용량 줄이기 #

SGV #

SVG 파일 용량을 가장 효과적으로 최소화하려면 불필요한 코드를 제거하는 것이 가장 효과적이다.
(https://github.com/ben-eb/gulp-svgmin)

VectorScribe #

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

SVG 사용방법 #

SVG Tag #

1. Img #

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

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

장점은 object와 embed에 비해 속도가 로딩 속도가 가장 빠르다. 기존 이미지들과 동일하게 사용 할 수 있으며, 코드의 양이 적어 가독성이 뛰어나다. 단점은 svg 파일 속에 css 속성을 입힐 수가 없으며, 자체 애니메이션 역시 지원되지 않는다. 브라우저 버전에 따라서 렌더링 능력이 상이하지만 이는 대부분 IE와 안드로이드 2.X 계열에서 발생하며, 큰 사이즈일때는 문제가 없으나 굉장히 작은 사이즈의 경우 비트맵 이미지처럼 렌더링이 되는 단점이 있다. 심지어 텍스트의 경우 오히려 비트맵보다 깨질 때도 있다.

2. Background-image #

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

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

태그가 아닌 div에 css를 이용하여, 백그라운드 이미지를 삽입할 수 있다. 기존의 스프라이트 이미지를 활용하는 방법과 동일하게 사용할 수 있으며, 이미지와 속성이 동일하기 때문에 작업에 어려움이 없다. 오히려 스프라이트 이미지를 만들 경우 일러스트레이터의 snap 기능을 이용하면 정렬을 손쉽게 할 수 있다. svg 파일을 그대로 가져와도 되지만 data URI 를 이용하여 코드로 직접 넣는 방법이 속도면에서 더 빠르다. 단점은 이미지 태그와 마찬가지로 svg 내에 포함된 css 애니메이션을 실행할 수 없다.

3. Iframe #

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

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

4. Embed #

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

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

장점은 img 태그로 가져왔을 때보다 미디어쿼리에서 더 정상 작동한다. 단, 이 경우 width 혹은 height 값을 작성해주어야 하며, css 조작이 이미지보다 훨씬 간편하다. svg 내에 포함된 애니메이션 실행이 가능하다. 단점은 세 태그 중 로딩 속도가 가장 느리다.

5. Object #

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

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

장점은 svg를 지원하지 않는 하위 브라우저의 호환성을 생각해 svg를 로딩하지 못했을 경우 jpg나 png 등의 다른 이미지를 object 태그 내에 추가하여 하위호환을 가능하게 해준다. svg내에 포함된 애니메이션 실행도 가능하며, embed와 동일하게 미디어쿼리로의 css 조작이 간편합하다. 단점은, 코드가 길어지고 하위호환을 고려해 별도의 png 파일을 제작해야 하며, 속도도 img 태그보다 느리다.

6. Inline #

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

종합 #

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

SVG 코드 이해하고 수정하기 #

SVG는 Tag로 인식되기 때문에 브라우저 상에서 띄운 후 개발자 도구에서 영역을 확인하여 원하는 코드를 코드상에서 심어서 수정할 수 있다.

크롬 개발자도구로 path를 선택한 모습

일러스트레이터에서 작업한 레이어 네임, 그룹 네임이 svg에 반영

SVG 파일로 변환하는 방법 #

svg는 일러스트레이터에서만 저장이 가능하며 오로지 Save As 에서 저장 할 수 있다.

svg로 저장을 선택하면, 아래와 같은 대화창이 뜬다.

svg는 1.1방식이 현재 표준으로 지정되어 있으므로 1.1로 고정하면 된다. 만약 svg 내에 비트맵 이미지가 첨부된 경우에는 link 방식과 embed 방식을 선택하면 되지만, svg를 비트맵 이미지를 대체하기 위해 사용하는 경우라면 의미가 없으므로 아무 속성이나 선택해도 된다.

CSS 속성 선택의 경우 각 객체 태그에 직접 style을 입힐 건지 style 태그를 별도로 분리할 건지를 묻는 대화창이다. css의 경우 태그에 직접 인라인으로 삽입된 것을 최우선으로 선택하기 때문에 svg의 수정을 용이하게 하기 위해서는 Style Elements 로 빼는 것을 권장한다.

그 외 속성은 크게 문제가 없으므로 별도로 체크하지 않아도 된다.

디자인 시 유의사항 #

디자인 역시 아트보드 사이즈의 한계 없이 자유롭게 제작할 수 있다는 뜻이기도 하다. 그러나 디자인에 사용된 레이어와 객체, 코드 등이 전부 그대로 svg로 변환되기 때문에 레이어 관리를 제대로 못한 경우에도 (빈 레이어, 쓸모없는 그룹화, cmyk 컬러 사용, stroke와 fill의 사용혼동, 비트맵 이미지 포함 등) svg 코드에 추가되어 속도와 품질 저하에 영향을 끼치게 된다. 때문에 최종 아웃풋 되는 svg의 경우 레이어 정리가 잘 되어있을 수록 용량이 줄어든다.

레이어 관리를 제대로 못한 경우

빈 레이어
쓸모없는 그룹화
cmyk 컬러 사용
stroke와 fill의 사용혼동
비트맵 이미지 포함 등

예제 파일 #

https://drive.google.com/a/insilicogen.com/uc?id=0BzVxXEEIlFs0NTR2cjVqUWlZSlk&export=download

출처 링크 #

위키백과
W3C
Platum
웹에서 SVG 사용하기
웹디자인 이야기

Table of Contents