Sketch로 깨끗한 SVG 파일을 출력하는 방법

12566 단어 디자인 최적화 스케치 SVG 작은 재료

개요

Sketch를 사용하면 간편하게 SVG 형식의 아이콘이나 그래픽을 내보낼 수 있지만 내보낸 데이터를 잘 살펴보면 데이터가 상상 이상으로 무겁거나 불필요한 태그가 붙거나 얼룩이 발생하는 경우가 있습니다 .
이 기사에서는 Sketch로 가능한 한 쓸데없는 깨끗한 SVG를 출력하는 방법을 소개합니다.

이번 검증에 사용할 샘플 아이콘

내보내기 전에 할 일

아트보드 자체를 내보내기 대상으로 함

아트보드가 아닌 아이콘을 그룹화하여 그룹만 내보내면 언뜻 보통으로 내보낼 수 있지만, viewBox 버리기 때문입니다.

레이어명은 반드시 영어 표기로 한다

레이어가 일본어로 남아 있으면 id 등에 일본어가 그대로 들어 버리므로 레이어 이름은 반드시 영어로 출력합니다.

도형은 모두 Combine하여 패스화한다

Combine한 파일은 도형을 패스 정보화하기 위해, 데이터 사이즈가 부풀어 오지만, path 하나가 되기 때문에, 관리가 용이하게 됩니다. 사이즈 최소화를 고집하거나, 개별적으로 색을 바꾸거나 움직이지 않는 한, 패스를 올바르게 정리하는 것으로 불필요한 태그가 없는 예쁜 svg를 출력할 수 있습니다.

패스화 전

<?xml version="1.0" encoding="UTF-8"?>
<svg width="128px" height="128px" viewBox="0 0 128 128" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 54.1 (76490) - https://sketchapp.com -->
    <title>NotGroup</title>
    <desc>Created with Sketch.</desc>
    <g id="NotGroup" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <circle id="Oval" fill="#000000" cx="28" cy="34" r="10"></circle>
        <rect id="Rectangle" fill="#000000" x="50" y="27" width="59" height="14"></rect>
        <circle id="Oval" fill="#000000" cx="28" cy="66" r="10"></circle>
        <rect id="Rectangle" fill="#000000" x="50" y="59" width="59" height="14"></rect>
        <circle id="Oval" fill="#000000" cx="28" cy="98" r="10"></circle>
        <rect id="Rectangle" fill="#000000" x="50" y="91" width="59" height="14"></rect>
    </g>
</svg>

패스화 후

<?xml version="1.0" encoding="UTF-8"?>
<svg width="128px" height="128px" viewBox="0 0 128 128" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 54.1 (76490) - https://sketchapp.com -->
    <title>Combined</title>
    <desc>Created with Sketch.</desc>
    <g id="Combined" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <path d="M28,44 C22.4771525,44 18,39.5228475 18,34 C18,28.4771525 22.4771525,24 28,24 C33.5228475,24 38,28.4771525 38,34 C38,39.5228475 33.5228475,44 28,44 Z M50,27 L109,27 L109,41 L50,41 L50,27 Z M28,76 C22.4771525,76 18,71.5228475 18,66 C18,60.4771525 22.4771525,56 28,56 C33.5228475,56 38,60.4771525 38,66 C38,71.5228475 33.5228475,76 28,76 Z M50,59 L109,59 L109,73 L50,73 L50,59 Z M28,108 C22.4771525,108 18,103.522847 18,98 C18,92.4771525 22.4771525,88 28,88 C33.5228475,88 38,92.4771525 38,98 C38,103.522847 33.5228475,108 28,108 Z M50,91 L109,91 L109,105 L50,105 L50,91 Z" id="Combined-Shape" fill="#000000"></path>
    </g>
</svg>

SVG 압축

특별히 아무 것도 설정하지 않고 SVG로 내보낼 수 있지만 필요하지 않은 많은 태그가 포함되어 있습니다.<?xml version="1.0"> , <title> , <desc> 와 같은 meta 정보는 SVG 파일의 필수 태그가 아니므로 삭제할 수 있습니다. SVG는 xml이므로 VScode 등 편집기에서 열고 제거하는 것도 가능하지만, 매뉴얼로 하는 것은 매우 귀찮습니다. 따라서 웹 서비스, 일괄 재작성 도구 등을 사용하여 SVG를 압축합니다.

Sketch 플러그인으로 압축

Sketch 플러그인을 사용하여 내보낼 때 최적화하는 방법입니다. 사용법은 간단하고 BohemianCoding/svgo-compressor을 설치하는 것만으로 SVG 내보낼 때 압축 최적화하여 내보냅니다. 출력 결과는 다음과 같습니다.

SVGO.svg

<svg xmlns=“http://www.w3.org/2000/svg” width=“128” height=“128” viewBox=“0 0 128 128”>
  <path fill-rule=“evenodd” d=“M28,44 C22.4771525,44 18,39.5228475 18,34 C18,28.4771525 22.4771525,24 28,24 C33.5228475,24 38,28.4771525 38,34 C38,39.5228475 33.5228475,44 28,44 Z M50,27 L109,27 L109,41 L50,41 L50,27 Z M28,76 C22.4771525,76 18,71.5228475 18,66 C18,60.4771525 22.4771525,56 28,56 C33.5228475,56 38,60.4771525 38,66 C38,71.5228475 33.5228475,76 28,76 Z M50,59 L109,59 L109,73 L50,73 L50,59 Z M28,108 C22.4771525,108 18,103.522847 18,98 C18,92.4771525 22.4771525,88 28,88 C33.5228475,88 38,92.4771525 38,98 C38,103.522847 33.5228475,108 28,108 Z M50,91 L109,91 L109,105 L50,105 L50,91 Z”/>
</svg>

덧붙여 이 플러그인은, svgo 라고 하는 Node.js 베이스의 Optimizer를 사용하고 있으므로, 이것 단체를 Webpack이나 Gulp에 짜넣는 것으로, 빌드시 등에 일괄해서 압축, 라고 하는 방법도 생각할 수 있습니다.

웹 서비스를 이용한 압축

SVGOMG - SVGO’s Missing GUI 이라는 웹 서비스를 사용합니다. 사용법은 간단하며 서비스에서 압축하려는 SVG를 업로드하고 값을 조정하고 내보내면 최적화된 형태로 출력됩니다. 다른 서비스와 비교 검증했습니다만, 내보내기 사이즈적으로 제일 경량이 되었습니다.

svgomg.svg

<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M28 44c-5.523 0-10-4.477-10-10s4.477-10 10-10 10 4.477 10 10-4.477 10-10 10zm22-17h59v14H50V27zM28 76c-5.523 0-10-4.477-10-10s4.477-10 10-10 10 4.477 10 10-4.477 10-10 10zm22-17h59v14H50V59zm-22 49c-5.523 0-10-4.477-10-10s4.477-10 10-10 10 4.477 10 10-4.477 10-10 10zm22-17h59v14H50V91z" fill="#000" fill-rule="evenodd"/></svg>