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

Polices Web Optimisées

Voici comment créer une police WOFF optimisée pour le web, à partir d’une police TrueType. WOFF = Web Open Font Format.

Pour utiliser les programmes proposés :

  • TTFautoHint
  • Fontforge

Il faudra une connaissance de Terminal (Mac) ou Console (PC).

Il existe des outils gratuits en ligne mais le processus décrit ici résultera dans des fichiers moins lourds et mieux dessinés sur Windows.

1. Créer une copie de la police originale pour ne pas l’abîmer.

2. Corriger le Hinting avec TTFautoHint [facultatif]

[mise-à-jour] sous Safari, cette étape peut agrandir les espaces intra-lettre d’une manière imprévisible.

Cet étape vise à corriger des fautes d’affichage sur les plates-formes Windows.

Télécharger l’application sur freetype.org, puis l’installer (existe pour Mac & Windows).

Dans l’application Terminal (Mac) ou Console (PC), naviguer dans le dossier de la police, puis taper le texte suivant :

ttfautohint nomAvant.ttf nomApres.ttf

3. Supprimer tous les caractères dont on n’a pas besoin en Fontforge

Si on n’a besoin que des majuscules sans accent (pour les titres des paragraphes, par exemple), je peux transformer une police à 30 ko en une police a 4 ko.

Si j’ai 6-10 polices à charger, ça peut faire une grande différence dans la vitesse de chargement de la page.

Dans Fontforge :

  1. Sélectionner les lettres nécessaires (dans ce cas, les majuscules sans accent)
  2. Appuyer sur ctrl-esc pour inverser la sélection
  3. Encoding » Detach & Remove Glyphs pour supprimer les lettres sans utilité

4. Exporter en format WOFF (Web Open Font) depuis Fontforge

Dans Fontforge :

  1. Appuyer ctrl-maj-G
  2. Sélectionner Web Open Font
  3. Sauvegarder

5. Relier le fichier SVG avec la police

Dans votre fichier CSS :

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

Cet article est basé sur un excellent article en anglais sur pixelsvsbytes.com.