18041 sujets

Questions générales et questions de débutants

Image svg

Bonjour à tous
Actuellement je récupère les erreurs 404 et, s'il s'agit d'une image inconnue, le programme exécute le code suivant

$root = $_SERVER['DOCUMENT_ROOT'];
.....
$altPath = "$root/photo/missing.png";
header('Content-Type: ' . mime_content_type($altPath));
readfile($altPath);


Voici l'image en question: upload/1637313769-48769-missing.png
La taille qui s'affiche dépend du contexte, en général la taille de l'image manquante, ce qui amène à afficher cette image de 16x16 dans de grandes tailles où elle est fortement pixellisée.

Je me suis dit qu'une image svg serait plus appropriée.
Le code est donc devenu

$root = $_SERVER['DOCUMENT_ROOT'];
.....
$altPath = "$root/photo/missing.svg";
header('Content-Type: ' . mime_content_type($altPath));
readfile($altPath);


Je constate que
1) si je mets dans la barre de navigation l'adresse d'une image inexistante, par exemple "toto.jpg" cela affiche bien l'image svg
2) par contre si je mets dans une page une balise <img src="toto.jpg"> il ne s'affiche rien.
Je suis donc revenu au code antérieur.

Je ne m'étonne pas que le comportement des images svg ne soit pas exactement la même que celui des autres images (par exemple on ne peut pas joindre une image svg à un post sur Alsacreations) mais j'aimerais comprendre un peu mieux ce comportement.
Auriez vous des documents explicatifs à me recommander ?
Merci de votre aide
Modérateur
Bonjour,
est ce que ton image <img> à une dimension dans le CSS où est ce que le SVG à un attribut viewbox qui lui donne au moins une taille par défaut ? Le SVG à t'il des couleurs ? ...

est tu certain qu'il n'y a aucune autre ressource de chargée si l'image demandée n'existe pas ?
Merci de ta réponse
L'image est dans une <figure class="diapo"> dont nous avons déjà parlé.
Voici le code svg

<?xml version="1.0" encoding="UTF-8"?>
<svg heigth="120" width="120" version="1.1" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
	<metadata>
		<rdf:RDF>
		<cc:Work rdf:about="">
		<dc:format>image/svg+xml</dc:format>
		<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
		<dc:title/>
		</cc:Work>
		</rdf:RDF>
	</metadata>
	<circle width="100" height="100" cx="60" cy="60" r="50" fill="#fff" stroke="#f00" stroke-width="10"/>
	<line x1="25" y1="25" x2="95" y2="95" stroke="#f00" stroke-width="10px"/>
	<line x1="25" y1="95" x2="95" y2="25" stroke="#f00" stroke-width="10px"/>
</svg>

Je remets le code avec chargement de l'image svg.
L'exemple d'image manquante est dans https://tests.osirisnet.net/news/@n_11_21.htm?fr
dans la petite boîte vide sous le titre de l'article. Tu pourras regarder le CSS.
L'auteur va piquer une image dans la vidéo et la mettra avant publication à la fin du mois.

A propos, est-il vraiment nécessaire d'avoir cette balise <metadata> générée par l'outil que j'ai utiliser pour -- disent-ils -- simplifier le code initial ?
Modifié par PapyJP (19 Nov 2021 - 17:15)
Modérateur
apparemment le fichier est bien demandé mais ne fais pas partie des fichiers accepté lorsque l'on regarde dans le l’outil développeur du navigateur : Accept image/avif,image/webp,*/*.

upload/1637340990-2857-papyjp.jpg
Début d'explication : https://developer.mozilla.org/fr/docs/Web/HTTP/Headers/Accept

et un tutoriel sur Alsacréations : https://www.alsacreations.com/astuce/lire/1152-en-tetes-http.html

Cdt

edit ... aprés reflexion, ce n'est pas clair si le fichier demandé en final est bien ton SVG.
Modifié par gcyrillus (19 Nov 2021 - 18:01)
Si tu essaies de charger https://tests.osirisnet.net/news/photo/img.jpg (c'est à dire la même chose que dans <img> de la page) ça affiche bien l'image svg, donc le programme exécute bien

$root = $_SERVER['DOCUMENT_ROOT'];
.....
$altPath = "$root/photo/missing.svg";
header('Content-Type: ' . mime_content_type($altPath));
readfile($altPath);


Je vais regarder de près les liens que tu m'as donnés.
Bonne soirée
Quand j'examine la trace
1) sur le chargement direct de l'image j'ai
upload/1637343022-48769-img.jpg-trace.png
2) sur le chargement de l'image par <img src=".."> j'ai
upload/1637343177-48769-page.htm-trace.png
Dans les deux cas on voit
- qu'il est demandé le fichier img.jpg
- qu'on a un état 404
- qu'on a reçu un fichier svg de 921 octets

La différence c'est "l'initiateur"
Dans le cas 1 c'est BrowserTabChild.jsm donc du code du navigateur
dans le cas 2 c'est common.js c'est à dire le fichier javascript principal de la page (comme son nom l'indique il est pratiquement présent dans toutes les pages du site)

En pratique, la balise <img> est effectivement générée par un script de cette page, sous la forme de
document.write(...)

quelle relation peut il y avoir?
Modérateur
Bonsoir,

pour repondre à ta derniere question, je ne saurais Smiley decu

Cependant, comme javascript ne te rebute pas, peut-être peut tu l'utilisé pour injecter ton svg directement dans le source de l'image :

for (let e of document.querySelectorAll("img")) {
  e.addEventListener("error", (event) => {
    e.src="data:image/svg+xml;charset=utf-8, ... la le svg ... ";
  });
}


exemple test en ligne :
https://jsfiddle.net/39s0udk5/

outil que tu peut utiliser pour convertir ta ressource en data : https://dopiaza.org/tools/datauri/index.php

Tu peut en profiter pour mettre à jour l'attribut alt si cela te semble pertinent, ou lui appliquer d'autres styles.
Cdt
Modifié par gcyrillus (20 Nov 2021 - 21:54)
Merci de ta réponse.
Effectivement on peut intégrer une image svg directement en javascript.
Merci pour ton code, très astucieux de trapper les erreurs sur les images. Mais comme mes balises <img> sont générées dynamiquement, encore faut il que le code qui trappe les erreurs soit déclenché au bon moment : si c'est trop tôt, les images ne sont pas encore dans le DOM, si c'est trop tard, l'événement erreur peut s'être produit avant que le programme s'exécute. Je vais regarder, c'est un truc amusant à faire....

Ce n'est pas très important, ce qui m'intéressait surtout est d'essayer de comprendre comment ces f... navigateurs traitent les images svg. Manifestement pas exactement comme ils traitent les autres images. J'ai toujours du code un coin qui remplace les icônes svg par autre chose quand le navigateur est une version de IE (paix à son âme, pour autant qu'il en ait eu une)
Modifié par PapyJP (21 Nov 2021 - 19:42)
Sujet clos
Aller à