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

(reprise du message précédent)

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.

gcyrillus a écrit :
... le format svgz ne fait pas partie des formats supportés.

C'est bien ce qu'il me semblait. Merci pour cette piqure de rappel. De mémoire, le SVG 1.0 et les SVG 1.1 sont supportés.

Je vois autre chose qui manque et qui est important. L'attribut viewbox

À quoi sert cet attribut ? Admettons que ton image ait les dimensions 40px / 30px et que tu souhaites que ton image fasse 80px de largeur, alors la hauteur fera 60px. Comme cet attribut a plusieurs valeurs, je t'invite à lire la documentation.

<?xml version="1.0" encoding="UTF-8"?>

Pour le coup, tu ne peux pas savoir que dans une page html, cet élément est à supprimer. D'une manière générale, prend l'habitude de le supprimer pour une utilisation web.

Pour ma part, tu n'es pas obligé d'insérer ton svg à même la page. Tout dépend du contexte. Si ton élément SVG :
- est interactif
- doit améliorer le SEO
- doit améliorer l'accessibilité (<def> et <title>)
- qu'il n'est pas décoratif (thème / charte graphique)

Alors, un svg au sein de la page est meilleur.

Dans le cas où tu optes pour un <img> et que ton image ait une signification, n'oublie pas la valeur de l'attribut alt. Pour les <img> ou <svg>, prend l'habitude de mettre les valeurs aux attributs width et height. Comme je te l'ai dit précédemment, n'oublie pas viewbox. Parfois, on peut tout à fait l'omettre (C'est pour un comportement plus spécifique de l'affichage).

Sache que tu peux charger un svg via le css (background-image).

edit :
Il y a 2 autres erreurs dans ton SVG :
- supprime data-name et sa valeur
- il manque la valeur et l'attribut type dans l'élément style.

<style type="text/css">

Modifié par Niuxe (30 Nov 2025 - 14:53)

J'ai enlevé la première ligne de code.
J'ai copié le code HTML dans la page HTML et le logo ne s'affiche pas.
J'ai ensuite collé le code dans un fichier logo.svg et j'ai importé ce fichier avec <img src="logo.svg" alt="">, il ne s'affiche pas sur Chrome ni Firefox.
Modifié par ObiJuanKenobi (30 Nov 2025 - 15:05)

Je viens de faire un codepen. Je te conseille vivement de vectoriser ton texte . Sur Illustrator, je ne sais plus du tout comment faire la manip. Jette un oeil sur cette page : https://www.adobe.com/fr/products/illustrator/vectorize-font.html (Adobe devrait ajouter une modale permanente en plein milieu de l'écran. Ça fera plus UX)

Si tu as utilisé <img>, regarde dans l'onglet réseau de l'inspecteur de code de ton navigateur si tu as un status à ton img à 404 ou un 200. Si c'est un 404, ça veut probablement dire que le lien n'est pas correct.

________
Excellente alternative à Illustrator (surtout si tu ne fais pas du print et que tu n'utilises pas Pantone) : https://inkscape.org/fr/
Modifié par Niuxe (30 Nov 2025 - 17:07)