웹사이트에서 아이콘은 주로 이미지를 사용해왔습니다. 몇 해 전에 폰트 아이콘이 등장하면서 이미지 아이콘이 사라지는 듯 싶더니 다시 이미지로 전환되고 있는 추세입니다. 이미지도 그냥 이미지가 아닌 SVG 이미지입니다. 폰트 아이콘은 폰트로서의 기능을 그대로 구현합니다. 즉 색상이나 크기 변경이 가능한 것이죠. 아무리 크게 해도 흐려지거나 깨지는 일이 없습니다. 가장 큰 단점은 하나의 아이콘으로 다양한 색상을 만들 수 없다는 것입니다. 한가지 색으로만 아이콘이 만들어지는 것이죠.
SVG는 Scalable Vector Graphics의 첫 글자로 크기 변경이 가능한 벡터 이미지를 의미합니다. 벡터는 그래픽 디자인에서 크기가 변경되면 수학적 계산에 의해 이미지를 재생성하는 역할을 합니다. 보통의 이미지는 크기가 늘어나면 이미지가 재생성 되는 것이 아니라 단순히 크기만 늘어나기 때문에 흐려지고 경계선은 톱니 현상이 일어나지만 벡터는 전혀 영향을 받지 않고 선명도를 유지합니다. 폰트도 벡터이기 때문에 크기의 변화에 따라 선명도가 유지 됩니다.
SVG 이미지는 벡터 도구에 의해 만들어집니다. 여기에는 그래픽 디자인에 많이 사용하는 어도비 일러스트레이터가 있고 출판에 사용하는 어도비 인디자인이 있습니다. 고가의 제품이라 이에 대응하는 오픈소스의 프로그램이 있는데 일러스트레이터의 경우 대표적인 것이 잉크스케이프(Inkscape)가 있고 인디자인의 경우 스크리버스(Scribus)가 있습니다. 이들은 모두 여러 가지 OS에 따른 별도의 버전이 있습니다.
일러스트레이터에서 로고를 만들고 작게 하면 위처럼 로고의 테두리에 톱니 현상이 있는 것처럼 보입니다. 하지만 이것은 모니터가 이미지를 표현하기 위한 것이고 확대하면 달라집니다.
벡터 이미지에는 이미지를 만들기 위한 선이 있는데 이를 베지어 곡선(Bezier Curve)이라고 합니다. 벡터 이미지를 확대하면 단순히 이미지가 확대 되는 것이 아니라 수학적 계산에 의해 곡선의 경로가 늘어나고 내부에는 다시 색이 채워지는 과정을 거치게 됩니다. 그래서 벡터 이미지는 해상도가 높은 이미지를 유지할 수 있는 것입니다. 이러한 기능을 웹에서도 적용할 수 있도록 한 것이 SVG인 것입니다.
SVG가 갑자기 출현한 것이 아니라 이미 2001년에 SVG 1버전이 웹표준으로 정해져 있었는데 웹브라우저에서 지원하지 않았기 때문에 사용이 안됐었습니다. 하지만 현재는 대부분의 웹브라우저가 지원하고 웹에서의 보다 나은 이미지를 만들기 위한 필요에 의해 사용도가 늘어나고 있는 추세입니다. 지원이 안되는 브라우저는 IE8 버전 이하이고 안드로이드는 4.3 버전 이하에서는 일부만 지원합니다.
https://icons8.com/c/flat-color-icons
SVG를 웹에 사용할 수 있는 영역은 주로 로고와 아이콘입니다. 사진 이미지를 SVG로 대체할 수는 없는 것이죠. 위 사이트에서는 SVG 아이콘을 무료로 제공하고 있습니다.
벡터 툴에서 로고를 만들었을 때는 SVG로 저장할 수 있습니다. 저장하기 전에 폰트를 사용한 글자 부분은 아웃라인으로 만들어야 합니다. 그렇지 않으면 다른 폰트로 나타나게 됩니다. SVG를 웹에서 사용할 때는 여러 가지 방법이 있습니다.
가장 쉬운 방법은 img 태그를 이용합니다.
<img src="http://tw.diywordpress.co.kr/wp-content/uploads/2015/05/logo3.svg" class="logo">
See the Pen KppbwN by Eugine Kim (@martian36) on CodePen.
이 방법은 간단하지만 이미지의 색상을 변경할 수 없습니다. 하지만 크기를 변경할 수 있습니다. logo라는 클래스 선택자를 추가했으니 이를 대상으로 CSS에서 크기를 변경하면 됩니다. 이미지의 속성을 그대로 갖고 있으므로 CSS의 배경 속성을 사용할 수도 있습니다.
background:url("http://tw.diywordpress.co.kr/wp-content/uploads/2015/05/logo3.svg");
See the Pen YXXdXg by Eugine Kim (@martian36) on CodePen.
이미지의 색상을 변경할 수 있도록 하려면 SVG 파일의 코드를 html 파일에 그대로 삽입합니다.
위 파일을 텍스트 편집기에 열면 코드로 돼있습니다.
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg class="logo" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
width="250.167px" height="79px"xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"viewBox="0 0 250.167 79" enable-background="new 0 0 250.167 79" xml:space="preserve">
크기가 정해져 있으므로 width와 height 속성을 제거하고 CSS로 제어하기 위해 calss="logo" 선택자를 추가합니다.
<g class="webdesign">
<path d="M84.716,16.711c-0.193,0-0.316,0.081-0.37,0.242L79.867,32.26c-0.086,0.204-0.344,0.306-0.773,0.306...
로고의 글자 부분은 3개 부분으로 나눠져 있습니다. WebDesign과 &, Photoshop입니다. 일러스트레이터에서 SVG 파일로 저장하기 전에 3개의 부분으로 나눠서 아웃라인을 만들었기 때문이고 편집기에서 <g> 태그로 검색하면 3개가 나타납니다. 각 부분을 다른 색상을 적용하기 위해서 g 태그에 각각 다른 클래스 선택자를 넣어줍니다.
<g class="ampersand">
<path d="M84.16,49.184h6.768v0.596c-0.934,0.075-1.624,0.282-2.07,0.62c-0.445,0.339-1.142,1.362-2.086,3.069...
<g class="photoshop">
<path d="M103.935,53.271v6.365c0,1.375,0.15,2.23,0.451,2.563c0.408,0.473,1.025,0.709,1.854,0.709h0.838v0.596h-9.362v-0.596...
스타일시트에는 아래와 같이 각각의 선택자에 다른 색상을 적용합니다.
.webdesign path {
fill:red;
}
.ampersand path {
fill:green;
}
.photoshop path {
fill:blue;
}
.logo {
width:700px;
}
그러면 아래와 같이 글자의 색상이 변경됩니다.
See the Pen doowMa by Eugine Kim (@martian36) on CodePen.
svg 파일은 코드가 많기 때문에 기존의 html 파일에 추가하면 아주 복잡해집니다. 그래서 가져오기 기능을 이용하면 좋습니다. 워드프레스의 경우 아래와 같이 get_template_part()라는 템플릿 태그를 사용하면 됩니다.
<?php get_template_part('image/svg/logo'); ?>
워드프레스에서 SVG 확장자의 이미지를 업로드하면 에러가 납니다. 그래서 아래의 코드를 functions.php 파일에 추가하면 업로드가 가능해집니다.
function cc_mime_types($mimes) {
$mimes['svg'] = 'image/svg+xml';
return $mimes;
}
add_filter('upload_mimes', 'cc_mime_types');
아이콘은 이미지이므로 background 속성을 이용해 원하는 요소에 추가하면 됩니다. 크게 해도 품질이 유지됩니다. 올해에 나올 부트스트랩 4버전에서 SVG 아이콘이 포함되기를 기대해봅니다.