Présentation Projet de fin d’études
phospixel.com
Objectifs de départ
Animer avec des SVG et la bibliothèque Three js, dans un contexte de site WordPress
Je souhaitais :
- Apprendre à animer avec des SVG et Three.js;
- Comparer les performances (ressources matérielles, bande passante) entre des SVG et Three.js, pour des effets similaires;
- Consigner mes recherches dans un journal en ligne;
- Intégrer des SVG et du Three.js dans WordPress;
- Créer un thème original pour WP;
- Renouveller mon site web personnel;
- Apprendre à prototyper des sites web, l’interractivité et maquetter des animations dans Figma.
Projet remaniné
Les SVG : c’est comme faire du Photoshop mais avec du code!
- Les SVG c’est plus qu’un dessin ou une icône;
- Demandent d’apprendre le langage XML;
- Exit Three.js, renouveller mon site, comparer les performances;
- Figma sera un survol;
- Besoin d’apprendre davantage le PHP pour WP : pas de support natif pour SVG;
- Difficultés en dessin : Adobe Illustrator apportant sa couche de difficulté.
Produit multimédia :
- Un site WordPress de type journal de recherches sur les SVG;
- Avec un thème original incorporant des SVG ;
- Mettre en valeur mes explorations et consigner mes apprentissages.
- Créer des SVG portables : du code portable et autonome pouvant être intégré n’importe où.
Démarche de recherche
- Suivre des tutoriaux (Udemy, css-tricks.com);
- Lire la documentation (MDN, W3C, css-tricks.com);
- Lire du code sur CodePen;
- Réaliser les exercices, m'approprier la matière, puis les pousser plus loin;
- Me créer des exercices d'intégration en ajoutant des techniques déjà explorées à mesure que j'en apprenais des nouvelles;
- Publier mes meilleurs exercices en les annotant.
Démarche artistique
- Un intérêt pour créer des textures, dont du grain, des éléments visuels qui ne sont pas de l'ordre du flat design mais qui ne sont pas non plus matriciel.
- Maîtriser, comprendre, ce qui peut être fait en SVG et CSS, en terme d'animation, donc en vanilla, avant d'apprendre des bibliothèques JavaScript comme GSAP.
C'est quoi un SVG? C'est quoi le XML?
D’une certaine façon, SVG est aux graphiques ce que HTML est au texte.
Cette citation de MDN image bien la nature et la puissance des SVG. Puissance car en plus de ses propres éléments, un SVG peut :
- Contenir une feuille de style;
- Contenir un script;
- Contenir du HTML, incluant une déclaration complète <!DOCTYPE> !
L'Extensible Markup Language (XML), « langage de balisage extensible » en français, est un métalangage informatique de balisage générique qui est un sous-ensemble du Standard Generalized Markup Language (SGML), comme le HTML, et qui comprend un sous-langage, le SMIL, qui permet d'animer. Le XML est principalement utilisé pour structurer et échanger des données entre des plateformes ou des appareils, tel que des imprimantes.
Ainsi, le XML permet de définir des éléments (un texte, un cercle, un filtre, etc.) et le SMIL permet d'indiquer quand ce contenu sera affiché, pendant combien de temps et dans quelle position x et y de la fenêtre d'affichage.
Les difficultés
Les SVG c'est vieux! Le standard actuel est le SVG 1.1 (deuxième édition) qui date de 2011. Depuis 2018, le SVG 2 est à l'étude au W3C. On tente de le rapprocher du HTML 5 et d'animer avec du CSS au lieu du SMIL qui deviendrait obsolète. Mais ça ne fonctionne pas toujours!
Ainsi, il est conseillé d'employer le CSS lorsque les attributs existent et sont identiques, comme transform et transform. Le problème c'est que ça ne fonctionne pas toujours!
Le CSS c'est de la mise en page et ça ne comprend pas par rapport à quoi transformer lorsqu'il n'y a pas de page! De plus, les propriétés x et y n'existent pas en CSS, alors on travaille constament avec deux langages.
Principales difficultés rencontrées
=> leurs solutions
- Tutoriaux dépassés, éléments ne fonctionnant plus malgré que le SVG 2 n'est pas en vigueur (par exemple les liens internes xlink vs href) => Essai-erreur, lire, regarder du code récent sur CodePen.
- Pas de support SVG pour WordPress => Ajouter du support au thème, avec des fonctions PHP.
- Dessin vectoriel d'Illustrator : le path en trait simple n'est pas vraiment un trait simple et ne s'anime pas correctement => Utiliser Figma ou un autre logiciel tel Inkscape.
- La fonction JS getTotalLenght() rendue obsolète sur les classes => utiliser des ID.
- Le SVG code portable contamine tous les autres SVG sur une même page => Créer un système de déclaration de classes et de ID uniques.
Codes d'un Gif animé comme masque
et support XML/SVG pour WordPress
Un Gif animé comme masque pour des carrées de couleurs animées
<?xml version='1.0' encoding='UTF-8'?>
<svg version="1.1" id="gif-anime-1-22022024" class="svg-vedette w-90"
xmlns='http://www.w3.org/2000/svg'
xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 280"
xml:space="preserve">
<title>Un gif animé comme masque !</title>
<style>
.stop-color-1-22022024 {
stop-color: crimson;
animation: couleurs 3s linear infinite;
}
.stop-color--2 {
animation-delay: -1s;
}
[...]
.stop-color--6 {
animation-delay: -1.5s;
}
@keyframes couleurs {
0% {
stop-color: maroon;
}
10% {
stop-color: crimson;
}
20% {
stop-color: orangered;
}
[...]
90% {
stop-color: #f56255;
}
}
.mouvement-1-22022024 {
animation: mouvement-1-22022024 4s infinite ease-out;
}
@keyframes mouvement-1-22022024 {
50% {
transform: translate(-3px, 0px) scale(1.02);
}
}
</style>
<defs>
<mask id="masque-1-25022024" maskunits="userSpaceOnUse"
maskcontentunits="userSpaceOnUse">
<image xlink:href="https://phospixel.com/wp-content/uploads/2024/02/3b04.gif"
width="500" height="280"></image>
</mask>
<linearGradient id="gr-1-25022024" x1="0" y1="0" x2="100%" y2="100%">
<stop offset="15%" class="stop-color-1-22022024 stop-color--1" />
<stop offset="45%" class="stop-color-1-22022024 stop-color--2" />
<stop offset="55%" class="stop-color-1-22022024 stop-color--2" />
<stop offset="85%" class="stop-color-1-22022024 stop-color--3" />
</linearGradient>
<linearGradient id="gr-2-25022024" x1="0" y1="100%" x2="100%" y2="0%">
<stop offset="15%" class="stop-color-1-22022024 stop-color--4" />
<stop offset="45%" class="stop-color-1-22022024 stop-color--5" />
<stop class="stop-color-1-22022024 stop-color--5" stop-opacity="0" />
<stop offset="85%" class="stop-color-1-22022024 stop-color--6" />
</linearGradient>
</defs>
<g mask="url(#masque-1-25022024)" class="mouvement-1-22022024">
<rect fill="url(#gr-1-25022024)" width="100%" height="100%"></rect>
<rect fill="url(#gr-2-25022024)" width="100%" height="100%"></rect>
</g>
</svg>Pour pouvoir intégrer du XML et des SVG dans WordPress, j'ai aussi du ajouter du support dans functions.php
/* * Ajouter du support pour les SVG et le XML,
* permet de mettre des SVG dans la librairie et de les utiliser comme
* image de mise en avant et comme background-image
*/
[extrait - il y a un add_filter avant pour que WP vérifier les extensions des fichiers]
function cc_mime_types($mimes)
{
$mimes['svg'] = 'image/svg+xml';
return $mimes;
}
add_filter('upload_mimes', 'cc_mime_types');
/*
*Pour voir une vignette dans la bibliothèque des média
*/
function fix_svg()
{
echo '<style type="text/css">
.attachment-60x60, .thumbnail img {
width: 100% !important;
height: auto !important;
}
</style>';
}
add_action('admin_head', 'fix_svg');Retour sur mes apprentissages
J'ai développé une passion pour les SVG et je continue mon exploration!
- J'apprends bien de manière autonome;
- J'ai toujours autant de difficulté à évaluer le temps;
- En TIM, j'aurais préféré pouvoir me spécialiser davantage en Web, choisir entre Web et Jeu, pas entre Création et Programmation, mais ce n'est pas grave, j'ai adoré mon programme!