SVG 코드 축소: ❮path❯ 항상 더 큰 것은 아닙니다.

저는 벡터 그래픽을 좋아합니다. 저는 SVG를 좋아합니다. 그리고 나는 바이트 압축의 좋은 세션을 좋아합니다.

내가 Medium's new logo 에 의해 촉발되었을 때 나는 심볼 아이콘에 대한 SVG 소스를 가지고 놀았는데, 그들이 "미완성 타원"이라고 부르는 것 — 그것의 "아름다움"에 들어가지 말자... (솔직히 나는 그것을 좋아하지 않는다. ; 별로 감흥이 없어 보입니다.)

이 게시물은 오늘 일찍SVG icon optimization 세션에서 있었던 작은 계시에 관한 것입니다.

대부분의 경우 <path> 요소는 다소 복잡한 그래픽에 사용됩니다. 그러나 미디엄 심볼의 경우 <circle> , <ellipse> (네, 미디엄, 그게 바로! :P) 등과 같은 매우 단순한 형태(일명 프리미티브)를 사용할 수 있음이 분명했습니다.

그리고 circle 또는 ellipse는 매우 간결한 방식으로 설명될 수 있는 반면 path는 직선, 곡선 및 호. 그들 모두는 일반적으로 기본 버전보다 더 많은 데이터를 포함합니다.

예: 원 대 경로

<!-- simple shape: a circle -->
<circle cx="500" cy="500" r="500"/>

<!-- converted to path -->
<path d="M1000 500a500 500 0 01-500 500A500 500 0 010 500 500 500 0
         01500 0a500 500 0 01500 500z"/>

그럼 모든 것이 좋고 우리는 집에 갈 수 있습니다. 그렇죠?

글쎄, 그렇게 빠르지 않습니다.
TIL 기본 코드가 전체 경로 정의보다 클 수 있는 경우 예외가 있습니다. 그리고 line 요소는 경로 대응 요소에 비해 항상 무거울 것이라고 생각합니다.

예: 선 대 경로

<!-- line primitive: -->
<line x1="0" y1="80" x2="100" y2="20" />
<!-- path equivalent: -->
<path  d="M0 80l100-60"/><!-- 16 chr -->

단 한 줄의 선은 그러한 차이를 만들지 않을 것이지만 많은 선은 쉽게 합산될 수 있습니다. 그리고 일반적으로 여러 줄을 단일 경로로 결합한다는 점을 감안하면 훨씬 더 절약하기 시작할 것입니다.

따라서 몇 개의 원, 타원 및 직사각형만 그리지 않는 한 단일 또는 결합된path 요소를 사용하는 것이 더 나을 것입니다.

아, SVG 코드를 최적화하는 아주 쉬운 방법은 사이트SVGOMG입니다. svgo 설치할 수 있다는 것을 알고 있지만 빠르고 더러운 패스를 위해 항상 해당 페이지를 방문하여 소스를 붙여넣고 얼마나 줄일 수 있는지 확인합니다.

마지막 참고 사항: 항상 가정을 확인하십시오. 나는 기본 형태의 오버헤드나 절약에 대해 100% 확신할 수 없었습니다. 몇 가지 증거를 얻기 위해 테스트를 실행한 것이 기쁩니다. 그리고 당신의 실험이 당신이 틀렸다고 말해도 두려워하지 마십시오. 인생이 다 그렇지. 🤷🏻‍♂️