18041 sujets

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

Afficher en HTML la fonte d’une image SVG

Bonjour, à tous,
J’ai trouvé comment afficher en HTML le texte dans la bonne fonte à partir d’un source SVG, mais je ne trouve pas comment faire la même chose directement sous la forme d'une image avec une balise image <img>.
Comment faire ?
Merci pour vos explications.
Modifié par Pyanepsion (23 Jun 2023 - 18:15)
Modérateur
Bonjour,

Il faut modifier le svg (si on suppose que l'on a mis le nom du fichier svg comme valeur de l'attribut src de l'image).

Amicalement,
Si j’enregistre le source en un fichier logo.svg et que je veux afficher le fichier avec le code HTML suivant, l'image logo.svg n'affiche pas la bonne police, son code SVG qui suit oui.
<!DOCTYPE html>
<html>
<head>
<title>Test SVG</title>
<style>
@font-face {
  font-family: "SimplySans-Book";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/SimplySans-Book.woff2") format("woff2"),
       url("../fonts/SimplySans-Book.woff") format("woff"),
       url("../fonts/SimplySans-Book.ttf") format("truetype");
}
.svg-logo-texte {
  font-family: "SimplySans-Book";
  font-size: 294px;
  fill: #ffffff;
}
</style>
</head>
<body>
<img src="/svg/logo.svg" alt="Testine">
<svg width="100%" height="100%" viewBox="0 0 10000 2500" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g id="Logotype">
<rect id="Fond-blanc" x="0" y="0" width="10000" height="2500" style="fill:#fff;"/>
<g transform="matrix(0.997165,0,0,1,7.17084,0)">
<text x="2529px" y="2248px" style="font-family:'SimplySans-Book', 'Simply Sans', sans-serif;font-size:583px;">Fonte SimplySans-Book</text>
</g>
<circle id="Cocarde" cx="1020" cy="1250" r="1020" style="fill:url(#_Radial);"/>
</g>
<defs>
<radialGradient id="_Radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(929.546,-517.804,383.673,929.546,790.796,1126.18)">
<stop offset="0" style="stop-color:#2e3092;stop-opacity:1"/>
<stop offset="0.28" style="stop-color:#4a4ca1;stop-opacity:1"/>
<stop offset="0.35" style="stop-color:#9b9ccb;stop-opacity:1"/>
<stop offset="0.41" style="stop-color:#fff;stop-opacity:1"/>
<stop offset="0.72" style="stop-color:#f9d2cf;stop-opacity:1"/>
<stop offset="1" style="stop-color:#e43a30;stop-opacity:1"/>
</radialGradient>
</defs>
</svg>
</body>
</html>

Modifié par Pyanepsion (24 Jun 2023 - 07:55)
Modérateur
Bonjour,

Le SVG chargé dans la balise image est un document externe (autre URI) et n'est lié à aucun fichier de style chargé dans le document où se trouve la balise image. Ce sont deux documents/ressources différentes.
Il est normal qu'il n'affiche pas cette police si elle n'est pas directement lié et importé par le fichier SVG lui même . Il faudrait aussi ajouté la balise style et @font-face au fichier SVG.

Cdt
@gcyrillus

J'avais fait des tests rapide sur le sujet, j'avais récupéré le fichier svg et essayé d'y inclure sous différente façons le style.

Et étrangement quand on appelle le svg en externe le navigateur ne charge pas le style qui est inclus dedans.

Si on ouvre le svg par contre là le style du texte fonctionne.

Et j'avoue que le sujet m'intrigue assez

test
Re,
@gcyrillus

Tu es un chef, ça fonctionne impeccablement.
Ça me travaillais cette histoire.
Prévenir un modérateur
Répondre au sujet
Aller à