P Animated SVG יצוא

2 min read

לייצא את האנימציה שלך כמו SVG קבצים עבור גרפיקה מקוטבת באינטרנט.

מתי להשתמש SVG

SVGs הם אידיאליים כאשר:

  • Embedding Animations באתר אינטרנט
  • יש צורך בדרגות אינסופיות
  • גודל קובץ קטן חשוב
  • אתה צריך עריכת וילון

תגית: SVG

  1. לחץ Export בראש
  2. בחירת SVG**
  3. לחץ Export
  4. הורדה מיידית

תמיכה אנימציה

תמיכה מלאה

אנימציה Animation SVG Output
דופק <animateTransform type="scale">
רוטט <animateTransform type="rotate">
בודה <animateTransform type="translate">
Fade <animate attributeName="opacity">
Wobble <animateTransform type="rotate">
Slide <animateTransform type="translate">
עליית העלייה <animateTransform type="translate">

לא תומך ❌

תכונות סיבה
תסריט דרושים JavaScript
השפעות (Sparkle, Blast) אנימציה מבוססת מסגרת
תבנית מבוסס על Frame
מפתח מורכב תמיכת SMIL

** תמיכה ב-*SVG אנימציהs משתמשים ב- SMIL, אשר נתמך ב-Chrome, Firefox, Safari ו- Edge. כמה דפדפנים ישנים עשויים להראות SVG סטטי.

עקבו אחרי webs

Embedd

<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. אתה יכול:

  • פתוח בעורך טקסט
  • שינוי צבעים, גדלים, תזמון
  • תגית: CSS
  • עקבו אחרי Javascript

מה ייצוא

אלמנטים יצוא כמו
טקסט <text>
צורות <path>, <circle> וכו’.
רקע <rect>
אנימציהs SMIL <animate> תגים

גודל הקובץ

קבצי SVG הם בדרך כלל קטנים מאוד:

  • אנימציה פשוטה: 2-10 KB
  • כתובת: 20-50 KB
  • הרבה יותר קטן מ- GIF או MP4

טיפים

SVG טיפים:

  • השתמש ב- SVG להטמיע אינטרנט שבו נושאים איכותיים
  • להימנע מאפקטים ואנימציה
  • מבחן בדפדפנים
  • SVGs יכול להיות מעוצב עם CSS לאחר הטמעת

להורדה Unsupported Animations

אם העיצוב שלך משתמש בתכונות לא נתמכות:

  1. יצוא MP4 או GIF עבור גרסת האנימציה
  2. יצוא PNG עבור ירידה סטטית
  3. השתמש רכיב <picture> לשיפור מתקדם