Guide d'utilisation Annuler

SVG

  1. Guide de l’utilisateur d’Illustrator
  2. Découverte d’Illustrator
    1. Présentation d’Illustrator
      1. Nouveautés d’Illustrator
      2. Questions fréquentes
      3. Configuration requise pour Illustrator
      4. Illustrator pour Apple Silicon
    2. Espace de travail
      1. Concepts de base sur l’espace de travail
      2. Formation accélérée grâce au panneau Découvrir d’Illustrator
      3. Création de documents
      4. Barre d’outils
      5. Raccourcis clavier par défaut
      6. Personnalisation des raccourcis clavier
      7. Introduction aux plans de travail
      8. Gestion des plans de travail
      9. Personnalisation de l’espace de travail
      10. Panneau Propriétés
      11. Définition des préférences de la mémoire
      12. Espace de travail Tactile
      13. Prise en charge de Microsoft Surface Dial dans Illustrator
      14. Annulation des modifications et gestion de l’historique de conception
      15. Rotation de l’affichage
      16. Règles, grilles et repères
      17. Accessibilité dans Illustrator
      18. Mode sans échec
      19. Affichage des illustrations
      20. Utilisation de la Touch Bar avec Illustrator
      21. Fichiers et modèles
    3. Outils dans Illustrator
      1. Principales caractéristiques des outils
      2. Outils de sélection
        1. Sélection
        2. Sélection directe
        3. Sélection directe progressive
        4. Baguette magique
        5. Lasso
        6. Plan de travail
      3. Outils de navigation
        1. Main
        2. Rotation de l’affichage
        3. Zoom
      4. Outils de peinture
        1. Dégradé
        2. Filet
        3. Concepteur de forme
      5. Outils de texte
        1. Texte
        2. Texte curviligne
        3. Texte vertical
      6. Outils de dessin
        1. Plume
        2. Ajout de point d’ancrage
        3. Suppression de point d’ancrage
        4. Point d’ancrage
        5. Courbure
        6. Trait
        7. Rectangle
        8. Rectangle arrondi
        9. Ellipse
        10. Polygone
        11. Étoile
        12. Pinceau
        13. Forme de tache
        14. Crayon
        15. Shaper
        16. Tranche
      7. Outils de modification
        1. Rotation
        2. Miroir
        3. Mise à l’échelle
        4. Cisaillement
        5. Largeur
        6. Transformation manuelle
        7. Pipette
        8. Dégradé de formes
        9. Gomme
        10. Ciseaux
    4. Actions rapides
      1. Texte Rétro
      2. Texte Néon
      3. Old School texte
      4. Redéfinition de couleurs
      5. Conversion d’une esquisse en vecteur
  3. Illustrator sur iPad
    1. Introduction à Illustrator sur iPad
      1. Présentation d’Illustrator sur iPad
      2. FAQ sur Illustrator sur iPad
      3. Configuration requise | Illustrator sur iPad
      4. Ce que vous pouvez ou ne pouvez pas faire dans Illustrator sur iPad
    2. Espace de travail
      1. Espace de travail Illustrator sur iPad
      2. Raccourcis et mouvements tactiles
      3. Raccourcis clavier pour Illustrator sur iPad
      4. Gestion des paramètres de votre application
    3. Documents
      1. Utilisation de documents dans Illustrator sur iPad
      2. Importation de documents Photoshop et Fresco
    4. Sélection et organisation des objets
      1. Création d’objets répétés
      2. Fusion d’objets
    5. Dessin
      1. Dessin et modification de tracés
      2. Dessin et modification de formes
    6. Texte
      1. Utilisation du texte et des polices
      2. Création de compositions de texte sur un tracé
      3. Ajout de vos propres polices
    7. Utilisation d’images
      1. Vectorisation d’images pixellisées
    8. Couleur
      1. Application des couleurs et des dégradés
  4. Documents en ligne
    1. Fonctionnalités de base
      1. Utilisation de documents en ligne Illustrator
      2. Partage et collaboration sur des documents en ligne Illustrator
      3. Partage de documents à des fins de révision
      4. Mise à niveau de l’espace de stockage pour Adobe Illustrator
      5. Documents en ligne Illustrator | Questions fréquentes
    2. Résolution des problèmes
      1. Résolution des problèmes de création ou d’enregistrement de documents en ligne Illustrator
      2. Résolution des problèmes sur les documents en ligne Illustrator
  5. Ajout et modification de contenu
    1. Dessin
      1. Concepts de base sur le dessin
      2. Modification de tracés
      3. Dessin ultraprécis d’illustrations
      4. Dessin avec l’outil Stylo, Courbure ou Crayon
      5. Dessin de lignes et formes simples
      6. Vectorisation d’images
      7. Simplification des tracés
      8. Définition de grilles de perspective
      9. Outils de symbolisme et jeux de symboles
      10. Modification des segments de tracé
      11. Création d’une fleur en 5 étapes faciles
      12. Dessin en perspective
      13. Symboles
      14. Dessin de tracés alignés sur les pixels dans des workflows web
    2. Objets et matières 3D
      1. À propos des effets 3D dans Illustrator
      2. Création de graphismes 3D
      3. Placage d’illustrations sur des objets 3D
      4. Création de texte 3D
    3. Couleur
      1. À propos de la couleur
      2. Sélection de couleurs
      3. Utilisation et création de nuanciers
      4. Correction des couleurs
      5. Utilisation du panneau Thèmes Adobe Color
      6. Groupes de couleurs (harmonies)
      7. Panneau Thèmes de couleur
      8. Redéfinition des couleurs d’une illustration
    4. Peinture
      1. À propos de la peinture
      2. Peinture avec les fonds et les contours
      3. Groupes de peinture dynamique
      4. Dégradés
      5. Formes
      6. Transparence et modes de fusion
      7. Application d’un contour sur un objet
      8. Création et modification de motifs
      9. Filets
      10. Motifs
    5. Sélection et organisation des objets
      1. Sélection d’objets
      2. Calques
      3. Association et développement des objets
      4. Déplacement, alignement et répartition d’objets
      5. Superposition d’objets    
      6. Verrouillage, masquage et suppression d’objets
      7. Copier et dupliquer des objets
      8. Application de rotations et de symétries aux objets
      9. Entrelacement d’objets
    6. Remodelage d’objets
      1. Recadrage des images
      2. Transformation d’objets
      3. Combinaison d’objets
      4. Découpage, division et rognage d’objets
      5. Déformation de la marionnette
      6. Mise à l’échelle, déformation et distorsion des objets
      7. Fusion d’objets
      8. Modelage à l’aide d’enveloppes
      9. Remodelage des objets à l’aide d’effets
      10. Création de formes avec les outils Mise en forme et Concepteur de forme
      11. Utilisation des angles dynamiques
      12. Amélioration des flux de modelage avec prise en charge des commandes tactiles
      13. Modification des masques d’écrêtage
      14. Formes dynamiques
      15. Création de formes à l’aide de l’outil Concepteur de forme
      16. Modifications globales
    7. Texte
      1. Ajout de texte et utilisation d’objets texte
      2. Création de listes à puce et numérotées
      3. Gestion de la zone de texte
      4. Polices et typographie
      5. Mise en forme de texte
      6. Importation et exportation de texte
      7. Mise en forme des paragraphes
      8. Caractères spéciaux
      9. Création de texte curviligne
      10. Styles de caractère et de paragraphe
      11. Onglets
      12. Texte et typographie
      13. Recherche de polices manquantes (flux de travaux Typekit)
      14. Mise à jour de textes provenant d’Illustrator 10
      15. Texte en arabe et en hébreu
      16. Polices | FAQ et conseils de dépannage
      17. Création d’effets de texte 3D
      18. Designs typographiques créatifs
      19. Mise à l’échelle et rotation du texte
      20. Espacement des lignes et interlettrage
      21. Césure et sauts de ligne
      22. Améliorations relatives au texte
      23. Orthographe et dictionnaires de langue
      24. Mise en forme des caractères asiatiques
      25. Compositeurs de scripts asiatiques
      26. Création de designs de texte avec des dégradés d’objets
      27. Création d’une affiche de texte à l’aide du tracé d’image
    8. Création d’effets spéciaux
      1. Utilisation des effets
      2. Styles graphiques
      3. Création d’une ombre portée
      4. Attributs d’aspect
      5. Création d’esquisses et de mosaïques
      6. Ombres portées, lueurs et contour progressif
      7. Résumé des effets
    9. Images Web
      1. Méthodes recommandées pour la création d’images destinées au Web
      2. Graphismes
      3. SVG
      4. Création d’animations
      5. Tranches et cartes-images
  6. Importation, exportation et enregistrement
    1. Importation
      1. Importation de plusieurs fichiers
      2. Gestion des fichiers liés et intégrés
      3. Informations sur les liens
      4. Annulation de l’intégration des images
      5. Importation d’une illustration à partir de Photoshop
      6. Importation d’images bitmap
      7. Importation de fichiers Adobe PDF
      8. Importation de fichiers EPS, DCS et AutoCAD
    2. Bibliothèques Creative Cloud dans Illustrator 
      1. Bibliothèques Creative Cloud dans Illustrator
    3. Enregistrement
      1. Enregistrement d’une illustration
    4. Exportation
      1. Utilisation d’illustrations Illustrator dans Photoshop
      2. Exportation d’une illustration
      3. Collecte et exportation de ressources par lots
      4. Assemblage de fichiers
      5. Création de fichiers Adobe PDF
      6. Extraction de code CSS | Illustrator CC
      7. Options Adobe PDF
      8. Informations sur les fichiers et métadonnées
  7. Impression
    1. Préparation pour l’impression
      1. Configuration des documents pour l’impression
      2. Modification du format et de l’orientation de la page
      3. Définition des traits de coupe pour le rognage ou l’alignement
      4. Premiers pas avec les zones de travail de grande taille
    2. Impression
      1. Surimpression
      2. Impression avec gestion des couleurs
      3. Impression PostScript
      4. Paramètres prédéfinis d’impression
      5. Repères d’impression et fonds perdus
      6. Impression et enregistrement d’illustrations transparentes
      7. Recouvrement
      8. Impression des séparations des couleurs
      9. Impression de dégradés, de filets et de dégradés de formes
      10. Surimpression en blanc
  8. Automatisation des tâches
    1. Fusion des données à l’aide du panneau Variables
    2. Automatisation avec les scripts
    3. Automatisation avec des scripts d’action
  9. Résolution des problèmes 
    1. Problèmes de plantage
    2. Récupération de fichiers après un plantage
    3. Problèmes liés aux fichiers
    4. Formats de fichier pris en charge
    5. Problèmes avec un pilote de matériel GPU
    6. Problèmes liés à un appareil Wacom
    7. Problèmes liés aux fichiers DLL
    8. Problèmes de mémoire
    9. Problèmes liés au fichier de préférences
    10. Problèmes de police
    11. Problèmes d’imprimante
    12. Partage des rapports d’incident avec Adobe
    13. Optimisation des performances d’Illustrator

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.

A propos du format SVG

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  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 aux 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.

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. Évitez é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).

Application d’effets 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 obtenu 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. svg, situé dans le dossier Documents and Settings/<répertoire_utilisateur>/Application Data/Adobe/Adobe Illustrator CS5 Settings/, dans un éditeur de texte. Vous pouvez modifier des définitions de filtre existantes, en supprimer et en ajouter de nouvelles.

  1. Sélectionnez un objet ou un groupe (ou ciblez un calque dans le panneau Calques).
  2. Effectuez l’une des opérations suivantes :
    • 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é.

Importation des effets d’un fichier SVG

  1. Choisissez la commande Effet > Filtre SVG > Importer le filtre SVG.

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

Présentation du panneau Interactivité SVG

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.

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

  • 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.

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

  1. Cliquez sur le bouton Lier les fichiers JavaScript .
  2. Dans la boîte de dialogue Fichiers JavaScript, sélectionnez une entrée JavaScript et effectuez l’une des opérations suivantes :
    • Cliquez sur le bouton Ajouter pour rechercher des fichiers JavaScript supplémentaires.

    • Cliquez sur le bouton Supprimer pour retirer l’entrée JavaScript sélectionnée.

Ajout d’interactivité SVG à une illustration

  1. Sélectionnez un événement dans le panneau Interactivité SVG (voir la section Evénements SVG).

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

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.

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.

Options d’exportation SVG optimisées pour le web

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 :

  • Stylisation : choisissez la manière dont les informations de stylisation visuelle sont stockées dans le balisage SVG.
    • Attributs de présentation : utilise des attributs XML distincts pour chaque propriété de style spécifique sur chaque balise SVG. Ce format est requis pour utiliser des fichiers SVG avec Android Studio.
    • CSS interne : utilise une seule balise <style> avec des classes CSS et partage les paramètres de style entre les différents objets ayant le même style. Cela peut avoir pour effet de réduire la taille des fichiers.
    • Style intégré : utilise un seul attribut <style> par balise SVG, contenant toutes les propriétés de style de la balise regroupées dans une syntaxe CSS.

Remarque : par défaut, la stylisation SVG est définie sur Attributs de présentation car cela garantit une plus grande compatibilité avec les outils de développement courants, tels qu’Android Studio.

  • 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.
Logo Adobe

Accéder à votre compte