Κινούμενη εξαγωγή SVG

3 min read

Εξαγωγή κινουμένων σχεδίων σας ως αρχεία SVG για ενσωμάτωση ιστού και κλιμακωτά γραφικά.

Πότε να χρησιμοποιήσετε το SVG

Τα SVG είναι ιδανικά όταν:

  • Ενσωματώνοντας κινούμενα σχέδια σε ιστοσελίδες
  • Απειροελάχιστη κλιμάκωση απαιτείται
  • Μικρό μέγεθος αρχείου είναι σημαντικό
  • Χρειάζεται να επεξεργαστείτε την έξοδο διανύσματος

Εξαγωγή ως SVG

  1. Κάντε κλικ Εξαγωγή στην κεφαλίδα
  2. Επιλέξτε Κινούμενα SVG
  3. Κλικ Εξαγωγή
  4. Λήψη αρχείων άμεσα

Υποστήριξη κινουμένων σχεδίων

Πλήρως υποστηριζόμενη ✅

Κίνηση Έξοδος SVG
Σφυγμός <animateTransform type="scale">
Περιστροφή <animateTransform type="rotate">
Αναπήδηση <animateTransform type="translate">
Προσαρμοσμένη <animate attributeName="opacity">
Wobble (στα Αγγλικά) <animateTransform type="rotate">
Σλάιντ <animateTransform type="translate">
Σήκω <animateTransform type="translate">

Δεν υποστηρίζεται ❌

Χαρακτηριστικό Αιτιολογία
Γράφτρια Απαιτεί JavaScript
Επιδράσεις (Sparkle, Blast) Κινούμενα σχέδια με βάση το πλαίσιο
Περιστροφή μοτίβου επίFrame με βάση
Σύνθετα πλαίσια κλειδιών Περιορισμένη υποστήριξη SMIL

Υποστήριξη περιήγησης: Τα κινούμενα σχέδια SVG χρησιμοποιούν το SMIL, το οποίο υποστηρίζεται σε Chrome, Firefox, Safari και 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. Μπορείς:

  • Άνοιγμα σε επεξεργαστή κειμένου
  • Τροποποίηση χρωμάτων, μεγεθών, συγχρονισμού
  • Προσθήκη στυλ CSS
  • Ενσωμάτωση προσαρμοσμένης JavaScript

Τι Εξάγεται

Στοιχείο Εξαγωγή ως
Κείμενο Στοιχεία <text>
Σχήματα <path>, <circle>, κλπ.
Ιστορικό <rect> με πλήρωση
Κινούμενες εικόνες Ετικέτες SMIL <animate>

Μέγεθος αρχείου

Τα αρχεία SVG είναι συνήθως πολύ μικρά:

  • Απλό animation: 2-10 KB
  • Πολύπλοκη σκηνή: 20-50 KB
  • Πολύ μικρότερο από GIF ή MP4

Συμβουλές

Συμβουλές SVG:

  • Χρήση SVG για ενσωμάτωση ιστού όπου η ποιότητα έχει σημασία
  • Αποφύγετε εφέ και γραφομηχανή animation
  • Δοκιμή σε περιηγητές προορισμού
  • Τα SVG μπορούν να διαμορφωθούν με CSS μετά την ενσωμάτωση

Fallback για μη υποστηριζόμενες κινούμενες εικόνες

Αν ο σχεδιασμός σας χρησιμοποιεί μη υποστηριζόμενα χαρακτηριστικά:

  1. Εξαγωγή ως MP4 ή GIF για την έκδοση κινουμένων σχεδίων
  2. Εξαγωγή ως PNG για στατική επιστροφή
  3. Χρήση στοιχείου <picture> για προοδευτική ενίσχυση