Les formats d’image bitmap pour le web (GIF, JPEG, WBMP et PNG) décrivent les images à l’aide d’une grille de pixels. Les fichiers obtenus sont généralement volumineux, limités à une seule résolution (souvent faible) et consomment de grandes quantités de bande passante sur le web. Le format SVG, en revanche, 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 des périphériques portables, limités en ressources. Les utilisateurs peuvent agrandir leur vue d’une image SVG à l’écran sans sacrifier la netteté, le détail ou la clarté. De plus, le format SVG offre une prise en charge supérieure 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. Avec SVG, vous pouvez utiliser le langage XML et JavaScript pour créer des images web répondant aux actions utilisateur avec des effets complexes, tels que surbrillance, info-bulles, son et animation.
Vous pouvez enregistrer vos illustrations au
La configuration de votre illustration dans Illustrator influe sur le fichier SVG résultant. Tenez compte des règles suivantes :
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é Bouton1 devient <g id="Bouton1_ver3.0"> dans le fichier SVG.) Les calques imbriqués deviennent des groupes SVG imbriqués, alors que les calques masqués sont préservés dans le fichier SVG avec la propriété de style 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. Si vous modifiez l’opacité au niveau du calque, le fichier SVG résultant n’affichera pas la transparence telle qu’elle apparaît dans Illustrator.
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. Si possible, évitez de créer une illustration qui sera pixellisée dans le fichier SVG. Les filets de dégradés et objets utilisant les effets Pixellisation (partie inférieure du menu), Artistiques, Atténuation, Contours, Déformation, Renforcement, Esquisse, Esthétiques, Textures et Vidéo sont pixellisés lors de leur enregistrement au format SVG. De même, les styles graphiques incluant ces effets produisent une pixellisation. 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. Evitez également d’utiliser des formes 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. Les scripts peuvent également utiliser le modèle d’objets de document (DOM, Document Object Model) pour accéder au fichier SVG et le modifier (par exemple, en insérant ou en supprimant des éléments SVG).
Vous pouvez utiliser des effets SVG 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. En fait, 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 utiliser les effets avec leurs propriétés par défaut, modifier le code XML pour produire des effets personnalisés ou écrire de nouveaux effets SVG.
Remarque :
Pour modifier les filtres SVG par défaut d’Illustrator, ouvrez le fichier Filtres Adobe SVG.
-
Pour appliquer un effet avec ses paramètres par défaut, sélectionnez-le dans la section inférieure du sous-menu Effet > Filtres SVG.
Pour appliquer un effet avec des paramètres personnalisés, choisissez la commande Effet > Filtres SVG > Appliquer le filtre SVG. Dans la boîte de dialogue, sélectionnez l’effet souhaité, puis cliquez sur
. Modifiez le code par défaut et cliquez sur le bouton OK.Pour créer et appliquer un filtre, choisissez la commande Effet > Filtres SVG > Appliquer le filtre SVG. Dans la boîte de dialogue, cliquez sur
, entrez le nouveau code, puis cliquez sur le bouton 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 constituer le dernier effet lorsqu’un objet en utilise plusieurs. En d’autres termes, il doit apparaître en 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é.
Le panneau Interactivité SVG (Fenêtre > Interactivité SVG) permet d’ajouter de l’interactivité à 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). Le panneau Interactivité SVG permet également de visualiser tous les événements et les fichiers JavaScript associés au fichier courant.
- Pour supprimer un événement, sélectionnez-le, puis cliquez sur le bouton Supprimer ou sélectionnez la commande Supprimer l’événement dans le menu du panneau.
- Pour supprimer l’ensemble des événements, sélectionnez la commande Effacer les événements dans le menu du panneau.
.-
Sélectionnez un événement dans le panneau Interactivité SVG (voir la section Evé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.
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.
onscroll
Permet de déclencher le script lorsque l’utilisateur fait défiler le document ou effectue un panoramique sur le document.
Une nouvelle option d’exportation SVG (Fichier > Exportation > SVG) est disponible. Le nouveau flux de travail vous permet de générer des fichiers SVG normalisés et optimisés pour le web pour vos sites web et vos projets de conception d’écrans.
Les options à votre disposition sont les suivantes :
- Style. Choisissez la manière dont vous souhaitez que le code généré soit écrit dans le fichier SVG. Choisissez entre les styles CSS interne, Style intégré Attributs de présentation.
- Police. Choisissez la manière dont les polices doivent être représentées dans le fichier SVG. Les contours conservent la définition du tracé
et offrent une meilleure compatibilité. - Images : indiquez si vous voulez que les images soient enregistrées en étant incorporées dans le document ou liées à des fichiers externes au document.
- ID d’objet : indiquez comment les types d’ID (noms) sont attribués aux objets dans le fichier SVG. Sélectionnez Noms de calque, Minimal ou Unique. Cette option détermine la façon dont sont traités les noms d’objets en double et la manière dont les objets sont nommés dans le fichier CSS exporté.
- Décimale : sélectionnez la quantité d’informations que vous souhaitez conserver concernant la précision des emplacements d’objets. Une valeur de décimale plus élevée augmentera le degré de précision de la mise en forme des objets et restituera le fichier SVG avec une plus grande fidélité visuelle. L’augmentation de la valeur de décimale augmente cependant la taille du fichier SVG exporté.
- Compression : optimise la taille des fichiers SVG en supprimant les groupes vides et les espaces vides. Cette option réduit également la lisibilité du code SVG obtenu.
- Responsive. En sélectionnant cette option vous vous assurez que le code SVG généré se met à l’échelle dans un navigateur. Il n’y a aucune valeur absolue pour la taille.
- Afficher le code : ouvre le contenu exporté dans votre éditeur de texte par défaut.
- Afficher dans
le navigateur (icône) : affiche l’image dans votre navigateur web par défaut.
Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.