준비 및 최적화

웹을 위한 SVG 제작 과정은 매우 간단합니다. JPEG 또는 PNG 파일 변환 작업보다 복잡하지 않습니다. 선호하는 벡터 그래픽 편집기(Illustrator, Sketch, Inkscape [무료], [shape 레이어를 사용하는 경우 Photoshop에서도 가능])에서 실제 원하는 결과물과 동일한 크기로 그래픽 작업을 하세요.

제가 사용하고 있는 일러스트레이터를 중심으로 설명하겠지만, 모든 소프트웨어에도 동일하게 적용하여 작업할 수 있습니다. 페이지에서 사용 중인 웹 글꼴로 스타일을 지정하지 않으면 올바른 글꼴로 표시되지 않을 가능성이 높으므로, 텍스트를 윤곽선으로 변환해야 합니다.

모든 객체를 솔리드 모양으로 확장하는 것을 걱정하지 마십시오. 특히 스트로크가 있는 경우 페이지에서 이를 조작하고 확장하더라도 파일 크기는 작아지지 않습니다. 레이어 / 그룹에 넣은 이름은 해당 요소의 ID로 변경되어 SVG에 추가됩니다. 전체 파일 크기 용량이 조금 증가되겠지만 스타일링을 편하게 해 줍니다.

SVG로 내보내기 위해 먼저 디자인 작업 내용이 전체 픽셀 (23.3px × 86.8px이 아닌)의 영역 내에 있는지 확인하세요. 영역 밖에 있으면 실제 결과물이 선명하지 않을 수 있으므로 주변에 있는 아트보드를 자르세요. 일러스트에서는 Object > Artboards > Fit to Artwork Bounds를 사용하여 아트웍 경계에 맞춰서 자릅니다. 그 다음, save as 버튼을 누르고 SVG를 선택하고, 기본 설정 그대로 사용하세요. 물론 지금 단계에서 최적화가 가능하겠지만, 이후에 최적화 작업을 할 것이기 때문에 지금 설정 단계에서 시간을 보내는 것은 무의미합니다. (외부 참고자료를 확인하세요)


파일 용량 줄이는 방법

SVG 최적화와 관련된 훌륭한 글들이 이미 많이 있지만, 그 중 가장 효과적이고 유용한 몇 가지 팁과 방법을 공유합니다. 별도로 해야할 추가 작업이 많지 않아 쉽게 도입하여 작업할 수 있습니다.

SVG 파일 용량을 가장 효과적으로 최소화하려면 불필요한 코드를 제거하는 것이 가장 효과적입니다. SVGO는 가장 유명하고 최상의 도구로, 불필요한 코드를 모두 제거합니다.



CSS / JS로 조작하려는 경우에는 주의하여 사용해야 합니다. 파일을 과도하게 최적화하면, 추후 작업이 더 어려워질 수 있습니다. SVGO의 가장 편리한 기능은 빌드 프로세스에 추가하여 자동으로 사용할 수 있다는 것입니다. (또는 GUI를 사용할 수 있습니다)



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


▽ 최적화 전

Pre optimisation


▽ Smart Remove Brush Tool로 포인트 제거

Post optimisation


이제 화면을 확대해 보겠습니다. 일러스트레이터에서 View > Pixel Preview로 픽셀 미리보기를 활성화하고 경로 포인트 위치를 ​​확인합니다. 파일 크기를 최소화하기 위해서는 이미지를 픽셀 격자(예 : 전체 픽셀 값) 내로 배치합니다. 모든 곳을 꼼꼼하게 작업해야 가장 선명한 화질로 렌더링을 해줍니다. (반 픽셀 이상을 넘지 않도록 주의하세요)


▽ 포인트가 픽셀과 맞지 않음

포인트가 픽셀과 맞지 않음


▽ 포인트를 픽셀에 맞춤

포인트를 픽셀에 맞춤


도형이 두 개 이상인 경우, 불필요하게 겹쳐져 있는 부분을 제거합니다. 패스가 정렬되어 있어도 흰색 선이 희미하게 보이기 때문에 이를 없애기 위해 서로 약간 겹쳐 놓습니다.


기억하세요! SVG에서 z-index는 파일의 맨 마지막 부터 차례대로 순서에 따라 정의되므로, 가장 맨 앞에 올 도형의 코드는 파일 맨 끝에 넣습니다.



최적화 후


마지막으로, 잊지말고 .htaccess파일에서 웹 사이트에서 SVG의 gzip 압축을 사용하도록 설정해야합니다.

AddType image/svg+xml svg svgz
<IfModule mod_deflate.c>
    <IfModule mod_filter.c>
        AddOutputFilterByType DEFLATE "image/svg+xml" \
                                      "text/css" \
                                      "text/html" \
                                      "text/javascript"
                                      ... etc
    </IfModule>
</IfModule>
.htaccess

앞에서 설명한 테크닉의 효과성을 구체적으로 설명하기 위해, Breaking Borders 로고 이미지를 예제로 최적화를 했습니다. 실제 사용할 크기로 만들고, 패스를 정돈하고, 가능한 한 많은 포인트를 제거하고, 포인트를 픽셀 값에 맞추고, 겹치는 영역을 최대한 제거하여 SVGO를 통해 최종 산출물을 얻었습니다.



▽ 원 이미지 1,413b

Breaking Borders Logo



▽ 최적화된 이미지 409b

Breaking Borders Logo


▲ 전체 용량이 71%으로 감소되었음을 알 수 있었습니다. (gzip으로 압축할 경우 83% 이상으로 감소)



추가! 롭 스텔리니(Rob Sterlini)는 'b'가 반복할 때마다 <use>요소를 반복하여 사용하면 용량을 더 줄일 수 있다고 말했습니다. 정말 좋은 방법입니다.



<use>로 최적화된 이미지 311b

Breaking Borders Logo


▲ 전체 용량이 78%이상 감소되었습니다.

여러분 사이트에 있는 모든 SVG를 이와 같은 방법으로 작업하여 이미지 용량을 줄일 수 있습니다.



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