맥동하는 원
중심을 기준으로 크기가 변하는 애니메이션입니다. 베지에 점 네 개로 이루어진 단순한 닫힌 경로를 통해 변형 문제를 따로 확인할 수 있습니다.
512 × 512 · 60 FPS · 2 초 · 394 바이트
SVG / TGS / JSON
Telegram용 SVG·TGS 예제: 원본 파일 무료 다운로드
동작을 이해하기 쉬운 작은 파일부터 시작하세요. 학습을 위해 제작한 세 가지 예제는 맥동하는 원, 움직이는 화살표, 정적인 체크 표시입니다. 각 예제에는 원본 SVG, TGS 파일, 압축하지 않은 해당 Lottie JSON이 포함되어 있습니다.
카드에는 정적인 원본 SVG가 표시됩니다. 움직임은 TGS와 JSON에 저장되어 있으며 SVG에는 들어 있지 않습니다. 프로그래밍으로 만든 학습용 예제이며, 사용자가 업로드한 파일에서 가져온 것이 아닙니다.
움직이는 화살표
도형을 회전하지 않고 위치만 바꾸는 애니메이션입니다. 원본에는 세로로 56픽셀 이동할 수 있는 충분한 여유 공간이 있습니다.
512 × 512 · 60 FPS · 2 초 · 381 바이트
정적인 체크 표시
끝이 둥근 선으로 그린 열린 경로이며 움직임은 없습니다. 선의 두께를 비교하고 정적인 TGS와 PNG의 차이를 확인하는 데 사용할 수 있습니다.
512 × 512 · 60 FPS · 3 초 · 342 바이트
예제 사용 방법
- SVG를 다운로드해 벡터 편집기에서 엽니다. 도형 하나만 들어 있으며, 삽입된 사진이나 텍스트로 편집할 수 있는 텍스트 개체는 없습니다.
- 변환기를 열고 SVG를 선택한 다음 Telegram으로 로그인합니다. 파일을 선택하면 진단용 사본이 서비스로 전송됩니다. 이 예제에도 같은 방식이 적용됩니다.
- 움직임 또는 정적 모드를 선택하고 미리보기를 확인한 뒤 TGS를 내보냅니다. 변환기 프리셋의 타이밍과 움직임은 여기에서 제공하는 학습용 TGS와 다를 수 있습니다.
- 내보낸 파일과 예제의 캔버스 크기, fr, op, layers, 애니메이션이 적용된 속성을 비교합니다. 그런 다음 Telegram에서 @Stickers를 통해 파일을 확인합니다.
확인한 항목
프로젝트 검증기는 gzip, JSON, 512 × 512 캔버스, 60 FPS, 최대 3초의 길이, 64 KB 미만의 압축 파일 크기, 지원되는 도형 데이터를 검사합니다. 각 예제는 외부 이미지가 없는 레이어 하나로 구성되어 있으며, 애니메이션 속성의 첫 값과 마지막 값이 같습니다. 이는 구조 검사이며, 각 파일이 Telegram 서버에서 수락되었다는 확인은 아닙니다.
JSON에서 살펴볼 항목
fr 필드는 프레임 속도를 정하고, op는 컴포지션의 끝을 표시하며, layers는 레이어 목록을 담습니다. 원은 ks.s에서 크기를, 화살표는 ks.p에서 위치를 애니메이션으로 바꿉니다. 체크 표시는 열린 경로로, c 값이 false이며 st 항목이 선을 정의합니다. a 값이 0이면 해당 속성에는 키프레임이 없습니다.
자신의 프로젝트에 재사용하세요
이 세 가지 예제는 SVG to TGS 팀이 제작했습니다. 비용이나 필수 출처 표기 없이 복사, 수정, 재배포할 수 있으며 상업용 프로젝트에도 사용할 수 있습니다. 이 허가는 이 세 파일 세트에만 적용되며, 사이트의 소스 코드, 로고, 제삼자의 작품에는 적용되지 않습니다.
원본 파일을 보관하세요
변환기는 원본 SVG를 입력받습니다. 여기에서 다운로드하는 TGS와 JSON은 검사와 비교를 위한 파일이며, 변환기로 다시 가져올 수 없습니다. 나중에 편집할 수 있도록 SVG를 별도로 보관하세요. 복잡한 로고를 시험하기 전에 간단한 예제로 같은 작업 과정을 자신의 기기에서 끝까지 수행할 수 있는지 확인하세요.