Exportation de SVG animée

3 min read

Exportez vos animations sous forme de fichiers SVG pour l’intégration web et les graphismes évolutifs.

Quand utiliser SVG

Les SVG sont idéales lorsque:

  • Intégrer des animations sur les sites Web
  • Une évolutivité infinie est nécessaire
  • Petite taille de fichier est important
  • Vous avez besoin d’une sortie vectorielle modifiable

Exportation en tant que SVG

  1. Cliquez sur Exporter dans l’en-tête
  2. Sélectionner Animé SVG
  3. Cliquez sur Exporter
  4. Téléchargement de fichiers immédiatement

Soutien à l’animation

Entièrement pris en charge

Animation Sortie SVG
Pouls <animateTransform type="scale">
Rotation <animateTransform type="rotate">
Bounce <animateTransform type="translate">
Fade <animate attributeName="opacity">
Wobble <animateTransform type="rotate">
Diapositive <animateTransform type="translate">
Lève-toi <animateTransform type="translate">

Non pris en charge

Fonctionnalité Motifs
Machine à écrire Nécessite JavaScript
Effets (Sparkle, Blast) Animations basées sur le cadre
Rotation des motifs sur la base du cadre
Cadres clés complexes Prise en charge limitée de SMIL

Support de navigation : Les animations SVG utilisent SMIL, qui est pris en charge dans Chrome, Firefox, Safari et Edge. Certains navigateurs plus anciens peuvent afficher SVG statique.

Inscription sur les sites Web

Intégration directe

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

SVG en ligne

Pour plus de contrôle, collez le code SVG directement :

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

Historique CSS

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

Personnalisation après exportation

Les fichiers SVG sont modifiables en XML. Vous pouvez :

  • Ouvrir dans un éditeur de texte
  • Modifier les couleurs, les tailles, le timing
  • Ajouter un style CSS
  • Intégrer JavaScript personnalisé

Ce qui est exporté

Élément Exportations
Texte Éléments <text>
Formes <path>, <circle>, etc.
Historique <rect> avec remplissage
Animations Balises SMIL <animate>

Taille du fichier

Les fichiers SVG sont généralement très petits :

  • Animation simple: 2-10 KB
  • Scène complexe: 20-50 KB
  • Beaucoup plus petit que GIF ou MP4

Conseils

Conseils SVG :

  • Utiliser SVG pour l’intégration web où la qualité compte
  • Évitez les effets et l’animation de la machine à écrire
  • Test dans les navigateurs cibles
  • Les SVG peuvent être stylés avec CSS après intégration

Retour pour des Animations non soutenues

Si votre conception utilise des fonctionnalités non supportées:

  1. Exporter comme MP4 ou GIF pour la version animée
  2. Exporter comme PNG pour un repli statique
  3. Utiliser l’élément <picture> pour une amélioration progressive