PhōsPixel

Intégrer un SVG animé directement dans un article WordPress

Les objectifs de ce premier test avec des SVG dans WordPress étaient :

Parce que je voulais tester et être en mesure de publier mes animations, avant d’apprendre à créer et animer des SVG moi-même, j’ai demandé de l’aide à chat GPT :

Bonjour ! pour faire un test rapidement, j’aurais besoin que tu me génères du code pour animer un cercle et un carré SVG.

J’ai d’abord tenté d’intégrer le code généré directement en mode éditeur de code, ce qui n’a pas du tout fonctionné. J’ai ensuite choisi un bloc Gutenberg pour intégrer du HTML, et bingo!, cela fonctionne parfaitement, du moins pour une animation simple.

Le <style> incorporé directement s’appliquera à tous les SVG d’une même page alors il faut donner id et classes originales aux éléments ou, comme je le verrai plus tard, définir un contexte interne (namespace) avec la déclaration xmnls.

J’ai constaté ce problème sur la page Terrain de jeu alors qu’un SVG ayant une position absolute et une propriété à <cercle> devenait hors flow et changeait la couleur d’un autre cercle dans la même page.

Code SVG généré par ChatGPT 3.5 et intégré directement dans un bloc Gutenberg de type HTML .

<svg width="200" height="200">
  <!-- Cercle -->
  <circle id="monCercle" cx="50" cy="50" r="40" fill="blue">
    <animate attributeName="cx" from="50" to="150" dur="3s" repeatCount="indefinite" />
  </circle>
  
  <!-- Carré -->
  <rect id="monCarre" x="50" y="100" width="50" height="50" fill="red">
    <animate attributeName="x" from="50" to="150" dur="3s" repeatCount="indefinite" />
  </rect>
</svg>

Le code du bloc Gutenberg visualisé en mode éditeur. 

<!-- wp:html -->
<svg width="200" height="200">
  <!-- Cercle -->
  <circle id="monCercle" cx="50" cy="50" r="40" fill="blue">
    <animate attributeName="cx" from="50" to="150" dur="3s" repeatCount="indefinite" />
  </circle>
  
  <!-- Carré -->
  <rect id="monCarre" x="50" y="100" width="50" height="50" fill="red">
    <animate attributeName="x" from="50" to="150" dur="3s" repeatCount="indefinite" />
  </rect>
</svg>
<!-- /wp:html -->

Ainsi seul l’ajout du commentaire <!-- wp:html --> diffère, par rapport à coller directement le code dans l’éditeur.

Le même code visualisé dans l’inspecteur.

On ne voit pas le commentaire <!-- wp:html -->. Ce commentaire n’est pas non plus visible lorsqu’on visualiser le code source dans le navigateur.

Extension de support SVG

Si jamais l’intégration de SVG plus complexe s’avère difficile, j’ai trouvé une extension : SVG Support. Je n’ai pas lu la documentation mais on parle de nettoyage de code, c’est quelque chose auquel je devrai porter une attention future.

À propos de wp:html et des blocs Gutenberg

Après recherches, j’en comprends que dans l’architecture de l’éditeur de blocs de WordPress, chaque type de bloc a une structure spécifique, identifiée par un préfixe suivi du nom du bloc. Dans ce cas, wp:html est le préfixe et html est le nom du bloc qui représente du contenu HTML brut.

Lorsqu’on utilise l’éditeur de blocs pour ajouter du contenu HTML à un article WordPress, le contenu est encapsulé dans un bloc de type wp:html. Cela permet à WordPress de gérer et d’afficher correctement le contenu lors de l’édition et de l’affichage sur le site Web alors que le commentaire n’est pas visible dans le contenu HTLM final qu’il encadre.