صادرات SVG

انیمیشن های خود را به عنوان فایل های SVG برای گرافیک های جاسازی شده و مقیاس پذیر وارد کنید.

هنگام استفاده از SVG

SVG ها زمانی ایده آل هستند که:

  • سرگرمی انیمیشن در وب سایت ها
  • مقیاس پذیری بی نهایت مورد نیاز است
  • اندازه فایل کوچک مهم است
  • شما نیاز به خروجی بردار قابل ویرایش دارید

صادرات به عنوان SVG

  1. Click Export در هدر
  2. گزینه Animated SVG
  3. Click Export
  4. دانلود فیلم بلافاصله

پشتیبانی انیمیشن

پشتیبانی کامل

انیمیشن خروجی SVG
پالس XQ
چرخش XQ
Bounce XQ
Fade XQ
دانلود بازی Wobble XQ
اسلاید Slide XQ
افزایش ظهور XQ

پشتیبانی نکردن از ❌

ویژگی های دلیل
تایپ نامه نیاز به JavaScript
اثرات (Sparkle, Blast) انیمیشن های مبتنی بر فریم
چرخش الگو بر اساس
چارچوب های کلیدی پیچیده پشتیبانی محدود SMIL

XQ

  • پشتیبانی سریع: ** انیمیشن های SVG از SMIL استفاده می کنند که در Chrome، فایرفاکس، Safari و Edge پشتیبانی می شود. برخی از مرورگرهای قدیمی ممکن است SVG استاتیک را نشان دهند.

XQ

بازاریابی در وب سایت ها

Direct Embed

<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 قابل ویرایش هستند. شما می توانید:

  • باز در یک ویرایشگر متن
  • رنگ ها، اندازه ها، زمان بندی
  • Add CSS Style
  • برگرفته از JavaScript

آنچه صادرات می کند

عنصر صادرات
متن عناصر <text>
شکل ها <path>، <circle>، و غیره.
پس زمینه <rect>
انیمیشن ها برچسب های SMIL <animate>

اندازه فایل

فایل های SVG معمولا بسیار کوچک هستند:

  • انیمیشن ساده: 2-10 کیلوبایت
  • صحنه پیچیده: 20-50 KB
  • بسیار کوچکتر از GIF یا MP4

نکات کلیدی

XQ

نکات SVG:

  • از SVG برای جاسازی وب استفاده کنید که در آن کیفیت مهم است
  • اجتناب از اثرات و انیمیشن های تایپ کننده
  • تست در مرورگرهای هدف
  • SVG ها را می توان با CSS پس از جاسازی

XQ

بازگشت به انیمیشن های پشتیبانی نشده

اگر طراحی شما از ویژگی های پشتیبانی نشده استفاده می کند:

  1. صادرات به عنوان MP4 یا GIF برای نسخه متحرک
  2. صادرات به عنوان PNG برای بازپرداخت استاتیک
  3. استفاده از عنصر <picture>0Q برای پیشرفت پیشرفته