SVG 최적화 – 스매싱 잡지

SVG 애니메이션은 나를 어렸을 때 본 한나-바르 베라 만화로 돌아갑니다. 쇼와 같은 쇼 엉뚱한 종족,,, Penelope Pitstop의 위험물론, 물론 요기 곰. 그들은 CSS, SVG 및 Smil Animations를 사용하여 클래식 툰 타이틀을 사랑스럽게 재현하도록 영감을주었습니다.

그러나 애니메이션을 빠르게로드하고 일을 원활하게 작동하려면 향수보다 더 많은 것이 필요합니다. 깨끗한 디자인, 린 코드 및 복잡한 SVG를 쉽게 애니메이션 할 수있는 프로세스가 필요합니다. 내가하는 방법은 다음과 같습니다.

개인 프로젝트 나 상업적 작업에 관계없이 SVG를 준비하면 액세스가 가능합니다. 이를 최적화하면 특히 모바일에 빠르게로드되도록하고 구조화 된 방법에 대해 신중하게 생각하면 더 쉽게 유지할 수 있습니다. 나는 개발했다 시각의 접근성 및 성능의 균형을 맞추는 프로세스 복잡한 SVG를보다 쉽게 ​​작업 할 수 있습니다.

그래서 내 과정을 설명하기 위해 나는 에피소드를 선택했다. 요기 곰 쇼 1960 년 1 월에 처음으로 방송 된“Bewitched Bear”라고 불렀습니다.이 이야기에서 Yogi는 마녀의 빗자루를 훔쳐서“Pic-a-Nic”바구니를 잡을 수 있도록 도와줍니다.

“이봐, 이봐 요!”

최적화를 염두에두고 깨끗하고 디자인을 시작하십시오

최적화되고 애니메이션 할 준비가 된 SVG를 만드는 데있어서 간단하게 유지하는 것이 중요합니다. Adobe Illustrator와 같은 도구는 비트 맵 이미지를 벡터로 변환하지만 출력에는 종종 너무 많은 외부 그룹, 레이어 및 마스크가 포함됩니다. 대신 스케치 청소를 시작하고 참조 이미지에서 작업하고 펜 도구를 사용하여 경로를 만듭니다.

팁: Affinity Designer (UK) 및 Sketch (네덜란드)는 Adobe Illustrator 및 Figma의 대안입니다. 둘 다 독립적이며 유럽에 기반을두고 있습니다. Sketch는 Adobe가 불꽃 놀이를 죽인 이래 기본 디자인 앱이었습니다.

윤곽선부터 시작합니다

이 Toon Titles Illustrations의 경우 먼저 펜 도구를 사용하여 가능한 한 앵커 포인트가 거의없는 검은 색 개요를 그립니다. 포인트가 많을수록 파일이 커지면 경로를 단순화하고 점수를 줄이면 SVG가 훨씬 작아서 종종 눈에 띄는 시각적 차이가 없습니다.

이 요기 일러스트레이션의 일부는 궁극적으로 애니메이션이 될 것이라는 점을 염두에두고, 나는이 멍청한 곰의 몸, 머리, 칼라 및 묶어 독립적으로 움직일 수 있도록 개별적으로 윤곽을 유지합니다. 머리가 고개를 끄덕일 수도 있고, 넥타이는 펄럭 일 수 있으며, 고전적인 만화에서와 마찬가지로 Yogi ‘s Collar는 그들 사이의 결합을 숨길 것입니다.

간단한 배경 모양을 그리십시오

윤곽선이 제자리에 있으면 펜 도구를 다시 사용하여 새로운 모양을 그리며 영역을 색상으로 채 웁니다. 이 색상은 윤곽선 뒤에 앉아 있으므로 정확히 일치 할 필요가 없습니다. 앵커 포인트가 적을수록 파일 크기가 작습니다.

슬프게도, 친화력 디자이너 나 스케치에는 경로를 단순화 할 수있는 도구가 없지만,이 있다면 Adobe Illustrator를 사용하면 이러한 배경 모양에서 몇 킬로 바이트를 면도 할 수 있습니다.

코드 최적화

SVG를 더 부피하게 만드는 것은 메타 데이터만이 아닙니다. 디자인 앱에서 내보내는 방식은 파일 크기에도 영향을 미칩니다.

Adobe Illustrator의 간단한 배경 모양 만 내보내기에는 불필요한 그룹, 마스크 및 부풀어 오른 경로 데이터가 기본적으로 포함됩니다. Sketch의 코드는 거의 더 나은 것이며 SVGO 압축기 코드에서도 개선의 여지가 충분합니다. 나는 SVGO V3를 사용하고 최고의 최적화 된 SVG를 지속적으로 제공하는 Jake Archibald의 SVGOMG에 의존합니다.

SVG 요소를 레이어링합니다

애니메이션을 위해 SVGS를 준비하는 과정은 벡터 드로잉 및 경로 최적화를 넘어서서 코드를 구조화하십시오 그 자체. 모든 시각적 요소가 단일 SVG 파일에 크램링되면 최적화 된 코드조차도 탐색하기위한 악몽 일 수 있습니다. 특정 경로 나 그룹을 찾는 것은 종종 건초 더미에서 바늘을 검색하는 것과 같은 느낌입니다.

그렇기 때문에 SVG를 레이어로 개발하여 한 번에 한 번의 요소 세트를 내보내고 최적화합니다. 항상 최종 파일에 표시됩니다. 이를 통해 각 청소 섹션에 붙여 넣어 마스터 SVG를 점차적으로 구축 할 수 있습니다. 예를 들어, 나는이 그라디언트 및 제목 그래픽과 같은 배경으로 시작합니다.

SVG 코드의 벽에 직면하는 대신 이제 백그라운드 그라디언트의 경로와 그와 관련된 것을 쉽게 식별 할 수 있습니다. linearGradient제목 그래픽이 포함 된 그룹을 참조하십시오. 이 기회를 통해 코드에 댓글을 추가하여 편집 및 애니메이션을 앞으로 쉽게 추가 할 수 있습니다.

다음으로, 나는 Yogi ‘s Airborne Broom의 흐릿한 트레일을 추가합니다. 여기에는 가우스 블러 필터를 정의하고 배경과 제목 레이어 사이에 경로를 배치하는 것이 포함됩니다.

그런 다음 같은 순차적 인 방식으로 추가 된 마법의 별을옵니다.

모든 것을 조직적이고 애니메이션 준비 상태로 유지하기 위해 Yogi의 모든 부분을 담을 수있는 빈 그룹을 만듭니다.

...

그런 다음 그의 빗자루와 같은 배경 소품부터 시작하여 처음부터 요기를 만듭니다.

...

그의 몸, 머리, 칼라 및 넥타이에 대한 그룹화 된 요소가 이어집니다.

  …
  …
  …
  …
  …

동일한 크기의 아트 보드에서 각 레이어를 내보내기 때문에 나중에 정렬 또는 포지셔닝 문제에 대해 걱정할 필요가 없습니다. 모두 자동으로 슬롯이 제자리에 들어갑니다. 나는 내 코드를 유지한다 깨끗한,,, 읽을 수 있습니다그리고 논리적으로 주문했습니다 이러한 방식으로 요소를 레이어링하여. 또한 각 구성 요소를 쉽게 식별 할 수 있으므로 애니메이션을 더 매끄럽게 만듭니다.

요소를 재사용합니다

중복 모양이 반복적으로 재사용되면 SVG 파일이 부피가 빨라질 수 있습니다. “Bewitched Bear”타이틀 카드의 레크리에이션에는 3 가지 크기의 80 개의 별이 들어 있습니다. 이러한 모든 모양을 하나의 최적화 경로로 결합하면 파일 크기가 3KB로 줄어 듭니다. 그러나 나는 개별 별을 애니메이션하고 싶다.

별을 움직이기 ‘ fill 부모 그룹의 속성 값은 전체 무게를 약간 줄입니다.

그러나보다 효율적이고 관리 가능한 옵션은 각 스타 크기를 재사용 가능한 템플릿으로 정의하는 것입니다.

이 설정을 사용하면 별의 디자인을 변경하면 템플릿을 한 번만 업데이트하고 모든 인스턴스가 자동으로 업데이트됩니다. 그런 다음 사용하는 각각을 참조합니다 그리고 그들과 함께 배치하십시오 x 그리고 y 속성 :

이 접근법은 특히 수십 개의 반복 요소로 작업 할 때 SVG를보다 쉽게 ​​관리하고 가볍고로드하기가 더 가벼우 며 반복하기가 더 빠릅니다. 무엇보다도 마크 업을 깨끗하게 유지합니다 유연성이나 성능을 손상시키지 않고.

애니메이션 추가

Yogi의 도난 빗자루 뒤에있는 별들은 애니메이션에 많은 성격을 가져다줍니다. 나는 그들이 진한 파란색 배경에 대해 겉보기에 임의의 패턴으로 반짝이는 것을 원했기 때문에, 나는 다른 것을 순환하는 키 프레임 애니메이션을 정의하기 시작했습니다. opacity 레벨 :

@keyframes sparkle {
  0%, 100% { opacity: .1; }
  50% { opacity: 1; }
}

다음 으로이 루핑 애니메이션을 모든 사람에게 적용했습니다 use 내 별 내부의 요소 그룹 :

#stars use {
  animation: sparkle 10s ease-in-out infinite;
}

설득력있는 반짝임을 만드는 비결이 있습니다 변화. 나는 별을 사용하여 애니메이션 지연과 기간을 비틀 거리며 nth-child 가장 빠르고 가장 빈번한 반짝임 효과로 시작하는 선택기 :

/* Fast, frequent */
#stars use:nth-child(n + 1):nth-child(-n + 10) {
  animation-delay: .1s;
  animation-duration: 2s;
}

거기에서 나는 추가 타이밍을 쌓아서 물건을 혼합했습니다. 어떤 별은 천천히 극적으로 반짝이며, 다른 별들은 다양한 리듬과 일시 정지로 더 무작위로 반짝입니다.

/* Medium */
#stars use:nth-child(n + 11):nth-child(-n + 20) { ... }

/* Slow, dramatic */
#stars use:nth-child(n + 21):nth-child(-n + 30) { ... }

/* Random */
#stars use:nth-child(3n + 2) { ... }

/* Alternating */
#stars use:nth-child(4n + 1) { ... }

/* Scattered */
#stars use:nth-child(n + 31) { ... }

SVG를 신중하게 구조화하고 요소를 재사용함으로써 블로 된 코드없이 복잡한 애니메이션을 구축 할 수있어 변경과 같은 간단한 효과조차 할 수 있습니다. opacity 불꽃.

그런 다음 현실감을 추가하기 위해 Yogi의 머리를 흔들립니다.

@keyframes headWobble {
  0% { transform: rotate(-0.8deg) translateY(-0.5px); }
  100% { transform: rotate(0.9deg) translateY(0.3px); }
}

#head {
  animation: headWobble 0.8s cubic-bezier(0.5, 0.15, 0.5, 0.85) infinite alternate;
}

그의 넥타이 파동 :

@keyframes tieWave {
  0%, 100% { transform: rotateZ(-4deg) rotateY(15deg) scaleX(0.96); }
  33% { transform: rotateZ(5deg) rotateY(-10deg) scaleX(1.05); }
  66% { transform: rotateZ(-2deg) rotateY(5deg) scaleX(0.98); }
}

#tie {
  transform-style: preserve-3d;
  animation: tieWave 10s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
}

그의 빗자루 스윙 :

@keyframes broomSwing {
  0%, 20% { transform: rotate(-5deg); }
  30% { transform: rotate(-4deg); }
  50%, 70% { transform: rotate(5deg); }
  80% { transform: rotate(4deg); }
  100% { transform: rotate(-5deg); }
}

#broom {
  animation: broomSwing 4s cubic-bezier(0.5, 0.05, 0.5, 0.95) infinite;
}

그리고 마침내 요기는 마법의 빗자루에서 날아갈 때 부드럽게 회전합니다.

@keyframes yogiWobble {
  0% { transform: rotate(-2.8deg) translateY(-0.8px) scale(0.998); }
  30% { transform: rotate(1.5deg) translateY(0.3px); }
  100% { transform: rotate(3.2deg) translateY(1.2px) scale(1.002); }
}

#yogi {
  animation: yogiWobble 3.5s cubic-bezier(.37, .14, .3, .86) infinite alternate;
}

이 모든 미묘한 움직임은 요기에 생명을 불어 넣습니다. 구조화 된 SVG를 개발함으로써 한 줄의 JavaScript를 쓰지 않고 캐릭터로 가득 찬 애니메이션을 만들 수 있습니다.

직접 시도해보십시오.

결론

클래식 타이틀 카드를 재현하거나 인터페이스에 대한 애니메이션 아이콘에 관계없이 원리는 동일합니다.

1. 깨끗하게 시작하고
2. 일찍 최적화하고
3. 애니메이션을 염두에두고 모든 것을 구조하십시오.

SVG는 놀라운 창의적 자유를 제공하지만 유지 된 경우에만 가능합니다 기대다 그리고 다루기 쉬운. 프로세스를 생산 셀과 같은 프로세스 (레이어별로 레이어, 요소별로) 계획 할 때 코드를 풀고 시간을 덜 소비하고 작업에 더 많은 시간을 할애 할 수 있습니다.

(GG, YK)