Guide d'utilisation Annuler

SVG

Découvrez comment utiliser le langage XML et JavaScript avec SVG pour créer des images web répondant aux actions utilisateur avec des effets complexes, tels que surbrillance, info-bulles, son et animation.

Lien profond Adobe Illustrator

Tester dans l’application
Appliquez des filtres SVG en quelques étapes simples.

À propos du format SVG

Le format SVG est un format vectoriel décrivant les images comme des formes, des tracés, du texte et des effets de filtre. Les fichiers produits sont compacts et offrent des images de qualité élevée sur le web, à l’impression, ainsi que sur les appareils mobiles limités en ressources, contrairement aux formats GIF, JPEG, WBMP et PNG, qui sont bien plus volumineux. Les utilisateurs peuvent agrandir leur vue d’une image SVG à l’écran sans réduire la netteté, le niveau de détail ou la clarté. De plus, le format SVG offre une meilleure prise en charge du texte et des couleurs, garantissant l’affichage des images telles qu’elles apparaissent sur votre plan de travail Illustrator.

Le format SVG est entièrement basé sur le langage XML et offre de nombreux avantages aux développeurs et aux utilisateurs. 

Vous pouvez enregistrer vos illustrations au format SVG à l’aide des commandes Enregistrer, Enregistrer sous, Enregistrer une copie ou Enregistrer pour le web et les périphériques. Pour accéder à l’ensemble des options d’exportation SVG, utilisez les commandes Enregistrer, Enregistrer sous ou Enregistrer une copie. La commande Enregistrer pour le web et les périphériques offre un sous-ensemble d’options d’exportation SVG conçues exclusivement pour une exploitation de l’image sur le web.

Application d’effets SVG

Vous pouvez utiliser des effets SVG (filtres) pour ajouter des propriétés graphiques, telles que des ombres portées, à votre illustration. Les filtres SVG diffèrent de leurs équivalents bitmap dans la mesure où ils sont basés sur le format XML et sont indépendants de la résolution. Un effet SVG n’est rien de plus qu’une série de propriétés XML décrivant diverses opérations mathématiques. L’effet résultant est rendu sur l’objet cible au lieu du fichier image source.

Illustrator propose un ensemble par défaut d’effets SVG. Vous pouvez appliquer directement un effet par défaut ou modifier son code XML pour le personnaliser. Vous pouvez également créer de nouveaux effets SVG.

Remarque :

Pour modifier les filtres SVG par défaut d’Illustrator, modifiez le fichier Adobe SVG Filters.svg à l’emplacement suivant à l’aide d’un éditeur de texte :

  • macOS : ~/Library/Application Support/Adobe/Adobe Illustrator <version>/<langue>
  • Windows : C:\Users\<nom utilisateur>\AppData\Roaming\Adobe\Adobe Illustrator <version> Settings\<langue>\x64

Vous pouvez modifier les définitions de filtre existantes, les supprimer et en ajouter de nouvelles.

Application d’un effet par défaut

  1. Sélectionnez un objet ou un groupe (ou un calque dans le panneau Calques).

  2. Accédez à Effets > Filtres SVG > Appliquer le filtre SVG.

Application d’un effet personnalisé

  1. Sélectionnez un objet ou un groupe (ou un calque dans le panneau Calques).

  2. Cliquez sur Effet > Filtres SVG > Appliquer le filtre SVG.

  3. Dans la boîte de dialogue, sélectionnez un effet, puis cliquez sur Modifier le filtre SVG  . Modifiez le code par défaut et cliquez sur OK.

Création et application d’un nouvel effet

  1. Sélectionnez un objet ou un groupe (ou un calque dans le panneau Calques).

  2. Cliquez sur Effet > Filtres SVG > Appliquer le filtre SVG.

  3. Dans la boîte de dialogue, sélectionnez Nouveau filtre SVG  . Entrez le nouveau code, puis cliquez sur OK.

Lorsque vous appliquez un effet de filtre SVG, Illustrator affiche une version pixellisée de l’effet sur le plan de travail. Vous pouvez contrôler la résolution de cette image d’aperçu en modifiant le paramètre de résolution de pixellisation du document.

Remarque :

Un effet SVG doit être le dernier effet lorsqu’un objet utilise plusieurs effets. En d’autres termes, il doit apparaître au bas du panneau Aspect (juste au-dessus de l’entrée Transparence). Si d’autres effets suivent un effet SVG, le résultat SVG consistera en un objet pixellisé.

Importation des effets d’un fichier SVG

  1. Sélectionnez Effet > Filtre SVG > Importer le filtre SVG.

  2. Sélectionnez le fichier SVG à partir duquel vous souhaitez importer des effets et cliquez sur Ouvrir.

Présentation du panneau Interactivité SVG

Le panneau Interactivité SVG permet de visualiser tous les événements et les fichiers JavaScript associés au fichier actif.
Vous pouvez utiliser le panneau Interactivité SVG (Fenêtre > Interactivité SVG) pour ajouter des éléments interactifs à votre illustration lorsqu’elle est exportée pour affichage dans un navigateur web. Par exemple, vous pouvez créer un événement qui déclenche une commande JavaScript pour créer rapidement un mouvement sur une page web lorsque l’utilisateur effectue une opération (par exemple, lorsqu’il déplace le pointeur de la souris sur un objet).

Suppression d’un événement du panneau Interactivité SVG

Vous pouvez utiliser le panneau Interactivité SVG pour supprimer un ou tous les événements.

Pour supprimer un événement

  • Sélectionnez l’événement concerné et cliquez sur Supprimer l’entrée sélectionnée  .

Pour supprimer tous les événements

  • Sélectionnez Effacer les événements dans le menu du panneau  

Classement, ajout ou suppression des événements liés à un fichier

Sélectionnez Lier les fichiers JavaScript   et cliquez sur Ajouter pour ajouter des fichiers JavaScript supplémentaires, ou sur Supprimer pour supprimer l’entrée JavaScript sélectionnée.

Ajout d’interactivité SVG à une illustration

  1. Dans le panneau Interactivité SVG, sélectionnez un événement. (Voir Événements SVG.)

  2. Entrez le code JavaScript correspondant, puis appuyez sur la touche Entrée.

Événements SVG

onfocusin

Permet de déclencher le script lorsque l’élément reçoit le focus, comme la sélection par le pointeur.

onfocusout

Permet de déclencher le script lorsque l’élément perd le focus (généralement lorsqu’un autre élément reçoit le focus).

onactivate

Permet de déclencher le script avec un clic de souris ou la pression sur une touche, en fonction de l’élément SVG.

onmousedown

Permet de déclencher le script lorsque l’utilisateur appuie sur le bouton de la souris alors qu’il se trouve sur un élément.

onmouseup

Permet de déclencher le script lorsque le bouton de la souris est relâché au-dessus d’un élément.

onclick

Permet de déclencher le script lorsque l’utilisateur clique sur un élément.

onmouseover

Permet de déclencher le script lorsque le pointeur est déplacé sur un élément.

onmousemove

Permet de déclencher le script lorsque le pointeur survole un élément.

onmouseout

Permet de déclencher le script lorsque le pointeur est éloigné d’un élément.

onkeydown

Permet de déclencher le script lorsque l’utilisateur appuie sur une touche.

onkeypress

Permet de déclencher le script pendant que l’utilisateur appuie sur une touche.

onkeyup

Permet de déclencher le script lorsqu’une touche est relâchée.

onload

Permet de déclencher le script une fois que le document SVG a été complètement analysé par le navigateur. Utilisez cet événement pour appeler des fonctions d’initialisation uniques.

onerror

Permet de déclencher le script lorsqu’un élément ne se charge pas correctement ou qu’une autre erreur se produit.

onabort

Permet de déclencher le script lorsque le chargement de la page est interrompu avant le chargement complet de l’élément.

onunload

Permet de déclencher le script lorsque le document SVG est supprimé d’une fenêtre ou d’un cadre.

onzoom

Permet de déclencher le script lorsque le niveau de zoom est modifié pour le document.

onresize

Permet de déclencher le script lorsque la taille du document est modifiée.

onscroll

Permet de déclencher le script lorsque l’utilisateur fait défiler le document ou effectue un panoramique sur le document.

Conseils pour la création de fichiers SVG

  • Utilisez des calques pour ajouter une structure à un fichier SVG. Lorsque vous enregistrez une illustration au format SVG, chaque calque est converti en élément de groupe (<g>). (Par exemple, un calque nommé Button1 devient <g id="Button1_ver3.0"> dans le fichier SVG.) Les calques imbriqués deviennent des groupes imbriqués SVG et les calques masqués sont conservés avec la propriété de style SVG display="none".

  • Pour que des objets de différents calques apparaissent transparents, réglez l’opacité de chaque objet plutôt que celle de chaque calque.

  • Les données de pixellisation ne peuvent pas être mises à l’échelle dans l’afficheur SVG ou modifiées comme les autres éléments SVG. Vous pouvez simplement éviter de créer une illustration qui sera pixellisée dans le fichier SVG. Utilisez des effets SVG pour ajouter des effets graphiques sans engendrer de pixellisation.

  • Utilisez des symboles et simplifiez les tracés de votre illustration pour améliorer les performances SVG. Évitez également d’utiliser des pinceaux produisant de nombreuses données de tracé, telles que Fusain, Cendre incandescente ou Effilage, si les performances constituent une priorité.

  • Utilisez des tranches, des cartes-images et des scripts pour ajouter des liens web à un fichier SVG.

  • Un langage de script, tel que JavaScript, offre des possibilités illimitées à un fichier SVG. Les mouvements de pointeur et de clavier peuvent commander des fonctions de script telles que des effets de transformation par souris.

Options d’exportation SVG optimisées pour le web

Une nouvelle option d’exportation SVG (Fichier > Exportation > Exporter au format > SVG) est disponible. Le nouveau workflow vous permet de générer des fichiers SVG normalisés et optimisés pour le web pour vos projets de création de pages web et d’écrans. Pour plus de détails, reportez-vous à la section Options d’exportation SVG.

Articles connexes

Vous avez une question ou une suggestion ?

Solliciter la communauté

Si vous avez une question à poser ou une idée à soumettre, rejoignez-nous au sein de la communauté Adobe Illustrator. Nous avons hâte de vous y retrouver et de découvrir vos créations.

Recevez de l’aide plus rapidement et plus facilement

Nouvel utilisateur ?