ส่งออกเป็น PGPG0X แบบเคลื่อนไหว

2 min read

ส่งออกแอนิเมชันของคุณเป็นแฟ้ม SVG สําหรับการฝังเว็บ และกราฟิกแบบ Scalable.

เมื่อใช้ SVG

SVGs เป็นอุดมคติเมื่อ:

การฝังภาพเคลื่อนไหวบนเว็บไซต์
จําเป็น ต้อง ใช้ ความ ยืดหยุ่น ที่ ไม่ ครบ ถ้วน
ขนาดแฟ้มเล็กนั้นสําคัญ
คุณต้องการการแสดงผลของเวกเตอร์ที่แก้ไขได้

ส่งออกเป็น SVG

คลิ้ก~ * sport in the head
เลือก~
คลิก
ดาวน์โหลดแฟ้มในทันที

การรองรับการเคลื่อนไหว

การ สนับสนุน เต็ม ที่ ○

ภาพเคลื่อนไหว	ส่งออกไปยัง SVG
ชีพจร	`<animateTransform type="scale">`
หมุน	`<animateTransform type="rotate">`
กระเด้งกระดอน	`<animateTransform type="translate">`
ค่อย ๆ จางหาย	`<animate attributeName="opacity">`
นก แก้ว	`<animateTransform type="rotate">`
ภาพนิ่ง	`<animateTransform type="translate">`
ขึ้น	`<animateTransform type="translate">`

ไม่สนับสนุน ❌

คุณสมบัติ	เหตุผล
ตัวพิมพ์	ต้องการจาวาสคริปต์
เอฟเฟ็ค (เสียงดัง, ระเบิด)	ภาพเคลื่อนไหวบนเฟรม
การหมุนรูปแบบ	โดยอยู่บนเตียง
กรอบกุญแจ Complex	การรองรับ SMIL จํากัด

~ โบรว์เซอร์รองรับ: ~ SVG แอนิเมชันใช้ SMIL ซึ่งได้รับการสนับสนุนใน Charome, Firefox, Saveri และ Edge. ตัวเรียกดูรุ่นเก่าบางตัว อาจจะแสดงแบบคงที่ SVG.

การฝังตัวบนเว็บไซต์

ซ่อนโดยตรง

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

ในบรรทัด SVG

สําหรับการควบคุมเพิ่มเติม SVG รหัสโดยตรง:

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

พื้นหลัง CSS

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

ปรับแต่งค่าหลังการส่งออก

แฟ้ม SVG สามารถแก้ไข XML ได้ คุณสามารถ :

เปิดในเครื่องมือแก้ไขข้อความ
แก้ไขสี, ขนาด, เวลา
เพิ่มเสียงแหลม:
จาวาสคริปต์ที่ฝังตัวเอง

อะไร ที่ ถูก ส่ง ออก

อีลีเมนต์	ส่งออกเป็น
ข้อความ	สมาชิกของ XQQ
รูปร่าง	`<path>`, `<circle>` เป็นต้น.
พื้นหลัง	`<rect>` โดยเติมข้อมูล
ภาพเคลื่อนไหว	ป้ายกํากับ SMILQ0Q

ขนาดแฟ้ม

แฟ้ม SVG โดยปกติจะมีขนาดเล็กมาก:

ภาพเคลื่อนไหวแบบเรียบง่าย: 2- 10 KB
ภาพ ประกอบ: 20-50 KB
น้อยกว่า GIF หรือ MP4 มาก

ข้อ แนะ

คําแนะนํา SVG:

ใช้โปรแกรม SVG สําหรับเว็บที่โปรแกรมสร้างคุณภาพสําคัญ
หลีกเลี่ยงลูกเล่นและการเคลื่อนไหวของเครื่องพิมพ์ดีด
ทดสอบในเบราว์เซอร์เป้าหมาย
SVGs สามารถจัดรูปแบบร่วมกับ CSS ได้หลังจากการฝัง

การ ถอย หลัง สําหรับ สิ่ง มี ชีวิต ที่ ไม่ ได้ รับ การ สนับสนุน

ถ้าการออกแบบของคุณใช้คุณสมบัติที่ไม่รองรับ:

ส่งออกเป็น MP4 หรือ GIF สําหรับรุ่นเคลื่อนไหว
ส่งออกเป็น PNG สําหรับความล้มเหลวแบบคงที่
ใช้องค์ประกอบ <picture> สําหรับการปรับปรุงขั้นสูง