صادرات SVG
انیمیشن های خود را به عنوان فایل های SVG برای گرافیک های جاسازی شده و مقیاس پذیر وارد کنید.
هنگام استفاده از SVG
SVG ها زمانی ایده آل هستند که:
- سرگرمی انیمیشن در وب سایت ها
- مقیاس پذیری بی نهایت مورد نیاز است
- اندازه فایل کوچک مهم است
- شما نیاز به خروجی بردار قابل ویرایش دارید
صادرات به عنوان SVG
- Click Export در هدر
- گزینه Animated SVG
- Click Export
- دانلود فیلم بلافاصله
پشتیبانی انیمیشن
پشتیبانی کامل
| انیمیشن | خروجی 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
بازگشت به انیمیشن های پشتیبانی نشده
اگر طراحی شما از ویژگی های پشتیبانی نشده استفاده می کند:
- صادرات به عنوان MP4 یا GIF برای نسخه متحرک
- صادرات به عنوان PNG برای بازپرداخت استاتیک
- استفاده از عنصر
<picture>0Q برای پیشرفت پیشرفته