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.

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

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.

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

Options Illustrator pour un SVG

image

Ce sont les options pour exporter un SVG d’Adobe Illustrator pour en faire une page web sans modification ultérieure.

A noter :

  • Polices : SVG (nécessaire pour utiliser les webfonts WOFF, précisés dans un CSS)
  • CSS Properties : Style Elements (pour pouvoir ensuite manipuler les éléments)
  • Decimal Places : 3 (sinon Illustrator met des chiffres en format 2E03, ce qui pose des problèmes)
  • Responsive : nécessaire pour que l’image remplisse l’écran. Cette option supprime le « width » et « height » du SVG