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

Une police italique ne s’affiche pas correctement sur la page SVG

Sur la page nous avons utilisé la version normale et aussi la version italique d’une police mais la version italique a été remplacé par la police par défaut.

Cela se passe uniquement dans Safari Mobile.

Le problème vient du fait qu’on a précisé “italic” comme style :

@font-face {
font-family:‘MyFont-Italic’;
src:url(’/fonts/MyFont-Italic.woff’) format(‘woff’);
font-weight:normal; font-style:italic;
}

En exportant le SVG depuis Illustrator, la police est listée avec son nom mais pas son style. La solution est de changer le style à “normal” :

@font-face {
font-family:’MyFont-Italic’;
src:url(’/fonts/MyFont-Italic.woff’) format(‘woff’);
font-weight:normal; font-style:normal;
}

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.

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.

Noms des styles CSS en SVG

Lorsqu’on sauvegarde un fichier Illustrator en SVG avec CSS Properties: Style Elements, chaque SVG aura ces noms de style :

  • .st0{fill:#11E700;}
  • .st1{opacity:0.4;fill:#FFFFFF;}
  • .st2{display:none;fill:#697C7E;}

Un problème survient donc si on n’a plus qu’un seul SVG intégré dans un même document.

Il est nécessaire de traiter chaque SVG du côté serveur, pour modifier les noms de style afin qu’ils deviennent uniques.

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