Utiliser au mieux les médias au format SVG

Selon les paramètres utilisés lors de leur création, les médias au format SVG peuvent parfois présenter des erreurs d’affichage. Cet article explique comment optimiser vos fichiers SVG.

Problèmes possibles

Un fichier SVG peut être à l’origine des problèmes suivants :

• le média SVG apparaît dans la recherche de médias, mais pas dans le cours ;
• l’exportation du SVG échoue ;
• le média SVG ne s’affiche pas dans le PDF exporté ou y apparaît en très petit ;
• le téléversement du média SVG échoue et celui-ci n’apparaît pas dans l’aperçu du cours.

Possibilités d’optimisation

Pour obtenir des fichiers SVG aussi compatibles que possible, utilisez des paramètres simples et évitez les effets trop complexes.

Lors de la création d’un média SVG dans un logiciel graphique, vérifiez les points suivants et adaptez-les en cas d’affichage incorrect :

• Fonction Symboles d’Adobe Illustrator : les vecteurs ne sont alors pas transférés au format SVG avec les paramètres habituels, ce qui peut provoquer un affichage incorrect, notamment dans les navigateurs.
• Espace blanc excessif : si le média apparaît trop petit, réduisez le plan de travail au contenu afin de supprimer l’espace autour de l’illustration.
• Élément SVG non autorisé : supprimez par exemple l’élément <ContainsAiGeneratedContent>.
• Structure de calques trop complexe : réduisez le nombre de groupes et de calques imbriqués.
• Filtres trop complexes, notamment pour les ombres : simplifiez les filtres, surtout si plusieurs d’entre eux sont combinés.
• Effets 3D : évitez-les afin de limiter la complexité.
• Utilisation de feDropShadow : cette balise n’est pas autorisée.
• Attribut in2 manquant dans la balise feComposite : assurez-vous que cet attribut est défini lorsque la balise est utilisée.
• Dimensions manquantes : vérifiez que les attributs width et height contiennent les valeurs correspondantes.
• Options d’exportation : utilisez le format SVG 1.1 et l’encodage UTF-8.

Contactez-nous si vous avez une question particulière sur l’affichage d’un média SVG. Nous vous aiderons volontiers.