오늘은 블로그 로고작업을 SVG로 교체하는 작업을 다시 했습니다.
로고파일이 원래 455x299 사이즈의 png 파일인데...
이게 사이즈가 크게 해서 로고를 만들 때는 이미지가 깨지지 않는데..
너무 작은 부분에 로고를 사이즈를 줄여서 넣으려고 하면 계단현상 즉 이미지가 깨져버리는 현상이 발생합니다.
그래서 이런식으로 그냥 웹폰트를 불러와서 꾸미고 있었죠.
괜히 저폰트 사용도 많이 안하는데.. 계속 있는 것도 보기 안좋고
한글 로고가 있는데 영문을 사용하는 것도 맘에 들지 않아서 벡터이미지인 svg 파일로 만들어보기로 했습니다.
벡터이미지와 레스터이미지를 간단하게 알아보자
벡터이미지의 가장큰 장점은 뭐 이미지사이즈를 조절해도 깨지지않고 그대로를 보여줍니다.
레스터이미지는 픽셀이고 벡터는 path 선으로 나타나기 때문이죠
이미지 파일의 크기는 svg파일이 무조건 작다고만은 말을 하지 못합니다.
벡터는 이미지가 크나 작으나 path가 같기 때문에 사이즈 용량이 비슷한 반면
레스터는 사이즈가 작으면 당연히 픽셀이 줄어들기 때문에 용량이 확줄어들겠죠?
하지만 단순한 로고같은 이미지는 svg파일이 대체로 작은편입니다.
물론 svg파일이 장점만 있는 것은 아니고 단점은 부드러운느낌(?) 다채로운느낌 픽셀
그런 것을 표현하려면 엄청나게 많은 path가 필요하니.. 그런 파일을 만들지도.. 열지도 못하겠죠... 버벅이고 터질지도 모릅니다.
그래서 보통 svg파일은 간단한 로고나 레터에 많이 사용이 되죠.
또한 구형 IE8이하는 지원하지않습니다. 그러나 최근 모바일 및 브라우저 업데이트로 애플등 다양한 기업 홈페이지에
svg파일 사용이 증가되고있습니다. 특히 반응형 웹이라면!!! 필수필수!!
한번 제로고 예로 살펴보겠습니다.
 |  |
png파일(445x229)(16.8KB) / svg파일(445x229)(7.5KB)
이렇게보니 svg가 깔끔하게 보이긴하네요.
왼쪽은 붓글씨체 그대로 모양이 그대로 다보입니다. svg파일로 변환했는데 좀 날카워로진 느낌이죠.
사이즈를 줄여봅시다.
png파일(74x37)(2.7KB),png압축파일(74x37)(733B)
/ svg파일(74x37)(8.1KB)
PC화면에서는 잘 구분이 안되죠?
오히려 svg파일은 이미지를 줄였는데 용량이 증가했네요;;
모바일로 보니 확실히 차이가 보이죠??
확대를 해보면 어떨까요???
500% 확대를 해보면 차이가 확실히 보입니다.
 |  |
이렇기 때문에 작은 로고는 png 레스터파일로 사용하기가 좋지 않습니다. ㅠ_ㅠ
그래서!!!! svg로 로고작업을 해보도록 하겠습니다.
본격적으로 시작해보자.
사실 사전 준비물로 일러스트레이터가 필요합니다.
굉장히 어렵고 안익숙합니다. 저도 잘모릅니다. 배운적이있긴한데.. 기억이 가물가물
사실 이번 포스팅도.. 예전에 벡터 로고를 만들어 놓은적이 있는데 만드는 방법을 까먹어서..
만드는 법을 저장하려고 다시 작성하는 것입니다. ㅠㅠ
[image trace] 기능을 이용 하는 것입니다.
제가 사용하는 한글판은 [라이브 추적]이라고 적혀있습니다. [live trace]라고 적히기도 합니다.
라이브 추적만 누르면 벡터이미지로 바꿔줍니다.
일명 선따기라고 하는데요. 알아서 선을 따서 만들어 벡터이미지로 만들어 줍니다.
자세한건 저도 일러스트레이터는 완전 젬병이라..
다른 이름으로 저장 svg파일로 저장을 해주면 됩니다.
SVG파일 사용법
크게 2가지가 있습니다. ( 직접 코드를 그리는 방법도.. 근데 태그사용안에 포함되니..)
하나는 다른이미지 파일과 동일하게
<img>태그를 사용해 경로를 통해 불러오는 방법
이런식으로 말이죠
<img src="./images/123.svg" style="width:74px;height:37px;">
다른 하나는 svg파일도!! 코드로 불러올 수가 있습니다!!!
데아타 URI 스킴이라는 이미지 파일 넣는 방법 기억나시나요??
모르시다면 읽어보고오시면 됩니다.
http://cocosoft.kr/364 - 데이타 URI 스킴(Data-URI scheme)Base64 이미지 넣기
svg 요소 자체를 집어넣는 방법은 간단합니다.
svg파일을 웹브라우저로 열어줍니다. 크롬이나 파이어폭스가 좋겠죠?
요소검사를 해보면 path태그로 좌표가 찍힌 파일이 보입니다.
저것을 html 코드에 포함시키면 이미지가 나오게 됩니다.!!
<img> 태그를 사용하느냐 <svg> 자체를 집어넣느냐는 장단점이 있습니다.
<img> 태그는 1)간단하게 한줄로 이미지 로드 가능
2) 브라우저 캐싱 가능
3) 사이즈 크기 조절 매우 쉬움
4) 내부 요소는 건들일 수 없음
<svg> 태그는 1) 코드가 너무 김;;;
2) 브라우저 캐싱 불가능
3) 사이즈 조절 불가능 (path 좌표 일일히 수정한다면 가능할지도.. 미친짓이죠;;
스크립트로 조절가능할런지는 모르겠네요)
4) 내부 요소 조절 가능
즉 내부요소 제어 가능합니다. 예를들어 CSS의 경우 fill 태그를 사용해서 벡터 이미지 색을 바꿀 수있다는 것이죠!!
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="레이어_1" x="0px" y="0px" width="181.423px" height="91.304px" viewBox="0 135.354 181.423 91.304" enable-background="new 0 135.354 181.423 91.304" xml:space="preserve">
<path fill="#231F20" d="M177.425,141.599c1.167-1.918,1.088-4.286,2.159-6.244c1.6,1.306,2.131,3.618,1.692,5.571 c-0.483,1.27-0.696,2.679-1.522,3.791c-1.318,1.752-2.66,3.533-4.423,4.87c-1.535,1.145-2.82,2.61-4.492,3.565 c-3.621,1.945-6.807,4.597-10.521,6.381c-2.848,1.49-5.531,3.396-8.657,4.278c-0.958,0.322-1.724,1.031-2.667,1.386 c-2.57,0.33-4.742,1.861-6.974,3.058c0.186,2.252-1.015,4.25-1.684,6.324c-2.159,3.859-3.912,7.937-5.906,11.884 c-1.232,2.229-2.227,4.653-4.061,6.479c1.1,0.358,2.192,0.817,3.377,0.705c0.942,0.833,1.015,2.598-0.48,2.787 c-2.369-0.322-4.786-0.173-7.118,0.343c-1.217,0.307-2.333,0.935-3.573,1.144c-3.279,0.509-6.143,2.289-9.032,3.791 c-1.172,0.612-2.53,0.322-3.791,0.286c-0.85-0.544-1.326-1.47-1.873-2.28c1.277-0.588,2.521-1.24,3.754-1.909 c2.877-1.148,5.817-2.11,8.706-3.214c0.108-3.509,0.257-7.078,1.357-10.446c0.58-2.257,1.329-4.492,2.594-6.462 c0.641,0.045,1.285,0.057,1.918,0.197c0.358,0.524,0.583,1.12,0.822,1.708c-0.447,0.568-1.051,1.031-1.33,1.713 c-1.486,4.016-2.514,8.19-3.182,12.42c1.72-0.33,3.452-0.613,5.156-1.035c-0.294-1.427-0.588-3.062,0.25-4.371 c1.268-2.059,2.707-4.017,3.818-6.176c1.068-2.115,2.49-4.04,3.453-6.212c0.938-2.055,2.316-3.911,2.949-6.099 c-2.913,0.7-5.499,2.316-8.387,3.086c-3.855,1.76-8.597,2.739-12.548,0.777c-1.246-0.564-1.99-1.717-2.39-2.974 c1.523-0.81,3.167-0.036,4.722,0.186c6.635-0.491,12.955-2.76,19.228-4.826c5.724-2.292,11.545-4.447,16.899-7.545 c6.103-3.231,12.077-6.821,17.314-11.349C174.794,145.619,176.2,143.642,177.425,141.599z"/>
<path fill="#231F20" d="M63.211,162.373c0.849-0.447,1.405-1.563,2.485-1.438c2.333-0.032,4.451,1.64,5.063,3.875 c-0.689,1.958-2.989,2.188-4.023,3.831c-0.98,1.172-2.047,2.264-2.958,3.488c-0.885,1.196-1.381,2.619-2.151,3.888 c-3.348,5.241-5.917,10.934-8.266,16.678c-0.419,0.927-0.657,1.917-0.975,2.88c-0.266-0.117-0.794-0.351-1.055-0.467 c-1.023-3.069-0.189-6.272,0.133-9.375c-2.006,0.016-3.976,0.428-5.97,0.588c-3.818,0.343-7.473,1.548-11.135,2.591 c-2.429,0.387-4.701,1.688-7.208,1.507c-1.486-0.548-1.599-2.264-1.57-3.614c0.817-0.402,1.712-0.499,2.61-0.52 c5.362-0.986,10.591-2.948,16.106-2.889c2.284-0.141,4.556,0.238,6.836,0.202c1.604-0.105,1.91-1.938,2.518-3.103 c2.167-5.177,4.843-10.119,7.94-14.8c-2.563,0.27-5.06,0.99-7.609,1.39c-2.861,0.886-5.825,1.309-8.738,1.981 c-3.323,0.516-6.606,1.446-9.99,1.431c-2.212,0.008-4.423,0.351-6.631,0.028c-0.503-0.733-1.104-1.431-1.426-2.269 c-0.073-0.777,0.306-1.515,0.483-2.256c1.511,0.318,2.944,1.056,4.536,0.915c8.146,0.012,16.251-1.169,24.219-2.824 C58.726,163.69,61.055,163.3,63.211,162.373z"/>
<path fill="#231F20" d="M104.038,164.811c1.551-0.108,2.869,0.942,3.617,2.22c0.258,0.878,0.206,1.825,0.073,2.723 c-0.528,0.726-1.455,0.967-2.164,1.471c-1.482,1.076-2.345,2.748-3.613,4.032c-3.244,4.218-6.627,8.399-8.959,13.214 c-1.672,3.17-3.658,6.353-3.928,10.015c-0.475,0.652-1.281,1.699-2.171,1.071c-1.479-0.604-1.197-2.522-1.564-3.807 c0.955-6.1,4.733-11.143,8.017-16.183c3.199-4.487,6.284-9.052,9.415-13.592C103.112,165.52,103.483,165.028,104.038,164.811z"/>
<path fill="#231F20" d="M145.584,176.497c1.495,0.012,2.751,1.092,4.27,0.927c2.006-0.138,4.177,0.447,6.055-0.46 c0.459,0.234,0.923,0.472,1.386,0.718c-0.021,0.531-0.057,1.067-0.105,1.599c-1.333,0.472-2.651,1.197-4.108,1.088 c-2.196-0.189-4.541-0.282-6.461-1.486C145.802,178.37,145.652,177.375,145.584,176.497z"/>
<path fill="#231F20" d="M77.668,180.586c1.757-0.608,3.827-1.374,5.588-0.399c0.982,0.919,2.433,2.06,1.917,3.578 c-1.079,1.486-2.626,2.558-3.778,3.992c-1.132,1.417-2.099,2.969-3.356,4.286c-2.345,2.478-4.197,5.672-4.169,9.173 c-0.516,0.021-1.028,0.024-1.539-0.016c-0.447-0.696-0.951-1.386-1.148-2.2c-0.158-1.591,0.689-3.046,0.862-4.604 c-2.792-0.024-5.362,1.475-8.15,1.651c-1.925,0.093-4.133,1.112-5.809-0.297c-0.842-0.375-0.732-1.402-0.927-2.147 c2.144-0.685,4.383-0.942,6.623-1.031c3.094-0.479,6.316,0.455,9.325-0.653c1.656-2.433,3.303-4.935,4.456-7.662 c-4.303,0.012-8.452,1.325-12.71,1.744c-2.341,0.307-3.984-2.146-3.992-4.282c0.604-0.201,1.216-0.508,1.873-0.351 C67.742,182.068,72.665,180.478,77.668,180.586z"/>
<path fill="#231F20" d="M102.963,179.724c1.72-0.121,2.228,1.861,3.247,2.881c0.999,0.994,1.076,2.565,2.163,3.479 c2.031,1.999,3.667,4.408,6.019,6.068c-0.101,0.556-0.206,1.107-0.322,1.659c-3.26-1.725-7.139-3.01-9.128-6.341 C103.209,185.368,101.702,182.435,102.963,179.724z"/>
<path fill="#231F20" d="M141.89,185.444c1.336-0.064,2.69-0.125,3.996,0.229c3.174,0.294,6.377,0.068,9.563,0.222 c0.242,0.563,0.503,1.12,0.741,1.688c-2.374,1.221-5.04,1.209-7.634,1.27c-0.298,0.608-0.601,1.229-1.104,1.695 c-1.631,1.712-3.009,3.686-3.791,5.934c2.889-0.104,5.705-1.075,8.614-0.882c0.962,0.017,1.917-0.137,2.879-0.186 c0.334,0.568,0.613,1.165,0.625,1.838c-2.441,0.89-5.007,1.361-7.444,2.26c-2.059,0.495-4.162,1.257-6.305,0.891 c-1.865-1.076-3.288-2.877-3.565-5.053c0.632-2.855,2.521-5.168,3.971-7.642C142.143,186.979,141.958,186.222,141.89,185.444z"/>
<path fill="#231F20" d="M38.927,192.724c0.653-0.036,1.305-0.129,1.957-0.053c1.104,0.722,2.264,1.696,2.285,3.139 c-0.311,1.394-1.117,2.594-1.692,3.879c-1.043,2.985-2.929,5.745-3.053,8.991c0.076,0.549-0.142,1.487,0.628,1.607 c3.304,0.838,6.691,1.427,10.112,1.406c-0.323,1.86-2.385,2.114-3.779,2.868c-2.039,0.99-4.327,1.044-6.49,1.575 c-2.2,0.406-4.456,0.25-6.647,0.725c-3.3,0.516-6.284,2.136-9.556,2.76c-4.121,1.322-8.319,2.49-12.25,4.348 c-1.366,0.636-2.602,1.554-4.008,2.098c-2.244,0.311-4.847,0.041-6.434-1.748v-2.474c2.518-2.046,5.563-3.174,8.613-4.156 c4.54-2.056,9.374-3.324,14.107-4.848c3.932-0.881,7.972-1.167,11.893-2.134c-0.036-1.571-0.182-3.163,0.125-4.718 c0.597-3.227,2.039-6.216,2.788-9.402C37.823,195.245,38.33,193.96,38.927,192.724z"/>
<path fill="#231F20" d="M98.552,192.651c1.446-0.125,2.32,1.204,2.981,2.288c0.661,0.99,0.83,2.175,1.119,3.307 c-1.885,2.832-2.847,6.156-4.548,9.097c1.701,0.02,3.468-0.133,5.096,0.487c1.261,0.447,2.542,0.83,3.839,1.156 c-0.009,0.673-0.064,1.346-0.145,2.015c-2.868-1.052-5.99-1.141-9.007-0.951c-4.851,0.891-9.709,1.729-14.535,2.751 c-1.503,0.218-3.106,0.895-4.564,0.109c-1.325-0.431-1.728-1.918-1.717-3.166c1.314-0.145,2.667,0.121,3.956-0.25 c2.095-0.62,4.278-0.81,6.417-1.249c2.929-0.157,5.825-0.813,8.77-0.696c-0.068-3.364-0.757-6.801,0.177-10.115 C96.944,195.773,97.545,194.102,98.552,192.651z"/>
<path fill="#231F20" d="M64.109,199.637c1.084,0.825,2.51,1.301,3.283,2.465c0.508,1.676,0.032,3.525-0.866,4.983 c-0.87,1.475-1.305,3.158-2.211,4.616c-0.842,1.442-1.547,2.957-1.901,4.601c3.319,0.036,6.728-0.52,9.954,0.5 c1.37,0.133,2.852,0.27,3.593,1.632c-0.403,0.431-0.806,0.866-1.196,1.309c-2.216-0.241-4.456-0.442-6.679-0.294 c-1.756,0.362-3.593-0.012-5.317,0.531c-1.543,0.496-3.191,0.428-4.738,0.891c-4.016,1.016-7.892,2.494-11.815,3.811 c-1.647,0.443-2.779,2.297-4.62,1.93c-1.446-0.032-2.333-1.313-3.255-2.239c0.492-1.604,2.115-2.204,3.5-2.832 c1.861-0.955,3.924-1.401,5.801-2.328c3.743-1.326,7.715-1.854,11.626-2.438c-0.125-0.891-0.858-1.809-0.379-2.695 c0.753-1.374,0.926-2.944,1.37-4.428c0.891-2.738,2.002-5.401,2.828-8.161C63.275,200.797,63.746,200.236,64.109,199.637z"/>
<path fill="#231F20" d="M145.802,206.065c4.048-0.02,8.077-0.789,12.129-0.499c1.378,0.104,2.74-0.153,4.102-0.311 c-0.146,0.834-0.311,1.668-0.428,2.51c-1.232-0.004-2.469-0.04-3.694,0.104c-1.905,0.286-3.818-0.354-5.716,0.049 c-3.01,0.148-6.019,0.343-9.021,0.608c-1.373,0.281-2.735,0.645-4.145,0.729c-1.462,0.097-2.755,0.83-4.056,1.427 c-1.261-0.653-1.825-1.902-1.958-3.264c1.144-0.918,2.566-0.451,3.888-0.455C139.831,206.34,142.832,206.355,145.802,206.065z"/>
<path fill="#231F20" d="M124.076,207.238c1.587,0.052,3.15-0.214,4.692-0.552c0.012,0.588-0.004,1.18-0.036,1.769 c-2.034,0.523-3.714,1.864-5.776,2.292c-2.273,0.817-4.77,1.373-7.098,0.414c-1.41-0.454-3.356-1.401-3.15-3.166 C116.531,208.241,120.253,207.064,124.076,207.238z"/>
</svg>
두개의 파일이 동일한 소스코드로 되어있습니다.
다만 fill 태그를 사용해 색만 바꿔준 것이죠
대충 감이 잡히시나요????
이것으로 아래와 같이 아스트랄한 웹디자인도 할 수 있습니다.
See the Pen 코코소프트 로고 by JCM (@cocosoft) on CodePen.
암튼 결국 이렇게 집어넣었습니다.
깔끔한가유?!! 끝!!!!!
