Les ID en conflit dans un fichier SVG après exportation depuis Illustrator

Normalement, Adobe Illustrator donne un ID à chaque élément du SVG qui correspond à son nom dans le fichier.

Si on a le malheur d’avoir deux calques qui portent le même nom, par exemple, Adobe rajoute ’_1_’ à la fin du ID de l’un des deux.

image

Le SVG exporté contient les ID suivants :

<g id=“cases”>
<rect id=“caseTrois_1_” width=“142” height=“138”/>
<rect id=“caseTrois” width=“142” height=“138”/>
<rect id=“caseDeux” width=“142” height=“138”/>
<rect id=“caseUn” width=“142” height=“138”/>
</g>

Lorsqu’on veut manipuler les éléments selon leur ID, cela pose un problème important.

Logiquement, si on supprimait l’un des deux éléments, l’ID de l’autre devrait porter l’ID correct, mais ce n’est pas le cas.

Une fois qu’Illustrator a trouvé nécessaire de modifier l’ID, il ne veut pas le remettre automatiquement.

LA SOLUTION

La solution est d’enlever l’ID qui gêne puis de le remettre :

1. Sélectionner le nom du calque

2. Cmd-X pour le couper, puis retour pour terminer

3. Sélectionner le nom du calque (qui est maintenant générique)

4. Cmd-V pour coller le nom voulu, puis retour pour terminer

Documents vierges avec calques par défaut dans Adobe Illustrator

Il est très simple d’ouvrir un nouveau document dans Adobe Illustrator avec toutes les préférences qu’on veut, y compris les calques, contenus de base etc.

MODIFIER LE RACCOURCI POUR UN NOUVEAU DOCUMENT

  1. naviguer dans Edition » Raccourcis Clavier (en dernier)
  2. sous “Commandes Menu”, modifier le raccourci pour “Nouveau d’après un modèle” à cmd-N
  3. cliquer “Oui” pour écraser les préférences précédentes

METTRE VOS MODÈLES DANS LEUR DOSSIER

Mettre les modèles dans [dossier de l’application]/Bonus/fr_FR/Modèles

Créer un “alias” de Modèles dans le dossier de l’application pour y accéder plus facilement.

CRÉATION DE NOUVEAUX MODÈLES

Chaque fois qu’on crée un nouveau document, il nous sera demandé de choisir un modèle.

Au début, il va falloir créer les modèles au besoin. On peut aussi les copier depuis :

~/Library/Application Support/Adobe/Adobe Illustrator 19/fr_FR/New Document Profiles

L’ordre des calques d’un fichier Illustrator et l’ordre d’affichage du fichier SVG

Récemment nous avons fait une page très longue, et en visitant le site nous avons remarqué que la page prenait trop de temps à charger.

Après un peu de réflexion, nous nous sommes rendus compte que l’on s’était trompé en créant le fichier Adobe Illustrator.

Admettons qu’il y a cinq modules d’information sur la page :

  1. Titre
  2. Bloc présentation
  3. Bloc services
  4. Bloc témoignages
  5. Pied de page

Sans réfléchir, nous avons suivi le même système en y dédiant des calques dans Illustrator :

image

Mais en traitant cette page qui chargeait lentement, on s’est rendu compte que le fichier SVG était construit dans le sens contraire :

<svg…
   <g id=pied_de_page…
   <g id=bloc_temoignages…
   <g id=bloc_services…
   <g id=bloc_presentation…
   <g id=titre…
</svg>

Le résultat fait que pour une page lourde en images, l’image du haut de page charge en dernier.

C’est évident quand on y pense, seulement nous n’y avions pas pensé.

La solution, bien entendu, est d’inverser l’ordre des calques dans Illustrator :

  1. Pied de page
  2. Bloc témoignages
  3. Bloc services
  4. Bloc présentation
  5. Titre