L’utilisation des SVG en intégration dans un site internet est de plus en plus répandu. Les SVG sont peu volumineux et apportent une grande liberté pour les animations. Ce tutoriel vous explique comment créer des SVG optimisés et comment les exporter via Illustrator pour une meilleure utilisation sur le web.

Qu’est-ce qu’un SVG ?

Le format SVG se différencie des formats JPG ou PNG car il ne décrit pas le contenu d’un visuel pixel par pixel. Le SVG contient des informations sur les formes décrivant le visuel sous forme de coordonnées de points.

En bref, le SVG est un ensemble de coordonnées de points décrivant une image vectorielle. C’est donc grâce à ça que le SVG est plus léger que les formats JPG ou PNG.

💙Le coup de coeur des développeurs : on peut changer les dimensions du SVG à l’infini sans perte de qualité. 💙

Pour finir sur la définition du SVG, il existe entre autre deux logiciels pour en créer, modifier ou exporter :

Avant de commencer…

Pour rappel, ce tutoriel est axé sur la création de SVG pour le web via le logiciel Illustrator.

Colorimétrie

💡 Avant de vous lancer dans la création de votre SVG destiné au web, vérifiez que vous travaillez en mode RVB 💡

Les logiciels comme Illustrator ont été conçu pour des créations pour l’impression, le format de base des documents est donc en CMJN. Pensez à le changer.

Organisation

Le SVG peut se lire dans n’importe quel éditeur de texte et comme pour tout document HTML, il est plus facile de s’y retrouver quand le fichier est bien structuré.

Pour chaque élément crée du SVG pensez à le nommer, que se soit un calque ou un groupe de calques. Ainsi, en nommant correctement vos tracés, vous pourrez les retrouver plus rapidement dans votre éditeur de texte.

Ranger vos calque dans des groupes vous aidera aussi si vous souhaitez animer votre SVG par la suite. Par exemple, regrouper dans des groupes les éléments à animer.

À noter que :

  • Nom du calque ou du groupe sur Illustrator == ID du groupe SVG
  • Nom du style graphique sur Illustrator == nom de la classe CSS.

Dans l’exemple ci-dessous le style graphique nommé « fond-vert » est aussi le nom de la classe CSS. Le groupe de calques nommé « S » est l’ID du groupe.

tuto svg illustrator
<svg xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 500">
  <defs>
    <style>
      .fond-vert {
        fill: #45f4ca;
      }
    </style>
  </defs>
  <title>Logo_station_spatiale</title>
    <g id="Logo">
      <g id="S">
        <circle class="fond-vert" cx="266.3" cy="241" r="0.9"/>
        <circle class="fond-vert" cx="265.7" cy="236" r="0.7"/>
        <circle class="fond-vert" cx="257.7" cy="237" r="0.6"/>
      <g>
    </g>
</svg>

Créer un SVG dans Illustrator

Formes Illustrator et basiles HTML correspondantes

La première étape de ce tutoriel consiste a vous exposer les principales balises HTML que vous retrouverez dans votre SVG. Il s’agit de formes simples crées sur Illustrator.

Trait

ligne illustrator
<line 
 x1="0.5"
 y1="53.5"
 x2="84.5"
 y2="0.5"
 style="fill: none;
 stroke: #2fb196;
 stroke-linecap: round;
 stroke-miterlimit: 10"
/>

Carré et rectangle

<!-- CARRÉ -->
<rect 
 width="43"
 height="43"
 style="fill: #2fb196"
/>

<!-- RECTANGLE -->
<rect
 x="51"
 width="20"
 height="43"
 style="fill: #2fb196"
/>

Cercle et oval

<!-- CERCLE -->
<circle
 cx="21"
 cy="21"
 r="21"
 style="fill: #2fb196"
/>

<!-- OVAL -->
<ellipse
 cx="60.5"
 cy="21"
 rx="8.5"
 ry="21"
 style="fill: #2fb196"
/>

Polygone

<polygon
 points="0 8 22 8 34 0 58 0 58 30 0 30 0 8"
 style="fill: #2fb196"
/>

Forme libre

<path
 d="M20.8,32.1c-9-.2-12.8,7.3-17,5s-5.1-18.8,1-22c2.4-1.2,4.4.1,11,2,12.2,3.6,19.8,5.8,25,3,7.7-4,4.2-15.2,12-19,5.3-2.6,13-.4,16,4,5.2,7.5-2.9,21.8-11,24-2.2.6-3-.1-5.4.9-6.2,2.5-5.4,9.3-9.6,11.1C37,43.6,31.8,32.3,20.8,32.1Z"
 style="fill: #2fb196"
/>

Optimisation des formes du SVG sur Illustrator

Formes simples

Privilégiez l’utilisation de formes simples comme : ligne, rectangle, cercle… Les formes simple possèdent moins de points donc moins de coordonnées. Elle apporte moins de code et donc des fichiers plus petits. Ce qui facilite par la suite la manipulation du fichier pour faire des animations par exemple.

Sur le SVG exemple ci-dessous vous verrez la différence entre un rond fait avec une forme simple (ellipse) et le même rond fait en chemin (path).

<circle
 cx="85"
 cy="85"
 r="85"
 fill="#121212"
/>

<path 
 d="M404,85a85,85,0,1,1-24.9-60.1A84.6,84.6,0,0,1,404,85Z"
 fill="#121212"
/>

Formes dessinées

Pour un SVG une forme dessinée est un chemin autrement appelé <path>. Un path est un ensemble de coordonnées. Vous avez un exemple de path ci-dessous.

💡 Un commande rapide sur Illustrator vous permet de réduire le nombre de ponts d’une forme dessinée. OBJET -> TRACÉ -> SIMPLIFIER 💡

<!-- FORME DE BASE -->
<path class="cls-1" d="M126.8,195.7c-7.2.9-13.1,6.2-17.6,12s-8,12.3-13.2,17.4c-11.7,11.3-30.1,13.3-45.7,9A69.2,69.2,0,0,1,9.9,203.6a69.7,69.7,0,0,1-8.4-49.9c.6-3.1,1.6-6.3,3.8-8.6s5-3.3,7.9-4.3a106.2,106.2,0,0,1,29.1-4.9c7.3-.1,15.9-.2,20-6.2,1.8-2.7,2.2-6.1,2.4-9.4A77.2,77.2,0,0,0,62,95.9c-2.5-8.9-6.6-17.7-6.3-27s7.4-19.4,16.6-18.5C83.6,51.5,87.7,66.5,97.6,72c6.3,3.6,14.5,2.7,20.7-.9s10.9-9.6,14.2-16.1c7.1-13.6,9-29.2,14.4-43.6,1.2-3.1,2.6-6.4,5.4-8.3S158.4.8,161.7.4c7.8-.8,16.8-1.1,22,4.8,3,3.3,4,7.9,4.5,12.4,2.3,18-.2,36.5,2.7,54.5.3,2.2.8,4.5,2.5,6a9.8,9.8,0,0,0,5.3,1.7c31.7,3.7,63.7-5.5,95.6-4.2,3,.1,6.2.4,8.6,2.2s4,7.2,4.3,11.4c.7,11.8,26.4,24.5,25.6,36.3s-28.1,25.2-28.9,38.2a11.6,11.6,0,0,1-.8,4.2c-.8,1.8-2.5,3-4.2,4.1-15.3,9.2-34.5,7.3-52.4,7.4-2.4,0-5,.1-7.1,1.2-4.7,2.4-5.9,8.5-6.3,13.7a281.8,281.8,0,0,0-.9,34.4c.3,6.2.3,13.5-4.7,17.4-2.2,1.8-5.1,2.4-7.9,3-22.6,5-40.3,3.2-53.5-17.5C157.5,218,146.7,193.1,126.8,195.7Z"/>


<!-- FORME SIMPLIFIÉE -->
<path class="cls-1" d="M126.8,198.3C35.9,300.1-23.5,175.7,9,145.1c88.3-15.4,45.7-11.8,49.1-82.7,5.5-10,15.7-12.9,24.6-3.5C144.8,137.7,137-61.9,188.3,20.2,177.8,129,241.5,63.9,302.9,80.4c4.3,11.3,10.6,26,25.7,37.9,15,14.4-11.6,26.7-22.3,41.6-4.8,27.7-41.9,20-66.9,23.3-15.3,14.1.7,46.3-11.8,65.5C157.3,275.9,166.9,196.7,126.8,198.3Z"/>

Le texte dans un SVG : vectorisé ou non ?

Il y a deux façon d’utiliser le texte dans un SVG. Soit le laisser en zone de texte pour qu’il soit modifiable soit le vectoriser.

Ne pas vectoriser la typographie :

SI vous choisissez cette option c’est que vous souhaitez pouvoir modifier votre texte de votre SVG à tout moment. Vous devez donc vous assurer que vous avez accès à votre typographie ou que se soit une web front. De ce fait, à l’ajout de votre SVG sur une page HTML, votre texte sera inchangé et modifiable à volonté.

Vectoriser la typographie :

Si vous vectorisez votre texte cela signifie que que le rendu visuel de votre texte est plus important que la modification de ce dernier. Par exemple cette solution est souvent utilisée pour les logos.

Attention il ne faut pas oublier que lorsque vous vectorisez un texte cela créer un grand nombre de points et augmente considérablement le poids et le nombre de lignes de votre SVG. (exemple ci-dessous avec le texte « HEY »)

💡 Un commande rapide sur Illustrator vous permet de vectoriser votre texte TEXTE -> VECTORISER ou Shift + Cmd + O 💡

<!-- TEXTE NON VECTORISÉ -->
<text transform="translate(0 47.4)">HEY</text>


<!-- TEXTE VECTORISÉ -->
<g
 <path d="M4.9,0V16H23.4V0h4.9V38.1H23.4V20.3H4.9V38.1H0V0Z"/>
 <path d="M56.6,20.3H41.8V34H58.3v4.1H36.9VH7.5V4.1H4.8V6.2Z"/>
 <path 
d="M73.4,38.1V22L61.3,0h5.6l5.4,10.5c1.5,2.9,2.6,5.2,3.8,7.9h.1c1.1-2.5,2.4-5,3.9-7.9L85.6,0h5.6L78.4,21.9V38.1Z"/>
</g>

L’exportation du SVG sur Illustrator

💡 Pour exporter votre SVG faites : FICHIER -> EXPORTER LA SÉLECTION -> SVG -> OPTIONS SVG💡

Plus en détail sur chacune des options d’exportation :

STYLISATION

Ce menu vous permet de choisir la manière dont vous souhaitez que le code généré soit écrit dans le fichier SVG.

  • CSS interne
  • Style intégré

Police

Ici choisissez la manière dont les polices doivent être représentées dans le fichier SVG. Soit en zone de texte, soit en texte vectorisé. (Différence expliquée plus haut dans l’article)

  • Vectorisé
  • SVG

Images

Choisissez si vous voulez que les images soient enregistrées dans votre SVG en étant incorporées dans le fichier ou liées.

  • Conserver
  • Incorporer
  • Lier

ID objet

Informe sur comment les ID sont attribués aux objets dans le SVG.

  • Noms de calques
  • Minimal
  • Unique (gère le doublons)

Responsive

En cliquant sur cette option, le fichier SVG généré se mettra à l’échelle dans un navigateur.

Vous avez aimer ce tutoriel sur les SVG avec Illustrator ? Maintenant apprenez-en plus sur les couleurs avec l’article Design et couleurs : duo de choc ⚡️

Vous souhaitez intégrer vos SVG sur une page web? Animez vos SVG en CSS ici.