Tạo animation từ SVG

Kéo file SVG vào, chọn kiểu animation, xem trước tức thì và xuất JSON + CSS cho lập trình viên — xử lý ngay trên máy bạn.

Kéo thả file SVG vào đây Chỉ nhận file .svg — nếu bạn có file .AI, hãy xuất sang SVG trong Illustrator trước

Xem trước

100%

Kiểu animation

Phạm vi animation

Độ trễ giữa các phần 80ms

Thời lượng 800ms

Độ trễ (delay) 0ms

Kiểu chuyển động (easing)

Lặp vô hạn

JSON gồm keyframes, thời lượng, easing, đoạn CSS @keyframes dán trực tiếp được, và cấu hình cho Web Animations API (element.animate). Dùng cho mọi framework, không cần thư viện.

✦ Hỏi đáp

Câu hỏi thường gặp

Công cụ này dùng để làm gì?

Công cụ này giúp bạn tạo animation cho các file SVG một cách dễ dàng. Bạn chọn preset (fade, slide, zoom, rotate, bounce), cấu hình timing, rồi xuất ra JSON hoặc CSS để sử dụng trong dự án của mình.

SVG là gì? Tôi có thể sử dụng hình ảnh thường không?

SVG (Scalable Vector Graphics) là định dạng vector, phù hợp cho logo, biểu tượng, và các hình vẽ đơn giản. Công cụ này chỉ hỗ trợ SVG vì SVG có cấu trúc XML cho phép animate từng phần riêng lẻ. Ảnh thường (JPG, PNG) không thể animate được.

Tôi có thể animate các phần khác nhau của SVG không?

Có. Nếu file SVG của bạn có các group hoặc element khác nhau (ví dụ: , , ), công cụ sẽ nhận diện chúng và cho phép bạn animate mỗi phần riêng lẻ với timing khác nhau (stagger effect).

Các preset animation có gì?

Công cụ hỗ trợ các preset phổ biến: Fade (mờ dần), Slide (trượt), Zoom (phóng to/thu nhỏ), Rotate (xoay), Bounce (nảy). Mỗi preset có các tùy chọn cấu hình khác như duration, delay, easing.

Tôi có thể copy code để sử dụng trong dự án không?

Có. Công cụ cung cấp hai tab: JSON (để sử dụng với JavaScript) và CSS (để sử dụng trực tiếp trong CSS). Bạn có thể bấm copy để sao chép code hoàn chỉnh.

Dữ liệu SVG của tôi có được lưu trữ không?

Không. Tất cả xử lý diễn ra hoàn toàn trên trình duyệt của bạn. File SVG không bao giờ được gửi đến máy chủ, bảo vệ quyền riêng tư.

Công cụ này có miễn phí không?

Hoàn toàn miễn phí, không cần tạo tài khoản. Bạn có thể tạo bao nhiêu animation tùy thích.

Tôi có thể customize animation thêm nữa không?

Có. Bạn có thể điều chỉnh duration (thời gian), delay (độ trễ), easing (tốc độ), và stagger effect (độ chênh lệch giữa các phần). Ngoài ra, bạn có thể sao chép code và tùy chỉnh thêm trong editor của mình.