5568 sujets

Sémantique web et HTML

HTML - SVG - Encoded 64 xlink:href TOO LONG

Bonjour a tous !
J ai un petit probleme lorsque je veux inclure une image dans mon fichier HTML (j utilise REACT).
J utilise Figma pour transfomer un design en SVG.
Quand je l exporte je retrouve le code suivant :
<defs>
<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0_1_2" transform="matrix(0.000824971 0 0 0.000900901 -0.0692298 0)"/>
</pattern>
<image id="image0_1_2" data-name="WBA_transparent.png" width="1380" height="1110" xlink:href="data:image/png;base64,iVBORw0KG.....


Le probleme c est que le lien xlink:ref de la raster image est long et c est tres peu pratique pour manipuler le code.

Est ce que vous avez une idee pour solutionner mon probleme SVP ?

Merci d avance et bonne journee !
Bonjour,

Tu peux convertir ton image encodé en base64 en un fichier svg pour réduire le code source html, via un script ou via un site "base64 to svg", par exemple https://base64.guru/converter/decode/image/svg

Au passage, l'attribut xlink:ref est à priori déprécié. Tu peux utiliser uniquement l'attribut href à la place, sauf si tu souhaites conserver le support d'ancien navigateur.
Modérateur
Bonjour,

Même en transformant le base64 en svg en clair, ça restera long.

On peut éventuellement mettre le base64 dans un fichier externe, et utiliser le nom du fichier externe comme attribut du href de la balise image.

Supposons qu'on appelle le fichier externe z516.svg. On peut alors utiliser un code html du genre :
<!DOCTYPE html>
<html>
<body>
<svg>
<defs>
<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0_1_2" transform="matrix(0.000824971 0 0 0.000900901 -0.0692298 0)"/>
</pattern>
</defs>
<image id="image0_1_2" data-name="WBA_transparent.png" width="1380" height="1110" xlink:href="z516.svg"/>
<rect fill="url(#pattern0)" width="200" height="200"/>
</svg>
</body>
</html>

EDIT: ton base64 semble être un png et non un svg, auquel cas il faut fabriquer un fichier png contenant ce que contient ton base64, et mettre le nom du fichier png à la place de "z516.svg" dans l'attribut href de la balise image du code ci-dessus.

EDIT2: je ne vois pas trop l'intérêt de tout ça ceci dit. On pourrait directement utiliser le fichier PNG dans le code html. Et si le but est de se passer de fichier PNG externe, alors tu n'as pas d'autre choix que d'inclure le base64 du png dans ton code comme tu le fais déjà.

Amicalement,
Modifié par parsimonhi (10 Feb 2023 - 22:17)
Prévenir un modérateur
Répondre au sujet
Aller à