Impossible d’ouvrir l’illustration

Après plusieurs mois d’utilisation de notre script pour exporter des SVG depuis Illustrator, on a commencé très soudainement à voir l’erreur :

Impossible d’ouvrir l’illustration

quand on reprenait le travail après l’exportation des fichiers. Totalement impossible d’ouvrir le fichier AI abîmé.

Après plusieurs tests avec un fichier qui souffrait du problème et un autre qui n’en souffrait pas, nous avons découvert que le problème était une police corrompue (Mac).

Supprimer la police corrompue et la ré-installer a résolu le problème.

Comme le fichier AI abîmé est impossible à recouvrir, il est très important de faire des sauvegardes régulières.

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

Comment remettre une image à rotation 0° dans Adobe Illustrator

Si on a tourné une image dans Illustrator, comment la remettre comme elle était, c’est à dire à 0° de rotation ?

  1. Ouvrir la palette « Liens » (sous fenêtre)
  2. Cliquer sur l’image tournée
  3. Regarder dans « Liens » sous « Echelle » et on voit le dégré de rotation
  4. Ouvrir la palette « Transformation »
  5. Dans la dernière case à gauche (« Rotation »), mettre la valeur négative de ce qu’on a vu dans « Liens ». Si la valeur dans « Liens » était 10,30°, mettre -10,30° par exemple.

Préparer les images d’une page SVG pour un site web, toutes à la fois

Le plus facile est de faire le design d’une page sans se soucier de la taille/poids des images.

On se sert des images d’origine, de bonne qualité et très lourdes pour faire une jolie page sans se prendre la tête.

Mais, quand la page est prête à être publiée, comment faire pour redimensionner toutes les images ?

La règle de base (pour moi) est qu’une image qui remplit l’écran devrait faire 3000px de large.

Ceci est vrai si l’image est de bonne qualité. Si l’image est de moindre qualité, je la mets à 4000px.

Cela fait un joli effet, même zoomé, sur l’écran retina d’un iMac sans pour autant être très lourd.

Par défaut, je crée des pages à 1000px de large, et cette explication y dépend.

Pour convertir toutes les images d’une page à la fois à la bonne résolution :

1. Sauvegarder le document comme PDF sans rien cocher dans les options.

image

2. Dans les options de compression, choisir les options suivantes :

Color bitmap images: Bicubic downsampling à 288 ppi pour images au dessus de 288ppi

Compression : Automatic (JPEG)

Qualité d’image : Maximum

image

Si vous avez des images grayscale, mettre les mêmes options etc.

3. Fermer le PDF

4. Ouvrir le PDF

5. Sauvegarder le PDF en tant que SVG avec l’option “Emplacement de l’image : Lier

image

Il vaut mieux le faire dans un nouveau dossier.

6. Donner les noms corrects aux images créées.

On trouvera dans le dossier avec le SVG (qu’on peut supprimer), toutes les images de la page converties à l’échelle voulue.

Seulement, les noms ne seront pas corrects, et il faudra les renommer.

NOTE : Comme la qualité de l’image est dégradé en créant le SVG, j’ai choisi de sauvegarder le PDF à 288 ppp. Cela fait qu’une image de 1000px de large dans le fichier Illustrator fera 4000px de large à la fin du processus.

Les navigateurs ne respectent pas l’approche d’un texte dans un fichier SVG

Si, dans Illustrator, on met un texte sur un courbe avec une approche modifiée (le texte est espacé), l’approche est respectée dans le fichier SVG.

C’est à dire que le chiffre trouvé dans le SVG correspond au chiffre qu’on voit dans la palette Illustrator).

Mais les navigateurs ne calculent pas l’espace de la même manière qu’Illustrator.

Firefox ne met pas d’espace du tout.

Safari met le chiffre précisé, mais l’interprète différemment. Il y a beaucoup trop d’espace.

Résultat : on ne peut pas rajouter d’espace entre les lettres dans Illustrator.

Ombres en AI/SVG

Le but est de dupliquer cette ombre, créée sur Photoshop, avec une ombre exclusivement en SVG :

image

En évitant de charger un fichier de plus (ombre.png), la page sera moins lourde.

Voici comment faire :

1. Dessinez une forme (ovale, horizontale)

2. Dans le panneau « Apparence » sélectionner le FILL qu’on va flouter

3. Cliquer sur le logo fx en bas du panneau « Apparence » puis « Filtres SVG » puis « Appliquer Filtre SVG »

4. Dans le panneau « Appliquer Filtre SVG » qui apparaît, cliquer sur l’icône de la page en bas (pour en créer un nouveau)

5. Coller le texte suivant :

<filter  height=“150%” width=“150%” id=“Drop-Shadow” filterUnits=“objectBoundingBox” y=“50%” x=“-5%”>

<feMorphology operator=“dilate” radius=“3” in=“SourceAlpha” result=“BEVEL_10” />
<feGaussianBlur  stdDeviation=“15”></feGaussianBlur>

</filter>

Pour finir, faire un masque pour ne voir que la partie voulue.

Important :

Lorsqu’on importe un document dans un autre, ce sont les données PDF qui sont utilisées.

Dans ce cas, c’est une image qui va remplacer l’ombre qu’on vient de créer.

Il ne faut donc utiliser cette technique que dans le document principal, et non pas dans documents placés.

Plus d’information sur smashingmagazine.com.

Lorsqu’un document AI est placé dans un autre, c’est le PDF qui est placé

Lorsqu’on place un document AI dans un autre, ce sont les données PDF (sauvegardées avec l’AI par défaut) qui sont placées, et non pas le document AI d’origine.

Il vaut mieux utiliser des PDF plutôt que des AI pour placer dans un deuxième document, pour éviter cette confusion.

C’est pour cette raison que les Actions SVG ne sont pas utilisables dans un fichier placé.

Images dans des .ai placés ne seront pas incluses

Si on utilise un document Adobe Illustrator placé (un bas de page commun à tout le site, par exemple), et qu’il y a une image dans ce document :

  • L’image ne sera pas incluse correctement dans le SVG final

Illustrator va exporter l’image avec un nom tel que « D5C175AC803E038B.png » dans le même répertoire que le SVG exporté.

Le problème vient du fait que lorsqu’on place un document AI dans un autre, ce sont les données PDF qui sont placées, et non pas le document d’origine.

Il vaut mieux utiliser des PDF plutôt que des AI pour cette utilisation.

C’est pour cette raison que les Actions SVG ne sont pas utilisables dans un fichier placé.