Outils pour coder et optimiser des SVG

J’ai débuté le cours Learn SVG Animation – With HTML, CSS & Javascript de Code With Sam sur Udemy. Il suggère d’optimer le code avec SVG OMG. Je prends donc le code du SVG avec grain (image PNG) créé pour l’article précédent dans Adobe Illustrator et je le colle dans l’application.

Optimiser avec SVG OMG

On remarque que l’app retire d’emblée le commentaire <!-- Generator: Adobe Illustrator 28.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --> du code.

Recommendation d’optimisation de Code With Sam

• Conserver les paramètres pas défaut
• Activer Prettify markup pour aider CodePen, entre autre, à lire le code – Code With Sam utilise CodePen pour faire les SVG.

Résultats de l’optimisation

Malgré l’image PNG, ce SVG avec grain matricielle n’est pas bien lourd à la base : 21.41k. Grâce à SVG OMG, il a perdu 0.25k. C’est quand même bien!

Deuxième test d’optimisation

J’ai voulu procéder à un 2e test avec un code moins long, sans <image>, afin de mieux visualiser les différentes options de l’app. J’ai choisi le code avec le script JS pour aussi voir comment ce sera traiter. Le code devient beaucoup plus concis que celui très visuel et détaillé créé par chatGPT.

Je remarque aussi que SVG OMG supprime la déclaration : <?xml version="1.0" encoding="UTF-8"?>. Après recherches, SVG OMG semble très utilisé, j’en conclus que la déclaration n’est pas obligatoire mais il faut le namespace xmlns="http://www.w3.org/2000/svg".

Code optimisé

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">

  <path fill="#fc0" onclick="alert('Salut à toi!')" 
   d="m100 10 30 80h80l-60 40 20 80-70-40-70 40 20-80-60-40h80z"/>
  <circle cx="80" cy="40" r="5"/>
  <circle cx="90" cy="30" r="5"/>
  <circle cx="100" cy="20" r="5"/>

  <script type="text/javascript">
    function showAlert() { alert(&apos;Salut à toi!&apos;); }
  </script>
</svg>

Code original

 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  
      viewBox="0 0 200 200">
 <title>Un script JS dans une balise svg</title>

      <!-- É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!')"
      />

      <!-- Notes de musique pour représenter le chant -->
      <circle cx="80" cy="40" r="5" fill="#000" />
      <circle cx="90" cy="30" r="5" fill="#000" />
      <circle cx="100" cy="20" r="5" fill="#000" />

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

Extension SVG pour VS Code

J’ai installé l’extensions SVG pour VS Code. Elle aide avec de l’auto-completion, en plus de formater et permettre de visualiser les images. Cela m’a permi de modifier les coordonnées du code produit par chatGPT pour le test avec balise script. L’étoile coupé avec la boite d’alerte n’est plus coupé dans son viewBox 🙂