Updated

FR Tutoriel 1.11 · Pièges Potentiels

Mis à jour le 9 mars, 2020

< 1.10 · rem — retour

Tutoriel 1.11 · Pièges potentiels

Certaines techniques, possibles dans Adobe Illustrator, ne s’appliquent pas au format SVG.

Il est toujours possible de contourner la limitation, et dans la plupart des cas la solution est relativement simple.

Il existe une page sur votresite.com/fr/limites qui fournit une liste de techniques ayant besoin d’être adaptés au format SVG. Ouvrez le fichier Illustrator sync/desktop/limites-fr.ai pour plus d’information.

Calques d’information

Certaines des solutions proposées nécessitent la création d’un calque d’information. Un calque d’information est utile dans Adobe Illustrator mais n’apparaît pas dans la page web. Pour indiquer qu’un calque ne devrait pas apparaître dans le SVG final :

  • cliquer deux fois sur le calque pour accéder aux options
  • décocher « Imprimer »
  • il n’est pas nécessaire de cocher « Modèle »

Filet de dégradé (outil mesh)

Si un fichier Illustrator contient un filet de dégradé, une image PNG sera créée en même temps que le fichier SVG. Cette image ne sera pas visible sur la page web.

Contourner cette limitation

Pour inclure un filet de dégradé dans la page web :

  1. exporter la page en SVG (ce qui crée une image PNG du dégradé)
  2. déplacer l’image PNG dans le dossier « links »
  3. ouvrir le fichier Illustrator à nouveau
  4. déplacer le filet de dégradé sur un calque d’information
  5. importer l’image PNG dans le fichier Illustrator (liée, pas incorporée)
  6. exporter la page en SVG

Espacement des caractères

Dans lllustrator, il y a deux façons de modifier l’espace entre les lettres. En bas du panneau caractère, on voit :

  • à gauche, le crénage : l’espace entre deux caractères
  • à droite, l’approche : l’espace entre plusieurs caractères
panneau-caractere

Le format SVG ne prend pas correctement en compte les paramètres de crénage et d’approche.

Pour éviter un décalage visuel entre les fichiers Illustrator et SVG il faut que les valeurs de crénage et approche restent à zéro en permanence :

Dans les deux cas V/A = 0.

Par contre, il est possible de modifier le crénage (à gauche) entre deux lettres seulement.

Contourner cette limitation

Si la quantité de texte est limitée, le plus facile est de convertir le texte en courbes (en gardant une version en texte sur un calque d’information.

Si on souhaite utiliser des caractères espacés d’une manière globale (tous les titres des pages, par exemple), il n’est pas compliqué de créer une nouvelle version d’une police, pour ajouter de l’espace automatiquement.

Nous recommandons BirdFont pour ce type de manipulation.


Plans de travail multiples

Le script « Tout sauvegarder en SVG » ne prend pas en compte des plans de travail multiples.

Un seul fichier SVG sera exporté, dont le coin supérieur gauche sera défini par les coordonnées 0,0 dans le fichier Illustrator.

Contourner cette limitation

Pour utiliser un fichier avec des plans de travail multiples, il suffit de le sauvegarder en format SVG manuellement, en cochant la case « Utiliser les plans de travail ».


Deux objets ayant le même nom

Si on veut manipuler les objets sur la page avec CSS ou Javascript, il faut connaître les ID des objets en question.

Mais, si deux objets ont le même nom dans Illustrator :

  • un calque appelé « nous-contacter »
  • des textes groupés sous le nom « nous-contacter »

Les ID des objets dans le SVG seront imprévisibles :

  • ‹g id=”nous-contacter”›
  • ‹g id=”nous-contacter_1“›

On ne peut pas savoir préalablement quel objet aura quel ID.

Le fait de supprimer l’un des deux ne corrige pas le problème : une fois que le deuxième objet a été nommé « nous-contacter_1 », le fait de supprimer le premier n’aura aucun effet.

Résoudre le problème

Pour résoudre le problème il faut supprimer toute référence au nom original puis le redonner à un seul objet.


Images hors du dossier « links »

Il n’est pas possible d’inclure des images stockées ailleurs que dans le dossier « links », à côté du fichier Illustrator.

Les images suivantes n’apparaîtront pas sur la page finale :

  • images dans le même dossier que le fichier Illustrator
  • images incorporées dans le fichier Illustrator

Svija se sert uniquement du dossier « links » pour éliminer toute confusion possible par rapport au lieu de stockage d’images.


Attention au déplacement d’images

Comme décrit, Illustrator cherche automatiquement les images manquantes dans un dossier « links ».

Mais, si l’image n’est pas manquante, Illustrator ne cherchera pas.

Si vous copiez un document et ses images liées ailleurs, quand vous ouvrez le fichier Illustrator à nouveau les images liées seront celles de l’ancien dossier.

Par exemple :

  • Vous copiez une affiche faite pour un client vers le dossier « sync/desktop » de votre site
  • Vous copiez les images liées vers le sous-dossier « links »
  • Vous ouvrez l’affiche et tout paraît correct
  • Vous le publiez en ligne et il manque toutes les images

Bien que vous ayez correctement copié les images, Illustrator les a trouvées dans l’ancien dossier.

Pour mettre à jour les liens d’images, il suffit de :

  1. renommer temporairement l’ancien dossier
  2. ouvrir le fichier Illustrator et le sauvegarder

Le fait de renommer l’ancien dossier oblige Illustrator à chercher les images dans le dossier correct, « links ».


Pour continuer : référence.

Leave a Reply

Your email address will not be published.