Tuto: Créer son logo SVG et l’animer en CSS

849 566 ditog - Agence web et conseils en stratégie digitale - Cholet, Bressuire, Les Herbiers

picto-couleur

L’objectif de ce tutoriel est de créer un logo au Format svg à partir du logo ditog en png, et l’animer en utilisant du css (et un peu de Smil dont je vous parle juste après).
demo (spoiler)

Le format SVG, késako?

SVG (Scalable Vector Graphics) est un format d’images vectorielles basé sur le langage de balisage XML.
Désormais recommandé par la W3C, ce format est maintenant pris en charge par tous les navigateurs modernes (Internet Explorer 9+, Firefox 4+, Chrome 16+, Safari 5+ et Opera 9.5+).
Outre sa légèreté, l’un des principaux avantages de ce format et que l’on peut redimensionner une image sans aucune perte de qualité contrairement à une image jpeg ou png par exemple.
Mais il permet également de séparer et d’animer les éléments de votre logo. Pour ceci, on a 3 possibilités:

  • En utilisant Smil (Synchronized Multimedia Integration Language), qui offre des possibilités intéressantes, mais n’est pas pris en charge par internet explorer, et sera déprécié dans le futur à la faveur d’API d’animations web. Je l’utiliserai tout de même dans ce tuto pour demonstration.
  • En Css, qui offre une bonne alternative, notamment grâce à l’utilisation keyframes, que je présenterai plus bas.
  • Et enfin en javascript, qui ouvre tout un tas de possibilités, que je n’utiliserai pas ici, mais pour lequel je donnerai quelques liens en fin de tuto.

Mais ne partez pas tout de suite!

C’est tout pour la Théorie, passons maintenant à la pratique.

Exporter une image png ou jpeg au format SVG

La première chose à faire est donc de convertir notre image au format SVG. Pour ceci je vais utliliser ici Adobe Illustrator, mais il est également possible de le faire avec le logiciel open source Inkscape.
L’opération est assez simple: On ouvre le fichier avec AI, et on l’enregistre en choisissant le format svg (Fichier > Enregistrer sous > Format: svg)
Ce qui devrait ouvrir cette fenêtre:
svg-final
On peut ici obtenir le code XML de notre SVG en cliquant sur SVG code.
Ce qui pour notre logo donne le code suivant:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 66.8 64.7" style="enable-background:new 0 0 66.8 64.7;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#233240;}
	.st1{fill:#D64541;}
	.st2{fill:#FAFAFA;}
</style>
<path class="st0" d="M54.9,61.7H11.4c-3.7,0-6.6-3-6.6-6.6V11.4c0-3.7,3-6.6,6.6-6.6H55c3.7,0,6.6,3,6.6,6.6V55
	C61.6,58.7,58.6,61.7,54.9,61.7z"/>
<g>
	<path class="st0" d="M41.4,23.5H25c-0.5,0-0.9,0.2-1.3,0.5c-0.4,0.4-0.5,0.8-0.5,1.3v15.8c0,0.5,0.2,0.9,0.5,1.3
		c0.4,0.4,0.8,0.5,1.3,0.5h16.4c0.5,0,0.9-0.2,1.3-0.5c0.4-0.4,0.5-0.8,0.5-1.3V25.3c0-0.5-0.2-0.9-0.5-1.3
		C42.3,23.7,41.9,23.5,41.4,23.5z"/>
	<rect x="19.3" y="10.7" class="st1" width="3.9" height="7.2"/>
	<path class="st2" d="M45.6,10.7h-2.4v8.9h-3h-21v1.8v3.9v0.2v15.6c0,1.6,0.6,2.9,1.7,4s2.5,1.7,4.1,1.7h20.6H47l0,0V10.7l0,0H45.6z
		 M43.2,41.1c0,0.5-0.2,0.9-0.5,1.3c-0.4,0.4-0.8,0.5-1.3,0.5H25c-0.5,0-0.9-0.2-1.3-0.5c-0.4-0.4-0.5-0.8-0.5-1.3V25.3
		c0-0.5,0.2-0.9,0.5-1.3c0.4-0.4,0.8-0.5,1.3-0.5h16.4c0.5,0,0.9,0.2,1.3,0.5c0.4,0.4,0.5,0.8,0.5,1.3
		C43.2,25.3,43.2,41.1,43.2,41.1z"/>
	<path class="st1" d="M46.5,48.5h-2.7h-0.3h-0.3v0.2v0.4v4.6l0,0v1.4c0,0.3,0.3,0.6,0.6,0.6h2.7c0.3,0,0.6-0.3,0.6-0.6v-1.4l0,0
		v-4.6v-0.4v-0.2h-0.3H46.5z"/>
</g>
</svg>

On voit ici les différents éléments du logo avec le premier path correspondant au cadre du fond, le rect au rectangle du haut, etc…

Animation Smil

Nous pouvons maintenant animer notre svg. Je me suis basé pour cela sur ce guide des animations SVG (SMIL)
On va par exemple faire descendre le rectangle du haut vers sa position initiale puis le faire tourner sur lui-même.
Pour cela, on ajoute un id sur notre balise rect et on applique 2 effets successifs: un animate pour la translation et un animateTransform pour la rotation.

<animate
        xlink:href="#ditop"
        attributeName="y"
        begin="0s"
        dur="1s"
        from="-5"
        to="10.7" 
        fill="freeze"
        repeatCount="1"
    />
 <animateTransform
        xlink:href="#ditop"
        attributeName="transform"
        begin="2.5s"
        dur="0.2s"
        type="rotate"
        from="0 21.75 14.3"
        to="360 21.75 14.3"
        repeatCount="2"
    />

Pour les différents paramètres, on se référera à la doc officielle du w3c.
A noter le xlink:href qui permet d’appliquer l’effet sur notre élément #ditop.
J’ai ensuite ajouté de la même manière une petite animation de rotation sur le bloc du bas (cf le code dans l’onglet html du codepen ci-dessous).
Pour relancer l’animation, cliquer sur le rerun sur le codepen.

[codepen_embed height= »500″ theme_id= »0″ slug_hash= »ONPaqN » default_tab= »result » user= »gotsky »]See the Pen ditog_logo by gotsky (@gotsky) on CodePen.[/codepen_embed]

We made it!

Mais ce n’est pas fini. Allons un peu plus loin en ajoutant un peu de css.

Animation CSS

Comme je le disais plus haut, le CSS est une bonne alternative à Smil, notamment grâce à l’utilisation des keyframes. Pour l’utilisation des keyframes, je me suis référé à cette documentation de css-tricks .
Pour une rotation du cadre par exemple, on ajoute un id ditback sur la première balise path et on ajoute le code suivant au css:

@-webkit-keyframes backspin {
  from {
    -webkit-transform: rotate(180deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}
@-moz-keyframes backspin {
  from {
    -moz-transform: rotate(180deg);
  }
  to {
    -moz-transform: rotate(360deg);
  }
}
@-o-keyframes backspin {
  from {
    -o-transform: rotate(180deg);
  }
  to {
    -o-transform: rotate(360deg);
  }
}
@keyframes backspin {
  from {
    transform: rotate(180deg);
  }
  to {
    transform: rotate(360deg);
  }
}

#ditback{
    animation: backspin 1s;
    -moz-animation: backspin 1s; /* Firefox */
    -webkit-animation: backspin 1s; /* Safari et Chrome */
    -o-animation: backspin 1s; /* Opera */
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}

A noter que pour des raisons de compatibilités sur les différents navigateurs, on doit déclarer l’animation et les keyframes pour chaque moteur: -webkit- pour chrome, -moz- pour firefox, -o- pour opera
Le transform-origin nous permet de déclarer le centre de la rotation.
Pour finir, j’ai ajouté un fondu sur le d du logo et un changement de couleur sur les 2 rectangles, en css toujours (cf le code dans l’onglet css du codepen ci-dessous).

[codepen_embed height= »500″ theme_id= »0″ slug_hash= »JXoeww » default_tab= »result » user= »gotsky »]See the Pen ditog svg logo by gotsky (@gotsky) on CodePen.[/codepen_embed]
Wow!

 

Quelques liens pour aller plus loin

Le « SVG Tutorial » de Jacob Jenkov est complet et très instructif.
Pour manipuler des images plus complexes, il peut être utile de bien comprendre le système de cadre et de coordonnées d’un Svg. Cet article vous aidera à y voir plus clair: Comprendre SVG ViewBox et Viewport

On peut bien entendu aller beaucoup plus loin et créer des animations élaborées grâce au javascript et à des librairies dédiées.
Parmi celles-ci, Lazy Line Painter est une librairie jQuery qui permet de dessiner des chemins Svg. Le site propose même d’uploader son fichier Svg, et de générer les scripts qui vont bien pour créer son animation.
De nombreux autres tuto et librairies Svg sont également disponibles sur le site jQuery Rain.

Laisser une réponse

Votre adresse courriel ne sera pas poubliée