5604 sujets

Sémantique web et HTML

Pourquoi les fichiers images .svg ne s'affichent pas ?

Pages :
Bonjour à vous tous,

J'ai cette ligne de code HTML :
<img src="logo_html_box.svg" loading="lazy" alt="">

Pourquoi le logo ne s'affiche pas sur la page alors qu'il a été fait avec Illustrator et enregistré au format .svg ?

Que le code soit avec vous
salut
en ajoutant width: et height peut etre.

ex: width"50" et height"50"
Modifié par drphilgood (29 Nov 2025 - 09:27)
Cela ne change rien de mettre une largeur et une hauteur.

Par contre, j'ai fait des recherches et j'ai trouvé que les images au format .svg ne s'affichent pas correctement sur les navigateurs, notamment sur Chrome, parce que le serveur ne renvoie pas le bon type MIME et encodage. Il faut ajouter au .htaccess :
Content-Type: image/svg+xml
Content-Encoding: gzip]
Je ne comprends rien !
Modifié par ObiJuanKenobi (29 Nov 2025 - 09:39)
Attention, ce n'est pas du code XML SVG introduit avec la balise <svg>
c'est un fichier HTML contenant la balise <img> faisant appel à un fichier au format .svg provenant d'Adobe Illustrator.

Voila le bout de code contenant l'image .svg :
<div class="logo_menu">
    <a href="index.html">
        <img src="logo.svgz" loading="lazy" alt="">
    </a>
    <nav>
       <ul class="navigation">
            <li><a href="index.html"><img src="img/html-5.png" loading="lazy" alt=""></a></li>
            <li><a href="css.html"><img src="img/css-3.png" loading="lazy" alt=""></a></li>
            <li><a href="js.html"><img src="img/js.png" loading="lazy" alt=""></a></li>
        </ul>
    </nav>
</div>

Modifié par ObiJuanKenobi (29 Nov 2025 - 15:06)
Bonjour,
>> Voila le bout de code contenant l'image .svg :
Sauf que la je vois que le fichier s’appelle logo.svgz
Pourquoi cette extension .svgz?
drphilgood a écrit :
jette un oeil ici

https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content/Including_vector_graphics_in_HTML


J'ai regardé ton lien mais il ne m'est d'aucune utilité. Je ne cherche pas à savoir comment dessiner un logo sur une page HTML, au moyen des balises <svg>, je cherche à importer dans une balise HTML <img>, un logo dessiné avec Adobe Illustrator, et enregistré au format .svg. Mon problème c'est que ce logo (<img src="logo.svgz">) ne s'affiche pas dans le navigateur. A la place j'ai l'icône de la page brisée indiquant que le navigateur ne trouve pas le fichier.

Pourtant, dans mes recherches sur le web, il est précisé que le format .svg est reconnu par tous les navigateurs, sauf les anciens, au même titre que les formats .jpeg, .webp, .png et .gif
Modifié par ObiJuanKenobi (29 Nov 2025 - 15:27)
casper2 a écrit :
Bonjour,
&gt;&gt; Voila le bout de code contenant l'image .svg :
Sauf que la je vois que le fichier s’appelle logo.svgz
Pourquoi cette extension .svgz?


C'est le logiciel Adobe Illustrator qui l'ajoute. J'ai vérifié sur le web, les deux écritures sont correctes, "svg" et "svgz" et les deux formats ne s'affichent pas dans le navigateur. Quand je regarde les propriétés du fichier "test", c'est marqué "svgz". J'ai fait une capture écran.

upload/1764426697-62242-test-svg.png
Modifié par ObiJuanKenobi (29 Nov 2025 - 15:35)
Bonjour ObiJuan,

Tu as exporté ton image depuis Illustrator au format SVGZ. Le fichier résultant n'est donc pas un fichier SVP classique, mais une archive au format GZIP, qui elle-même contient le SVG.

Donc

La grande majorité des navigateurs ne prend pas en charge ce format de fichiers : https://caniuse.com/?search=SVGZ.
Seul le format SVG sans compression est pris en charge : https://caniuse.com/?search=SVG.

Deux solutions s'offrent à toi :
1. Comme tu l'as indiqué plus haut, on peut configurer le serveur Web pour qu'il ajoute l'entête Content-Encoding: gzip dans les en-têtes HTTP lorsque ton fichier SVGZ est renvoyé.
2. Exporter l'image depuis Illustrator en SVG classique au lieu de sa version compressée.

Si tu as accès au projet Illustrator, je pense que la deuxième solution est la plus simple
Modifié par GuillaumeBauer (29 Nov 2025 - 17:27)
GuillaumeBauer a écrit :
Bonjour ObiJuan,

Deux solutions s'offrent à toi :
1. Comme tu l'as indiqué plus haut, on peut configurer le serveur Web pour qu'il ajoute l'entête Content-Encoding: gzip dans les en-têtes HTTP lorsque ton fichier SVGZ est renvoyé.
2. Exporter l'image depuis Illustrator en SVG classique au lieu de sa version compressée.


C'est effecvtivement ce que j'ai trouvé comme réponse dans mes recherches sur le web mais j'ai un autre problème. La version de mon Illustrator date de 2023 et quand j'exporte (et non j'enregistre sous...), le logiciel ne me propose pas d'enregistrer en SVG classic non compressé.
Et quand je créé un fichier .htaccess au niveau du fichier index.html de mon projet avec dedans ça :
# ===============================
# Support des fichiers SVGZ
# ===============================
AddType image/svg+xml .svgz
AddEncoding gzip .svgz
<FilesMatch "\.svgz$">
    Header set Content-Disposition inline
</FilesMatch>
ça ne fonctionne toujours pas, le logo au format .svg ne s'affiche pas.

Tant pis, je vais continuer à utiliser les formats .jepg ou .png ou encore .gif, le format .svg ne semble pas être au point.
Modifié par ObiJuanKenobi (29 Nov 2025 - 17:35)
Modérateur
Je t'ai demandé de nous afficher le contenu du fichier svg (le code indenté). Oublie svgz. Reste dans les standards. Depuis au moins 10 ans, n'importe qu'elle svg est affichable dans un navigateur avec <img> ou avec <svg>. Pourquoi ça ne fonctionnerait pas chez toi ? Si demain, tu es sur nginx, ton .htaccess n'aura aucune utilité.

Il y a des moyens de compresser le contenu d'un svg sans passer par le sgvz (scour). De mémoire, on peut même le faire via un paquet npm. Je ne me souviens plus de son nom.
Modifié par Niuxe (29 Nov 2025 - 18:00)
Niuxe, je ne comprends rien à ce que tu me racontes.
Tu me parles un langage que je ne comprends pas.
J'ai déjà dit que ce n'est pas du code <svg>, c'est un dessin vectoriel que j'ai fait moi même sur Illustrator.
Tu me parles de nginx, de github, paquet npm, c'est du chinois pour moi !
Modifié par ObiJuanKenobi (29 Nov 2025 - 18:04)
Quand j'ouvre le fichier logo.svg avec Visual Studio Code, oh miracle, il m'affiche le logo, point de code SVG ou HTML.
En outre, tu serais prié de baisser d'un ton !
Voici le code SVG du logo fait avec Adobe Illustrator :
<?xml version="1.0" encoding="UTF-8"?>
<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 178.74 68.99">
  <defs>
    <style>
      .cls-1 {
        letter-spacing: 0em;
      }

      .cls-2, .cls-3 {
        stroke-width: 0px;
      }

      .cls-2, .cls-4 {
        fill: #5f479f;
      }

      .cls-5 {
        letter-spacing: 0em;
      }

      .cls-6 {
        letter-spacing: 0em;
      }

      .cls-7 {
        letter-spacing: .03em;
      }

      .cls-8 {
        letter-spacing: 0em;
      }

      .cls-9 {
        letter-spacing: 0em;
      }

      .cls-3, .cls-10 {
        fill: #fff;
      }

      .cls-11 {
        letter-spacing: 0em;
      }

      .cls-4 {
        font-size: 20px;
      }

      .cls-4, .cls-10 {
        font-family: Gotham-Black, Gotham;
        font-weight: 800;
      }

      .cls-10 {
        font-size: 15.14px;
      }

      .cls-12 {
        letter-spacing: 0em;
      }

      .cls-13 {
        letter-spacing: 0em;
      }

      .cls-14 {
        letter-spacing: 0em;
      }

      .cls-15 {
        letter-spacing: 0em;
      }

      .cls-16 {
        letter-spacing: 0em;
      }
    </style>
  </defs>
  <polygon class="cls-2" points="51.23 .59 19.36 16.06 19.36 50.41 50.68 68.99 83.18 50.62 83.18 16.02 51.23 .59"/>
  <polygon class="cls-2" points="18.92 16.1 0 13.14 0 47.32 18.79 50.16 18.92 16.1"/>
  <text class="cls-10" transform="translate(14.63 46.06) rotate(-90) scale(.65 1)"><tspan x="0" y="0">HTML</tspan></text>
  <polygon class="cls-2" points="50.68 0 29.16 0 29.16 10.34 50.68 0"/>
  <path class="cls-3" d="M73.18,15.18c2.4,1.22,1.05,3.03-.17,3.66s-17.83,9.59-19.76,10.55-3.49.76-4.62.08c0,0-20.22-10.26-21.27-10.93s-.55-1.68.13-2.02c.67-.34,21.69-10.72,22.75-11.02s2.8-.14,3.32.08c1.56.67,17.24,8.37,19.63,9.59ZM51.15,10.85c-.68.37-11.81,5.93-12.36,6.14-.55.21-.76.93.17,1.35s9.46,4.71,10.17,5.13,1.6.67,2.56.25,10.68-5.63,11.35-5.97,1.3-1.22-.04-1.89-8.83-4.33-9.59-4.71-1.72-.59-2.27-.29Z"/>
  <path class="cls-3" d="M41.1,31.28c6,3.35,7.02,6.29,7.02,11.23,0,3.74-.73,4.58-2.14,4.58h-1.3s1.89,1.77,2.94,3.11,1.22,3.66,1.22,5.84c0,3.71-.62,5.55-2.52,5.55-1.01,0-1.85-.25-2.56-.59s-21.57-12.82-21.57-12.82v-26.99s16.73,8.87,18.92,10.09ZM28.36,30.44v4.92s10.43,5.68,10.97,6.01c.55.34.88.38,1.35.38s1.01-.17,1.01-1.6-.25-2.56-2.4-3.66-10.93-6.05-10.93-6.05ZM28.36,40.66v5s11.06,6.43,11.77,6.85c.71.42,1.18.59,1.56.59s.84-.59.84-1.64-.29-3.03-2.73-4.29c-2.44-1.26-11.44-6.52-11.44-6.52Z"/>
  <polygon class="cls-3" points="79.44 20.39 72.59 24.3 66.83 36.2 61.19 30.86 53.88 35.02 63.21 43.98 53.25 64.24 60.77 59.66 66.87 47.05 72.71 52.64 80.11 48.14 70.4 39.31 79.44 20.39"/>
  <text class="cls-4" transform="translate(90.14 29.56)"><tspan class="cls-16" x="0" y="0">L</tspan><tspan class="cls-13" x="12.49" y="0">a </tspan><tspan class="cls-6" x="30.47" y="0">b</tspan><tspan class="cls-1" x="44.03" y="0">o</tspan><tspan class="cls-7" x="57.1" y="0">î</tspan><tspan class="cls-8" x="63.73" y="0">t</tspan><tspan x="72.38" y="0">e</tspan><tspan x="0" y="20">à </tspan><tspan class="cls-14" x="17.98" y="20">b</tspan><tspan class="cls-15" x="31.49" y="20">a</tspan><tspan class="cls-12" x="43.64" y="20">l</tspan><tspan class="cls-11" x="49.76" y="20">i</tspan><tspan class="cls-5" x="55.93" y="20">s</tspan><tspan class="cls-9" x="66.19" y="20">e</tspan><tspan class="cls-13" x="78.33" y="20">s</tspan></text>
</svg>

Modifié par ObiJuanKenobi (30 Nov 2025 - 11:14)
gcyrillus a écrit :
Bonjour,

il te suffit de copier/coller la balise SVG de ce code dans un fichier que tu nommes logo.svg et il sera utilisable comme il se doit.


J'ai directement copié/colle le code SVG sur la page HTML, à l'endroit où est sensé apparaître le logo, il ne s'affiche pas dans le navigateur Chrome.

J'ai soumis ce code au validator du W3C, il indique cette erreur :

upload/1764503883-62242-capturedancran2025-11-3012525.png
Modifié par ObiJuanKenobi (30 Nov 2025 - 13:01)
Bonjour, Normal, le code : 
<?xml version="1.0" encoding="UTF-8"?>
n'est pas une balise HTML valide.
Retire la pour avoir un code HTML valide.

Je me demande pourquoi tu ne fais pas comme gcyrillus te conseille de faire?
Pour ma part le code svg s'affiche bien dans Firefox comme dans Chrome et ce que ce soit le code seul ou dans une page HTML valide ou dans un fichier logo.svg.
Prévenir un modérateur
Pages :
Répondre au sujet
Aller à