Xuất SVG hoạt cảnh

3 min read

Xuất các hoạt hình của bạn ra dạng tập tin SVG cho đồ họa có thể tải lên web.

Khi dùng SVG

SVG là lý tưởng khi:

  • Đang nhúng hoạt hình trên các trang web
  • Cần phải có khả năng sinh sản vô hạn
  • Kích cỡ tập tin nhỏ là quan trọng
  • Bạn cần phải sửa đổi kết xuất véc- tơ

Xuất ra SVG

  1. Click Export vào đầu trang
  2. Chọn Một trò chơi SVG*
  3. Click Export
  4. Tập tin tải xuống ngay

Hỗ trợ hoạt hình

Hoàn toàn ủng hộ

Hoạt hình Xuất SVG
Mạch <animateTransform type="scale">
Xoay <animateTransform type="rotate">
Va đập <animateTransform type="translate">
Bóng <animate attributeName="opacity">
Wobble <animateTransform type="rotate">
Slide <animateTransform type="translate">
Đứng lên <animateTransform type="translate">

Không được hỗ trợ

Tính năng Lý do
Trình soạn thảo kiểu Cần thiết JavaScript
Hiệu ứng (ổ tay, Nổ) Hoạt hình dựa trên khung
Quay mẫu dựa trênFrame
Khung phím phức tạp Hỗ trợ SMIL hạn chế

Browser Hỗ trợ: Hoạt hình SVG sử dụng SMIL, được hỗ trợ trong Chrome, Firefox, Safari, và Edge. Một số trình duyệt cũ có thể hiển thị tĩnh SVG.

Nhúng vào các trang mạng

Embed trực tiếp

<img src="animation.svg" alt="Animated graphic">

Trực tiếp SVG

Để điều khiển thêm, dán mã SVG trực tiếp:

<svg viewBox="0 0 800 600">
  <!-- SVG content -->
</svg>

Nền CSS

.element {
  background-image: url('animation.svg');
}

Tùy chỉnh sau khi xuất

Tập tin SVG có thể sửa XML. Bạn có thể:

  • Mở trong trình soạn thảo văn bản
  • Sửa đổi màu, cỡ, thời gian
  • Thêm mục CSS
  • JavaScript tự chọn

Những gì được xuất

Phần tử Xuất ra
Văn bản Thành phần XQQ
Hình <path>, <circle>, vv.
Nền <rect> với đầy
Hoạt ảnh Thẻ SMIL <animate>

Cỡ tập tin

Tập tin SVG thường rất nhỏ:

  • Hoạt hình đơn giản: 2-10 KB
  • Cảnh phức tạp: 2050 KB
  • Nhỏ hơn nhiều GIF hay MP4

Mẹo

Mẹo SVG:

  • Dùng SVG cho nhúng web nơi chất lượng quan trọng
  • Tránh hiệu ứng và hoạt hình máy đánh chữ
  • Thử ra trình duyệt đích
  • Name

Name

Nếu thiết kế của bạn sử dụng các tính năng không được hỗ trợ:

  1. Xuất dạng MP4 hoặc GIF cho phiên bản hoạt hình
  2. Xuất ra PNG cho hậu phương tĩnh
  3. Sử dụng yếu tố XQQ để tăng cường dần