벡터 그래픽은 이제 웹 및 모바일 응용 프로그램을 대신합니다. 웹 페이지 또는 모바일 앱의 아이콘, 버튼 및 요소는 점점 더 벡터 기반이되어 모든 종류의 화면 해상도, dpi, 비율 등에서 렌더링해야 할 필요성과 비트 맵을 "확대"할 수있는 유용한 기능 때문에 모바일 브라우저에서 더 나은 읽기 페이지는 비트 맵 자산을 더 이상 못 생기고 사용할 수 없게 만들었습니다.

SVG에서 애니메이션 아이콘, 배경 및 컨트롤을 만들 차례입니다. 그러나 SVG 파일을 어떻게 애니메이션합니까?

이 답변 중 많은 부분이 웹 관련 일러스트레이션에 애니메이션을 적용하는 방법에 관한이 관련 질문 에 게시되어 있습니다.

SMIL 애니메이션 피하기

아마도 웹상에서 SVG 의 최고의 애니메이터 인 Sara Soueidan 은 " SMIL 애니메이션에 대한 가이드를 작성 했지만 그들의 미래를보고 더 이상 개인적으로 사용하지는 않는다"고 썼다. 당신도해서는 안됩니다.

SMIL 애니메이션이 어떤 IE, 에지, 일부 모바일 브라우저에서 작동하지 않는 ,되고 점차 크롬 / 오페라 끊어지는 (하지만, 최근에는 크롬 팀은 말했다 이 중단이 일시적으로 중지됩니다 ). 99 %의 시간 사용을 피해야합니다.

매우 간단한 애니메이션에 CSS 사용

SVG는 대부분 순수한 CSS ( :hover상태, transforms, transitions 및 animations 사용) 를 사용하여 애니메이션 할 수 있습니다 . 그건 전체 CSS 애니메이션 지원을받을 계획 이지만 현재 일부 지원 및 크로스 브라우저 문제와 버그가 될 수 있습니다.

사라 수에 이단 (Sara Soueidan) 은 CSS는 SVG 애니메이션에 적합하지만 이러한 크로스 브라우저 문제를 해결하는 데 도움이되기 때문에 JS를 선호 한다고 말합니다 . 따라서 애니메이션이 더 복잡하거나 브라우저 간 작동하지 않으면 JS로 다시 넘어갈 수 있으면 사용하십시오.

CSS가 작동하지 않으면 JavaScript 애니메이션 사용

대부분의 경우 SVG는 JavaScript 애니메이션 라이브러리가 없어도 작은 JavaScript를 사용하여 애니메이션 할 수 있습니다. JS에서의 애니메이션은 브라우저 간 지원이 훨씬 많으며 기본적인 이해로 사용하기가 쉽습니다.

타임 라인 또는 이와 유사한 것을 사용해야하는 복잡한 애니메이션의 경우 GSAP 와 같은 라이브러리를 사용하면 매우 유용 할 수 있습니다. 수많은 SVG 애니메이션 라이브러리가 있으며 Snap.svg 는 또 하나의 큰 라이브러리 이지만 대부분 GSAP만큼이나 쉽게 애니메이션을 처리하지는 않습니다.

특정 유형 의 애니메이션의 경우 GSAP MorphSVG 와 같은 특정 JS 플러그인을 사용 하면 크로스 브라우저 문제와 모든 계산을 처리하므로 시간을 크게 절약 할 수 있습니다. 그러나 대부분의 애니메이션에는 이와 같은 플러그인이 필요하지 않습니다. 자세한 내용은 "SMIL 기능에 대한 대안 안내서" 를 참조하십시오.

SMIL에 폴리 필을 사용하는 것도 가능하지만 널리 사용 / 테스트되지 않았기 때문에 지루합니다. 그 존재가 말한다면, 에릭 윌리 거가 및 FakeSmile은 가장 일반적인 두 가지입니다.

압형

SVG + JS로 내보내는 유일한 소프트웨어는 Lottie (이전 Bodymovin) 라는 Adobe After Effects 플러그인 , Flash 2 SVG 라는 Flash 확장 프로그램 및 SVG Circus 라는 작은 온라인 도구 입니다. 그 외에도 Adobe Edge Animate, Adobe Animate CC 또는 Animatron 과 같은 소프트웨어 애니메이터는 사용하지 않아야하는 SMIL 애니메이션으로 내 보냅니다. 따라서 일부 개발자가 편집기에서 내 보낸 SVG를 사용하여 SVG + CSS 또는 SVG + JS 애니메이션을 만드는 것이 가장 좋습니다 . Inkscape에는 훌륭한 리소스 연결 자습서와이를 수행하는 방법에 대한 예가 있습니다.

앞으로 더 많은 애니메이션 소프트웨어가 SVG + JS로 내보내기를 지원할 것이라고 확신합니다.

다른 중요한 메모

• 성능 을 염두에 두어야 합니다 . Sara Drasner 는 SVG에 대한 일부 성능 벤치 마크를 만들었습니다. 이는 가능한 경우 하드웨어 가속 CSS 애니메이션을 선택해야하지만 가능하지 않은 경우 에는 우수한 JavaScript 접근 방식으로 대체해야한다는 것을 보여줍니다 .

• 대화식의 경우 대화식이 아닌 경우 대화식이 아닌 경우 배경 이미지로 <object>태그에 포함되거나 <svg>XML 요소에 직접 포함 된 SVG를 사용하는 것이 가장 좋지만 다른 방법 도 있습니다.

웹 애니메이션에 대한 전체적인 내용은 Rachel Nabor의 A List Part 게시물을 참조하십시오 . 툴링에 대한 몇 가지 추가 제안에 대해서는 이 게시물 이 매우 유용하지만 모든 감정, 특히 SMIL 애니메이션을 표시하는 방법에 동의하지는 않습니다.

나는 항상 JS 라이브러리 이외의 것에 의존하여 WRT 지원 / 유지 보수에 큰 고통을 겪는 것을 발견했습니다.

나는 항상 D3.js를 사용했습니다 . 원래 데이터 세트에서 대화식 SVG / DOM 요소를 작성하기 위해 작성되었습니다. 그러나 JS가 액세스 할 수있는 한 페이지에 포함 된 SVG / DOM을 수정할 수 있습니다.

SVG / DOM을 생성 / 애니메이션하기 위해 다양한 프로젝트에서 사용했습니다. 일부 예제에는 소프트 실시간 대시 보드, 맵 시각화, DOM 변환 및 PDF에 포함 할 SVG 파일 작성이 포함됩니다. 나는 웹 전체에서 그것을 보았다. 웹 사이트에는 많은 예제와 웹 사이트를 사용한 페이지 링크가 있습니다.

브라우저 간 호환성이 뛰어나고 활발한 커뮤니티가 있으며 배우기 쉽기 때문에 추천합니다. 웹 페이지를 살펴보고 실제 사용에주의를 기울여 웹 페이지로 수행 할 수있는 작은 샘플을보십시오.

다음은 svg에 애니메이션을 적용 할 수있는 방법입니다.

SVG 작은 애니메이션

SVG는 Adobe Animate CC + flash2svg 플러그인과 같은 애니메이션 도구에서 직접 내 보낸 SMIL이라는 강력한 기본 마크 업 언어를 통해 애니메이션을 적용 할 수 있습니다.

지원되지 않는 브라우저에서도 SMIL을 사용하여 SVG에 애니메이션을 적용하려면 SMIL 폴리 필 만 사용하면됩니다.

폴리 필은 브라우저에서 누락 된 기능을 지원하여 브라우저가 이해할 수있는 원래 인코딩을 번역하는 특수한 자바 스크립트 코드입니다.

Eric Willigers가 만든 SMIL 폴리 필은 바로 그 기능을 수행합니다. SMIL을 Microsoft 브라우저에서도 지원하는 Web Animations API로 변환합니다. Chrome 개발자가 기본 SMIL 지원을 중단하고 웹 애니메이션에 집중하기로 결정한 것은 매우 효율적이므로 Eric Willigers는 Chrome에서 SMIL 파일을 재생하는 작업을 폴리 필로 채 웁니다.

누군가가 Chrome에서 SMIL을 더 이상 사용하지 않는다고 잘못 해석 하고이 선택에 대해 개발자를 비판했습니다. 그러나 이는 실제 사용 중단이 아니라 폴리 필 수준에서 SMIL 해석 작업의 재배치 일뿐입니다.

실제로 크롬 개발자들은 SMIL을 더 이상 사용하지 않으려는 의도에 대한 공식 발표에서 Willigers polyfill을 인용했습니다.

따라서 SMIL의 소멸에 대해 웹을 읽더라도 걱정하지 마십시오. SMIL의“죽음”은 크게 악화되었습니다. 그것은 중생과 같습니다.

IE 및 EDGE를 포함한 모든 브라우저에서 SMIL을 사용하려면 다음 자바 스크립트 폴리 필을 웹 페이지에 추가하면됩니다.

https://github.com/ericwilligers/svg-animation

다음은 널리 사용되는 flash2svg 내보내기 작성자 인 Tom Byrne이 만든 polyfill을 사용한 데모 페이지입니다.

폴리 필이없는 페이지 :
http://www.tbyrne.org/staging/smil-polyfill/tears.htm

폴리 필이있는 동일한 페이지 :
http://www.tbyrne.org/staging/smil-polyfill/tears_polyfill.htm

소스를 살펴보면 설명이 거의 필요 없습니다.

또한 많은 브라우저에서 웹 애니메이션은 하드웨어 가속되고 SMIL은 일반적으로 그렇지 않기 때문에 폴리 필의 성능은 종종 원래 SMIL보다 우수합니다.

SVG SMIL의 내보내기 애니메이션

SVG 애니메이션을 생성하는 가장 간단한 방법은 Adobe Animate CC와 같은 도구를 사용하여 Flash2svg ( https://github.com/TomByrne/Flash2Svg ) 와 같은 플러그인 을 사용하여 SVG로 내보내는 것입니다. 그것으로 당신은이 만화 에피소드와 같이 거의 모든 애니메이션 + 사운드를 단일 SVG 파일로 내보낼 수 있습니다 :
http://www.tbyrne.org/portfolio/smil/LoveDota.svg

SVG 애니메이션 JS 라이브러리

자바 스크립트 방식이 더 복잡합니다. 우선 자바 스크립트 프로그래머가되어야합니다. 그런 다음 많은 라이브러리 중에서 선택해야합니다. 더 인기가 있습니다 :

• SnapSVG http://snapsvg.io
  이 라이브러리는 같은 저자가 만든 오래되고 인기있는 Raphael 애니메이션 라이브러리의 후속 버전입니다. 매우 안정적이지만 런타임시 SVG를 내부 형식으로 변환하여 애니메이션을 적용합니다. 모핑 옵션도 매우 기본적이고 선형 보간입니다. (참고 : Adobe Animate CC 용 snap.svg 플러그인도 있지만 내 보낸 파일이 부풀려집니다. 내보내기는 모든 키 프레임이 아닌 애니메이션의 모든 프레임에 대해 하나의 snap svg 명령을 생성하여 1000 개 이상의 라인이있는 18Kb svg 파일을 생성합니다. 간단한 사각형을 360 도로 회전시키기 위해 Flash2svg 플러그인은 훨씬 더 효율적이며, 하나의 명령과 몇 바이트만으로 같은 작업을 수행 할 수 있습니다.

• Greensock MorphSVG
  http://greensock.com/morphSVG
  SVG를 쉽게 애니메이트하고 내부 형식으로 변환 할 필요가없는 완전한 기능을 갖춘 모핑 라이브러리입니다. Inkscape에서 3-4 개의 svg 키 프레임을 만들면 Greenock SVGMorphing lib가 자동으로 프레임 사이를 보간하여 중간 프레임을 모두 만들어 부드러운 재생이 가능합니다. 예를 들면 다음과 같습니다.
  http://codepen.io/Emasoft/pen/reOqYE

• 3D Seen.js
  http://seenjs.io/demo-svg-canvas.html 3D
  로 애니메이션을 만들고 싶다면이 라이브러리는 매우 강력합니다.
  Seen.js는 3D .obj 파일 메시를 SVG로 렌더링하고 매우 쉽게 애니메이션합니다.

SVG 이미지 편집자

도구는 주로 세 가지 소프트웨어로 애니메이션 키 프레임을 만들 수 있습니다.

• Inkscape : 오픈 소스, 수많은 기능, SVG 실무 그룹에 참여하는 사람들이 만든 고급 벡터 편집 패키지. SVG 형식에 대한 참조입니다. 배우기 쉽지 않습니다.

• Adobe Illustrator : 상용의 매우 강력한 벡터 드로잉 소프트웨어로 SVG에서 지원하지 않는 많은 기능을 제공하지만 형식과의 호환성이 가장 낮습니다. 일러스트 레이터 엉망을 해결하기 위해 내 보낸 SVG 파일을 수동으로 편집해야하는 경우가 종종 있습니다. 그러나 그것은 미술 학교에서 매우 인기가 있으며 모든 그래픽 전문가는 그것을 사용하는 방법을 알고 있습니다.

• Affinity Designer : Illustrator와 같은 상업용 소프트웨어이지만 잉크 스케이프 수준에서 거의 SVG 호환성이 뛰어납니다. UI가 훨씬 친숙해졌으며 이제 SVG 아티스트들 사이에서 인기가 높아지고 있습니다.

SVG 애니메이션 에디터

현재 유일한 SVG 애니메이션 편집기는 다음과 같습니다.

• Adobe Animate CC : 이전 Adobe Flash Pro는 현재 사용되지 않는 플래시 애니메이션에서 최신 SVG 애니메이션으로 마이그레이션하기 위해 Adobe에서 완전히 다시 작성했습니다. SVG 애니메이션을 사용자 정의 자바 스크립트 라이브러리와 함께 내보내거나 "flash2svg"와 같은 플러그인을 사용하여 SVG + SMIL로 저장하도록 선택할 수 있습니다. 이 마지막 옵션은 매우 효율적이므로 부풀린 기본 내보내기 대신 항상 사용합니다.

https://github.com/TomByrne/Flash2Svg 에서 무료 플러그인을 다운로드 할 수 있습니다.

또는 Adobe 플러그인 패널 ( https://creative.adobe.com/addons/products/7232) 에서 설치 하십시오.

불행히도 Adobe Animate CC는 상업용입니다. 무료 오픈 소스 대체 애니메이션 응용 프로그램이 있지만 모두 시도했지만 여전히 IMHO를 빨아들입니다. 미래를 희망합시다.

참고 문헌 :
주제에 대한 나의 더 철저한 블로그 게시물 : https://medium.com/@fmuaddib/the-following-are-the-possible-ways-to-create-professional-animations-in-svg-9d4caca5f4ec

snap.svg에 대한 사례 : /programming/35727635/adobe-animate-snap-svg-plugin-huge-files