SVG ? Semaine 1 : notes de lectures MDN + XML + CSS intégré + JS + WP Gutenberg

MDN Web Docs

Documentation sur les SVG

D’une certaine façon, SVG est aux graphiques ce que HTML est au texte.

• SVG pour Scalable Vector Graphics en anglais (graphiques vectoriels adaptables);
• Images SVG + comportement sont définis dans des fichiers textes de type XML ;
• On peut rechercher dans le texte, les indexer, réaliser des opérations dans le code et les compresser;
• Possible d’en créés avec n’importe quel éditeur de texte, ou avec des logiciels de dessin

Les éléments SVG

Documentation des éléments sur MDN

Surprise totale que de constater que le premier éléments est <a> ! Aussi simple que cela. C’est peut-être le temps de s’informer sur les différences entre le XML et HTML.

XML ?

Discussion avec chatGPT 3.5 sur le XML et le HTML (et contexte SVG)

XML en bref :

• Langage de balisage générique, utilisé pour définir des règles de structuration de données.
• Principalement utilisé pour stocker et transporter des données de manière structurée, sans se soucier de l’apparence visuelle!!! Les SVG sont exceptions!
• Chaque élément SVG est représenté par une balise XML et peut avoir des attributs décrivant ses propriétés et des balises enfants pour définir son contenu.
• Belle surprise! une balise <style> peu être un enfant de la balise <svg>!

Il est intéressant de penser le SVG comme un média portable avec toutes ses propriétés. Peut-on y inclure aussi une balise <script> enfant de <svg>? Continuez de lire!

SVG, interractivité et accessibilité

Mouse over pour voir !

Les éléments SVG peuvent être interactifs en utilisant une balise <style> et des événements JavaScript tels que onclick, onmouseover, etc. De plus, en fournissant des descriptions textuelles appropriées à l’aide de la balise <title>, les graphiques SVG peuvent être rendus accessibles aux personnes utilisant des technologies d’assistance, ça fonctionnerait comme un aria-label donc.

Au sujet de l’accessibilité, voici un article très intéressant et détaillé sur css-tricks .

Mouse over pour voir un titre !

Intégration directement dans un bloc Gutenberg et pseudo-éléments

À remarquer que la première animation avec le mouse over contient une balise <style> à l’intérieur de <svg>, mais au départ, elle ne contenait aucun id ou classe pour identifier le cercle. Cela fait en sorte que tous les circle:hover sur une même page gagnaient aussi la propriété transform, et non pas que le bloc Gutenburg qui le contient. Pour y remédier, après avoir compris le problème, j’ai ajouté un id pour différencier #ce-cercle. Je me suis aussi amusée en ajoutant une animation css directement à l’intérieur du svg, mais cela est en attandant d’en connaitre plus sur les propriétés d’animation XML propres aux svg : <animate>, <animateMotion> et <animateTransform>, entre autres. Quoique par la suite, le cours que j’ai débuté sur Udemy, utilise des @keyframe et animation, propriétés CSS bien connus et comme j’ai fait par intuition.

<svg
      width="200"
      height="200"
      xmlns="http://www.w3.org/2000/svg">
      <style>
        /* Par défaut, pas de transformation */
        #ce-cercle {
          transition: transform 0.5s ease; /* Ajoute une transition fluide */
          cursor: pointer;
          animation: example 4s infinite;
        }
        /* Lorsqu'on survole le cercle */
        #ce-cercle:hover {
          transform: translate(
            50px,
            -50px
          ); /* Applique la transformation uniquement lors du survol */
        }
        @keyframes example {
          0%   {fill: red;}
          25%  {fill: yellow;}
          50%  {fill: blue;}
          100% {fill: green;}
       }
      </style>

Les blocs Gutenberg de base semblent être bien développés pour prendre en charge les SVG. Je découvre aussi qu’après avoir inséré du code avec le bloc HTML, on peut obtenir un aperçu. L’aperçu ne permet pas de tester l’interractivité CSS tel un :hover.

On peut aussi injecter une page HTML au complet, incluant toute la déclaration DOCTYPE! (et balises header et meta, par exemple). Est-ce une redondance de codes qui sera conserver au final, et sinon, est-ce que cela alourdi l’éxécution ? Probablement. Je vais éviter de faire cela.

Pour en revenir aux éléments SVG … et JavaScript!

La balise <script> peut-être, tout comme <style>, intégrée directement à l’intérieur de la balise HTML <svg>. Certaines compatibilités sont à vérifier, on ne peut pas tout faire, sauf sur Firefox, où même async et defer sont supportés!

Clique sur l’étoile pour voir une boîte alert!

      <!-- Étoile -->
      <polygon
        points="100,10 130,90 210,90 150,130 170,210 100,170 30,210 50,130                -10,90 70,90"        fill="#ffcc00"
        onclick="alert('Salut à toi!')"
      />

      <!-- Script JavaScript -->
      <script type="text/javascript">
        function showAlert() { alert('Salut à toi!'); }
      </script>

À investiguer

• Sécurité des SVG. Code injectable avec un script inclus! –> XML
• Comment ne pas travailler en pixel fixes pour les dimensions (width )
• Décortiquer : d= »M130,100 Q120,140 100,120 Q80,140 70,100 L100,80
• Continuer de prendre connaissance de la documentation sur MDN et aussi css-tricks
• Mieux se renseigner sur l’accessibilité et bien coder mes SVG – article sur css-tricks
• Établir l’ordre des balises à utiliser à l’intérieur de la balise <svg>.