18041 sujets

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

Sprite SVG

Bonjour a tous !

j'essaie de mettre en place un fichier sprit avec des icônes svg.

J'ai crée mon fichier *.html et mon icons.svg (avec 2 icônes pour tester), le tous dans le même dossier.

Tout à l'air correct mais à l'affichage de ma page html aucune icône ne s'affiche.
J'ai suivi ce tuto : https://la-cascade.io/comment-travailler-avec-des-icones-en-svg/
Les icônes elles mêmes s’affichent bien si je les intègrent directement a la page html mais pas depuis le sprit.

voila mes codes:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>sprit</title>
</head>

<body style="background-color:red">

     <svg>
		   	<use xlink:href="icons.svg#fish" />
     </svg>
</body>
</html>


le SVG
<svg xmlns="http://www.w3.org/2000/svg">
	 <symbol id="expand_more" viewBox="0 0 36 36">
	 	<path d="M24.88 12.88L18 19.76l-6.88-6.88L9 15l9 9 9-9z"/>
	 </symbol>
	 
	 <symbol id="ici" viewBox="0 0 20 20">
		<path d="M10,1.375c-3.17,0-5.75,2.548-5.75,5.682c0,6.685,5.259,11.276,5.483,11.469c0.152,0.132,0.382,0.132,0.534,0c0.224-0.193,5.481-4.784,5.483-11.469C15.75,3.923,13.171,1.375,10,1.375 M10,17.653c-1.064-1.024-4.929-5.127-4.929-10.596c0-2.68,2.212-4.861,4.929-4.861s4.929,2.181,4.929,4.861C14.927,12.518,11.063,16.627,10,17.653 M10,3.839c-1.815,0-3.286,1.47-3.286,3.286s1.47,3.286,3.286,3.286s3.286-1.47,3.286-3.286S11.815,3.839,10,3.839 M10,9.589c-1.359,0-2.464-1.105-2.464-2.464S8.641,4.661,10,4.661s2.464,1.105,2.464,2.464S11.359,9.589,10,9.589"></path>
  </symbol>
</svg>


j'ai essayé avec la base de DW sans plus de succès
<svg xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink"  
     width="960px" 
     height="560px" 
     viewBox="0 0 960px 560px">


Quelqu'un aurais une idée d’où vient l'erreur ?


Merci de m'avoir lu
Modifié par katyD (08 Jan 2018 - 18:17)
Modérateur
Hello,

Est ce que ton code SVG est valide ? Je doute qu'il le soit. Entres autres...., regarde s'il n'y a pas de fermeture d'élément svg prématurée.... Smiley cligne
Modifié par niuxe (08 Jan 2018 - 15:59)
Merci niuxe,

en effet il y avait un </svg> qui trainait mais j'ai toujours le même problème ....
Modérateur
Je vais corriger ton souci. Tu y es presque. Je t'invite à lire ce code :
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20">
        <use xlink:href="icons.svg#fish" />
    </svg>
</body>
</html>


icons.svg : 

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <symbol id="expand_more" viewBox="0 0 36 36">
            <path d="M24.88 12.88L18 19.76l-6.88-6.88L9 15l9 9 9-9z"/>
        </symbol>
     
        <symbol id="here" viewBox="0 0 20 20">
            <path d="M10,1.375c-3.17,0-5.75,2.548-5.75,5.682c0,6.685,5.259,11.276,5.483,11.469c0.152,0.132,0.382,0.132,0.534,0c0.224-0.193,5.481-4.784,5.483-11.469C15.75,3.923,13.171,1.375,10,1.375 M10,17.653c-1.064-1.024-4.929-5.127-4.929-10.596c0-2.68,2.212-4.861,4.929-4.861s4.929,2.181,4.929,4.861C14.927,12.518,11.063,16.627,10,17.653 M10,3.839c-1.815,0-3.286,1.47-3.286,3.286s1.47,3.286,3.286,3.286s3.286-1.47,3.286-3.286S11.815,3.839,10,3.839 M10,9.589c-1.359,0-2.464-1.105-2.464-2.464S8.641,4.661,10,4.661s2.464,1.105,2.464,2.464S11.359,9.589,10,9.589"></path>
        </symbol>
    </defs>
</svg>

Tu remarqueras que :
- j'ai écrit l'élément <defs>
- je t'ai nettoyé ton code (quelques erreurs s'étant glissées)
- j'ai mis le liens de icons.svg en relatif (ce qui veut dire que le fichier est à côté d'index.html). Cependant, dans le cas d'une application en url rewriting, il faut mettre les liens internes en absolute (liens de tes fichiers requis dans le html)
- je n'ai pas déclaré l'élément <desc>. Or c'est une erreur de ma part (volontaire) afin que tu comprennes pourquoi c'est mauvaise chose de ne pas le faire (2 choses assez distinctes)....
- je n'ai pas déclaré l'élément <title>. Or c'est une erreur de ma part (volontaire) etc.
- je n'ai pas mis d'attributs viewBox, width et height dans l'élément svg de icons.svg. Ce sont des définitions de symboles. Smiley cligne
- j'ai enlevé "px" à plusieurs endroits.

D'ailleurs, ces éléments <desc> et <title>, où doivent ils être placés ?

Maintenant parlons de la manière dont tu as abordée ta problématique d'afficher des icons dans ta vue ou dans ton template. Est ce que chaque icon dans ton sprite sera unicolore ou possédera plusieurs couleurs ? N'était il pas judicieux de se créer un police d'icons. N'est ce pas plus performant tout en gardant une qualité irréprochable (le vectoriel) ?

Dans tous les cas, ton approche SVG est très pertinente. Mes compliments !

ps : ton icon "here", n'est pas fermé apparemment. Attention, aux bugs disgracieux.
Modifié par niuxe (08 Jan 2018 - 20:27)
Meilleure solution
Merci a toi pour toutes ces explications Smiley smile tous s'affiche bien et j'ai pu l’intégrer dans mon template sans soucis.

<desc> et <title> vont venir ce placer juste après <svg> avant <defs> dans le fichiers icons.svg

j'ai refermée le <path> "expand_more".

je ne connaissait pas la solution des polices d'icons. Je vais aller lire le tuto alsacreation sur le sujet.

Une belle journée à toi
Modérateur
katyD a écrit :

<desc> et <title> vont venir ce placer juste après <svg> avant <defs> dans le fichiers icons.svg


Et non.... Chaque occurrence de tes symboles (<use>) doivent avoir leurs <title> et <desc>. Comment les moteurs de recherches référencent ils un objet SVG dans une page lambda ? Comment les navigateurs pour l'accessibilité au web peuvent interpréter un élément SVG dans la page HTML ?
katyD a écrit :

j'ai refermée le <path> "expand_more".


En SVG, tu as le droit de déclarer certains éléments de deux manières : 

<rect x="50" y="50" width="100" height="40"/>
<!-- ou -->
<rect x="50" y="50" width="100" height="40"></rect>


Tu remarqueras que la première déclaration de <rect> est auto-fermée par le signe "/". Tu retrouves cette même écriture dans le XHTML 1.0 et XML.

Quand je parlais de refermer ton <path>, c'est dans la valeur de son attribut "d". En éditant ton fichier (pas le symbole puisqu'il y a <defs>....) sur ce motif précis (here). Quitte à créer provisoirement un fichier à part entière, tu ouvres avec Inkscape/Illustrator et tu regardes si tous les segments sont fermés. Sinon, plus simple, tu ajoutes un "z" (minuscule) à la fin de la valeur. Ensuite tu ajoutes un style pour la largeur et la couleur de tes traits de bordure :
- stroke
- stroke-width

Ensuite ces changements faits dans ton fichier temporaire, tu affiches le résultat.
katyD a écrit :

je ne connaissait pas la solution des polices d'icons. Je vais aller lire le tuto alsacreation sur le sujet.

Oui et il est bien fait de mémoire. Tu verras Smiley smile

katyD a écrit :
Une belle journée à toi


Idem. Bonne journée/soirée à toi
niuxe a écrit :


Et non.... Chaque occurrence de tes symboles (&lt;use&gt;) doivent avoir leurs &lt;title&gt; et &lt;desc&gt;. Comment les moteurs de recherches référencent ils un objet SVG dans une page lambda ? Comment les navigateurs pour l'accessibilité au web peuvent interpréter un élément SVG dans la page HTML ?


Comme le fichier icons.SVG est déjà décrit pour le référencement est-ce qu'il est nécessaire de le refaire pour chaque icône appelée dans le code?
Mettre juste le nécessaire pour l’accessibilité n'est pas suffisant? Pour ça j'utilise les propriétés aria-label dans le bloc qui contient la balise SVG et un aria-hidden dans le <svg> lui même. 

<a href="#" class="scrollToTop" aria-label="scroll to top">
            	
    			<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon exand_more" viewBox="0 0 20 20" aria-hidden="true">
    			    <use xlink:href="sprite/icons.svg#expand_more" />
    			</svg>
            </a>



ok, merci pour tes précisions Smiley smile


J'ai essayée de mettre un peu de style sur mon icône (qui s'affichait bien) notamment pour définir sa taille, comme avec un texte, et l'épaisseur de trait et plus rien ne s'affiche. Smiley bawling ou est ce que j'ai écrit une erreur?

.icon {
  /* Permet de redimensionner en changeant la font-size de l’icône */
  width: 1em;
  height: 1em;
  /* Bel alignement visuel des icônes avec le texte */
  vertical-align: -0.15em;
  /* fill par défaut = valeur de la propriété couleur de son élément parent
  fill: currentColor; */
}

.exand_more {
  /* Modifier la largeur et la hauteur */
  font-size: 40px;
  /* Changer la couleur de remplissage (fill) */
  color: purple;
  /* Changer l’alignement vertical si vous avez besoin de plus de précision
     (parfois nécessaire pour un rendu parfait au pixel près) */
  vertical-align: top;  
  stroke: coral;
  stroke-width: 4%;
  stroke-linejoin: round;
}


--EDIT---
J'ai refait la même chose en isolant la partie du code concernant les icônes SVG et l'affichage est correcte. C'est à l'intérieur de mon template que le problème apparait. Je regarderait demain quelle partie des mes css rentre en conflits avec.
-- Re Edit --
j'avais toucher a la viewbox de mon fichier SVG dans le template. Pour vérifier la viewbox j'ai rajoutée une classe .box à mon <svg> en mettant une couleur criarde qui ne se confond pas avec le reste. L'affichage est bon Smiley smile

Bonne soirée à toi
Modifié par katyD (16 Jan 2018 - 19:15)
Sujet clos
Aller à