Personnaliser du contenu généré (SVG)

Bonjour,

Pour le coup c'est à mon tour de poser une question alors accrochez-vous, j'en profite.

J'ai dans l'idée d'apporter à chacun de mes liens externes une identification visuelle sous forme d'icône.

L'idée est de produire après chaque lien externe un contenu généré qui contient l'icône en question.

Le format retenu pour l'icône est le svg ; pas idéal car ça ne me semble pas très flexible mais hormis le détail que je vais vous exposer, le svg présente des avantages indéniables je trouve.

De fait j'ai placé mon icône comme faisant partie du fond de mon contenu généré, voici où j'en suis à l'instant :

<!-- mes liens respectent toujours ce format -->
<a href="http://..." target="_blank">un lien externe</a>
<br>
<a href="/bdsjgdfhsgfk.php">un lien interne</a>

[target="_blank"][href^="http"]:after { /* <= ici je dédouble par précaution car je ne sais pas si target=_blank ne serait utilisé dans un autre contexte */
	content: '';
background: url('data:image/svg+xml,<svg fill="currentColor" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 14"><path d="M 9.9998e-7,12.836761 0.02286052,8.6162988 0.04000016,4.395835 C 0.0571398,3.4313245 0.05142992,3.4371696 1.0971429,3.4371696 l 4.3257149,0 4.3257119,0 -0.8171408,0.8417551 -0.8171438,0.8417541 -3.2171432,0.017533 -3.2171423,0.017533 0,3.5832996 0,3.5833056 4.7314294,0.01753 4.731427,0.01753 0,-2.250523 0,-2.2505256 0.822858,-0.835909 0.822855,-0.8359101 0,3.3962482 0,3.3962445 c -0.0057,0.999584 0,0.999584 -0.93714,1.022965 l -5.3428571,-0.02923 -5.2799998,0 C 0.00571488,13.97077 0.00571488,13.96497 0,12.836738 Z"/><path d="m 13.645712,6.9795524 0,-2.7766202 -2.622854,2.6830945 C 9.5771423,8.3649431 8.3657158,9.5749612 8.3257136,9.5749612 c -0.039999,0 -0.4457146,-0.3858024 -0.9085708,-0.8592884 L 6.5771435,7.8563813 9.2342855,5.132369 11.897142,2.414204 l -2.7142844,0 -2.7142858,0 L 7.645714,1.2041828 8.8228582,5.7220459e-6 l 3.5885718,0 3.588569,0 0,3.6709853779541 0,3.6709843 -1.177143,1.2041751 -1.177144,1.204177 0,-2.7766202 z"/></svg>') no-repeat;
	display: inline-block;
	width: 16px;
	height: 14px;
}

Jusqu'ici tout va bien puisque mon icône vient bien se placer à la droite de mes liens externes.

En couleur
C'est la que le bas blesse. L'idée serait que l'icône prenne la couleur de son parent, d'où le fill=currentColor qu'on aperçoit dans l'url du background.


Après quelques essais, je peux déjà conclure que l'attribut currentColor s'utilise dans le même contexte que inherit et ne fonctionnent que lorsque une couleur a été explicitement énoncée.
Edit (29/04/16) : Même en spécifiant explicitement une couleur au conteneur, l'héritage de la couleur n'est pas appliqué dans ce contexte.

De fait, on pourrait s'attendre à une application en cascade dans le cas qui m'occupe.
Mais il n'en est rien, la couleur du lien ne se répercute pas sur l'icône.

J'ai tenté aussi de blouser en ajoutant style="color: inherit" directement sur la balise Svg mais il n'est pas dupe et laisse l'icône en noir.

Par contre, si j'applique une couleur explicite sur la balise svg, celle-ci s'applique (par l'utilisation de style="color: red;" fill="currentColor" => applique du rouge).
Edit (29/04/16) : ce serait valable si toutes les icônes devaient avoir la même couleur.

Appliquer une couleur sur le contenu généré ne fonctionne pas non plus quelques soient les indications portées au sein de Svg.



De fait je me trouve un peu dans l'impasse. Quelqu'un saurait-il comment coloriser l'icône de façon contextuelle ou dois-je revoir le format d'intégration de celle-ci selon vous ?


Merci.
Modifié par Greg_Lumiere (06 May 2016 - 13:16)

Salut Greg,


Heu bah en css... soit direct avec style="fill:red;" en inline soit en mettant une classe sur ton élément svg.

Par contre j'aurais fait ça avec une font d'icone... une classe sur le lien et c'est réglé....

j'ai loupé un truc ? Smiley langue


[EDIT] Ah ouais j'ai carrément lu trop vite, j'ai loupé la couleur du parent.... Mille excuses [EDIT]

[EDIT2] Mais je conserve l'idée de la font d’icônes, elles prennent automatiquement la couleur du parent elles [EDIT2]
Modifié par _laurent (28 Apr 2016 - 15:59)

Il est vrai qu'une font d'icône ne m'exposerait pas à ce problème et semble une alternative envisageable.

La raison pour laquelle, pour l'instant, j'ai écarté cette possibilité est que ne disposant que de peu d'icône, je vais me retrouver avec une font qui en contient à tout casser une poignée.

Je pense d'ailleurs que ceux qui ont eu le même problème que moi ont dus ce tourner vers cette solution au vu du peu d'information que je trouve sur le sujet.


Il a tout de même une chose qui me titille dans cette histoire car mes liens ont, en amont dans le css, une couleur définie explicitement. Malgré tout la cascade ne s'applique pas quand, dans la balise Svg, je rajoute style="color:inherit;" fill="currentColor" comme si le contenu généré devenait indépendant de son pendant.
Edit (29/04/16) : Même en utilisant le même sélecteur ([target="_blank"][href^="http"]) pensant que le poids y ferait quelque-chose mais en vain.
Modifié par Greg_Lumiere (29 Apr 2016 - 12:18)

Hello,

Voici une explication sur css-tricks qui va t'aider je pense

_laurent a écrit :
Perso je trouve ca plutot normal que ca ne fonctionne pas.... c'est un svg inliné à la place d'une image dans un background de pseudo élément .... impossible d'y accéder.... j'avoue qu'a part setter le svg directement en Js j'ai du mal à voir comment faire...

Il semble bien oui. Je vais devoir m'y résoudre.

_laurent a écrit :
Pour moi c'est font-icon direct, c'est tellement simple.

Cela pourrait paraître LA solution idéale. Toutefois elle n'est pas sans inconvénient non plus en terme d'accessibilité. Les lecteurs vocaux retranscrivent les font-icons. Par exemple si tu place l'icône Twitter (je prends cet exemple car celui-là qui était prit dans l'article que j'ai consulté) et que tu la place à l'emplacement de la lettre T, le lecteur, à chaque lecture, prononcera "té".
Un problème minime je te l'accorde mais il est bon d'en avoir connaissance.

_laurent a écrit :
Sinon tu as aussi le choix d'utiliser un caractère unicode aussi simple a utiliser :

[target="_blank"][href^="http"]::after { 
  content:"\1f517";
}

J'avais remarqué dans la plage de caractère les symboles courriel et téléphone dont je me sers déjà. Toutefois cette méthode n'est pas parfaite. Je me suis aperçus que Windows XP n'utilisait pas la plage étendue ; de facto mes icônes sont représentées par un carré vide. Je ne sais pas si cela ne touche que XP.
Alors j'utilise ça pour un lien mailto et un callto donc je n'ai pas prévu de fallback pour si peu.

Si j’appliquais mon icône de cette manière :
- qu'adviendrait-il de mon design sur une config qui n'utilise pas la version étendue de Unicode ? Des carrés vides dans tous les coins.
- de plus cette icône (un carré avec un flèche à 45° qui sort de ce carré) n'existe pas en Unicode.
Edit (29/04/16) : Pour ceux que ça intéresse, en fouinant un peu plus dans la table Unicode j'ai trouvé l'icône \1F5D7 (2 fenêtres qui se superposent) qui pourrait faire office de remplaçant à mon Svg. En tout cas le sens de ce dingbat me semble explicite vu le contexte.

En tout cas merci de ta participation _laurent qui m'aide à y voir plus clair.


Mise à part les solutions évoquées en aurait-il une qui permettrait l'assertion de mon icône tout en me permettant sa personnalisation ?
L'idée d'en faire un Png en base64 m'a traversé l'esprit mais j'aurais le même problème qu'avec le svg.


C'est bête tout de même cette histoire de couleur.
Modifié par Greg_Lumiere (29 Apr 2016 - 12:22)

Salut, j'ai lu en diagonale donc ma réponse n'a peut-être rien à voir avec la question, mais pour modifier la couleur d'un svg en background, il y a la solution mask :

http://codepen.io/noahblon/post/coloring-svgs-in-css-background-images

Honnêtement tu ne t'en dépatouilleras pas, tu es dans la propriété background-image, tu n'auras aucun moyen d'hériter de la couleur de ton élément.

SVG est malin si tu utilises fill et que tu le personnalises à chaque fois, sinon c'est inutile dans ton cas.

Si la couleur doit suivre, je te conseille de mettre ton élément dans le DOM : soit ton SVG avec fill="currentColor", soit une icon-font (qui peut-être accessible du coup, si tu colles un aria-hidden="true" à ton élément).

Un petit exemple que j'utilise sur le site d'a11y.css :

<a href="https://github.com/ffoodd/a11y.css">
    sur Github
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" role="img" aria-label="(lien externe)" width="10" height="10">
        <polygon fill="currentColor" points="91.875,62 85,62 85,85 15,85 15,15 38,15 38,8.125 38,0 0,0 0,100 100,100 100,62 "></polygon>
        <polygon fill="currentColor" points="54,0 54,0.627 71.787,18.477 52.701,38 38,38 38,62 62,62 62,49.799 82.773,29.462 99.374,46 100,46 100,0 "></polygon>
    </svg>
</a>

Non seulement j'hérite toujours de la couleur, mais en plus j'ajoute l'information indispensable que ce lien va vers un site externe (dans ton cas, il faudra préciser « nouvelle fenêtre »).

Et avec une icon-font tu ferais simplement :

<a href="https://github.com/ffoodd/a11y.css" aria-label="Nouvelle fenêtre">
    on Github
    <span class="i-machin" aria-hidden="true"></span>
</a>

Avec le CSS correspond à ton icon-font sur la classe i-machin.

Tu peux pousser jusqu'aux techniques dites de remplacement d'image, en virant le aria-label et en mettant le texte dans le span :

<a href="https://github.com/ffoodd/a11y.css">
    on Github
    <span class="i-machin">Nouvelle fenêtre</span>
</a>

Il te faudrait ensuite un peu de CSS, sommairement:

.i-machin {
  display: inline-block;
  height: 10px;
  overflow: hidden;
  text-indent: 110%;
  white-space: nowrap;
  width: 10px;
}

Dans tous les cas, la seule solution envisageable (à ma connaissance) est d'avoir quelque chose dans le DOM…
Modifié par Ten (29 Apr 2016 - 08:59)

Bonjour et merci à tous de votre participation.

Il est temps pour moi de conclure sur le sujet et grace à vous j'ai pu y voir plus clair.
Je vais répondre aux derniers commentaires avant de conclure.

Manhattan a écrit :
[...] pour modifier la couleur d'un svg en background, il y a la solution mask :
http://codepen.io/noahblon/post/coloring-svgs-in-css-background-images

soit:

[target="_blank"][href^="http"]:target {
 display: inline-block;
 width: 16px;
 height: 16px;
 background: red;
 mask: url(svg_en_fichier_ou_inline) no-repeat 50% 50%; /* <= même chose avec -webkit- */
}

/* Qui devrait, théoriquement, produire une icône rouge */

Après avoir reçu la réponse de _laurent et grâce aux mots-clé qu'il avait introduit, j'ai poussé mes recherches jusqu'à tomber sur ce fragment.
Je n'ai pas réussi à faire fonctionner la méthode sur Firefox que ce soit avec un fichier externe ou interne.
J'imagine aussi le défaut que cela produirai si j'appliquais background: inherit ; mon icône serait de la couleur de fond au lieu d'avoir celle du texte.
Au regard de la compatibilité via Caniuse, cette méthode est (trop) limitée. Chrome, Safari et Opera l'acceptent avec préfixe - et encore pour Opera il faut oublier les utilisateurs mobiles, I.E. et Edge ne veulent même pas en entendre parler et Firefox m'a royalement envoyé balader. De fait ça m'embête d'implémenter ceci alors qu'elle fonctionnera dans 10 ans.

Ten a écrit :
je te conseille de mettre ton élément dans le DOM

C'est exactement pour cette raison que le svg n'est pas personnalisable en Css ; étant du contenu généré il ne fait créer aucune entrée dans le DOM.
Mon but est justement d'éviter la surcharge html ; automatiser le mécanisme sur les liens externes via le Css me paraissait performant.

Ten a écrit :
[...] accessible du coup, si tu colles un aria-hidden="true" à ton élément (l'icône)

Je me suis affranchi de cette partie en insérant le renseignement au sein de l'attribut Title. "Nouvelle fenêtre" est indiqué au survol de la souris et par les lecteurs audios.

De fait je me demande s'il vaut mieux enlever l'indication du Title pour la placer en Aria afin d'être plus proche de l'accessibilité, la mettre des 2 côtés (title+aria) ou laisser tel quel ?!

Ten a écrit :
Tu peux pousser jusqu'aux techniques dites de remplacement d'image, en virant le aria-label et en mettant le texte dans le span

Je n'ai pas bien saisi cette histoire de Span.
Le Span est-il censé faire office de fallback au Svg ?
Qu'apporte cette technique en terme d'accessibilité face à l'exemple que tu utilise juste au dessus (avec un aria-label + aria-hidden / span+masquage css) ou face à ce que je décris ci-dessus ?


Ma conclusion:
A la question " Comment faire pour qu'un Svg introduit par du contenu généré (::after/::before) puisse être personnalisé en fonction du contexte dans le quel il se trouve ? " la réponse est que c'est impossible. Soit l'icône aura toujours la même personnalisation d'appliquée soit il restera a son état initial (noir sur fond transparent).

Les alternatives viables sont :
- l'utilisation d'une font-icône qui aura l'avantage de posséder les mêmes caractéristiques (Css) que son parent mais qui implique le chargement d'un fichier supplémentaire (donc envisageable pour une collection).
- introduire l'élément Svg directement au sein du Html (en direct ou sous forme de sprite) qui possède l'atout de rendre malléable a souhait le graphique, permet de prévoir un fallback qui fonctionne au moins jusque I.E.8 et accroit l'accessibilité grâce aux nombreuses informations que Svg peut porter. Par contre cela alourdit d'autant le code Html.
- l'utilisation de caractère Unicode qui possède grosso-modo les même avantages que la font-icône en plus de celui de ne faire charger aucune ressource supplémentaire à l'utilisateur mais qui a le défaut d'afficher une horreur lorsque le caractère ne fait pas partie de la plage de caractères de l'utilisateur (par exemple Win.XP ne va pas jusque 1Fxxx alors que W7 oui - Edit (06/05/2016) : Même constat sur Androïd L).


Bonne journée.
Modifié par Greg_Lumiere (06 May 2016 - 10:32)

Hello,

Concernant title / aria-label, title doit reprendre le contenu du lien, par exemple :

<a href="https://www.github.com" title="machin sur Github (nouvelle fenêtre">
  machin sur Github
</a>

Tu peux regarder le critère 1.2.6 du RGAA pour voir quelques subtilités et plus précisément la définition du titre de lien.

Pour la technique de remplacement d'image, en réalité le texte est dans le DOM, et est décalé en CSS (il est techniquement hors de la zone d'affichage de l'élément, grâce à overflow: hidden) donc il est restitué par un lecteur d'écrans, mais pas visible. Et on se sert de background ou d'un pseudo-élément pour afficher une icône à la place.



Mais vraiment, alourdir le HTML n'est pas grave, et encore moins si ton SVG est répété plusieurs fois (les compressions telles que Gzip sont de plus en plus efficaces si il y a beaucoup de répétitions).

Si le svg n'est pas dans le html ou une balise de type object(et lié a un fichier css) tu ne pourras rien y faire.

L'astuce pourrait-être, si tu tiens à la technique du pseudo, de jouer avec les 2 pseudos et 2 fichier svg (l'un lié a un fichier css ou avec des style différents) et de modifier l'opacité pour éventuellement avoir un fondu de l'un vers l'autre.

autres possibilités à tatons et moins universelles, se servir de mix-blend-mode(multiply ?) ou de filter(hue-rotate() ?) pour modifier le rendu visuel du pseudo au hover.

petit dessin (FF) de l'idée/pistes http://codepen.io/gc-nomade/pen/BKqbvG
Modifié par gcyrillus (29 Apr 2016 - 21:52)

gcyrillus a écrit :
Si le svg n'est pas dans le html ou une balise de type object(et lié a un fichier css) tu ne pourras rien y faire.

L'astuce pourrait-être, si tu tiens à la technique du pseudo, de jouer avec les 2 pseudos et 2 fichier svg (l'un lié a un fichier css ou avec des style différents) et de modifier l'opacité pour éventuellement avoir un fondu de l'un vers l'autre.

autres possibilités à tatons et moins universelles, se servir de mix-blend-mode(multiply ?) ou de filter(hue-rotate() ?) pour modifier le rendu visuel du pseudo au hover.

petit dessin (FF) de l'idée/pistes http://codepen.io/gc-nomade/pen/BKqbvG

Merci pour ces pistes que je n'ai pas manqué d'étudier.
Toutefois ces techniques ne sont pas exemptes de défaut. Mes conclusions sont basées sur des essais sur Firefox.

Méthode du du filtre hua-rotate:
Le rendu est tout bonnement exécrable. Au survol et durant toute la transition s'opère un effet de flou. Fortement en contradiction avec le but même de l'objet qui est d'apporter un élément visuel distinctif suivant critères.

Méthode du mix-blend-mode:
Sur le coup je dois dire que j'ai été blufflé dans la mesure ou l'effet est parfaitement rendu. Néanmoins les faibles variations offertes par la propriété ne permettent pas de basculer entre différents rendus acceptables. L'attribut multiply donne l'effet d'un lien focusé, une distinction en survolé semble difficile à prévoir en sus.

Des 3 méthodes:
Des 3 méthodes, je ne peux en retenir aucune. La technique consistant à remplacer un svg par un autre implique de connaitre à l'avance la couleur de l'élément dont il dépend ce qui reviendrait à devoir prévoir tous les contextes possibles. A ce compte, on ne peut parler d'automatisation car ça en revient quasiment à du cas particulier.
Aucune de ces méthodes ne permet réellement de s'adapter de manière automatique au contexte dans lequel elles sont placées.

gcyrillus a écrit :
si tu tiens à la technique du pseudo (ndlr: pseudo-élément)

Je n'y tiens pas tant, j'y voyais ce qui serait peut-être une opportunité d'automatiser un processus.


La solution retenue au prochain message.
Modifié par Greg_Lumiere (06 May 2016 - 10:24)

<= Conclusions =>

Problématique: Automatiser l'affichage d'un élément visuel distinctif dont les propriétés de personnalisation tiendront compte du contexte dans lequel il sera placé et porté sur les liens qui pointent en dehors du domaine.

Champs d'application: général

Contraintes:
Les contraintes générales nous sont implicitement données par l’énoncé de la problématique.
- Traiter l'intégralité du site
- Distinguer les liens dans et hors domaine
- Personnaliser l'affichage en fonction du contexte
- Automatiser l'ensemble des tâches


Cahier des charges:

* La distinction visuel sera faite sous forme iconographique ; elle devra pouvoir être réutilisable en grand nombre sans pour autant surcharger le code source (dans la limite du raisonnable et du possible en somme) ; ses dimensions dépendront du contexte donc elle devra être redimensionnable sans perte de qualité ; elle devra être facilement remplaçable ; leur densité par page et leur variété ne devra pas dépasser un certain seuil subjectivement défini.
=> Le choix se porte sur le format Svg utilisé sous forme de sprite
=> La personnalisation se fera en Css par le bénéfice de l'effet de cascade

* Les liens doivent être repérés selon des caractéristiques qui leur sont propres et uniques ; Tout ajout ne doit pas entrainer de rupture graphique.
=> Les liens seront repérés suivant 2 éléments:
- l'attribut href commence (au sens strict) par "http" et
- présence de l'attribut "target="_blank"
=> Le svg sera placé relativement à son parent.
=> Le svg existera sous tous les états d'un lien (point de vue encombrement et position)

* Traiter l'intégralité du site implique de prévoir le traitement dans une partie commune du site. A voir suivant la structure et le processus d'automatisation choisis.

* L'automatisation de la tâche est la partie la plus difficile à appréhender. Le Css, fût pour moi de prime abord l'idée la plus efficace et la plus simple à mettre en place mais ne répondait qu'à ce critère : automatiser, laissant de côté tout autre aspect du sujet.
Certains aficionados suggèreront de passer par une sur-couche JavaScript, ils prétendraient qu'en 3 coups de cuillère à pot ce serait fait et feraient sûrement preuve de beaucoup d'imagination pour tenter de me convaincre. Toutefois ceci ne reste pas exempt de défaut et je préfère autant que faire se peut éviter l'utilisation d'une sur-couche côté client alors qu'il existe peut-être des solutions dans les langages que de tout façon j'utilise déjà.

Si le sujet de l'automatisation de la tâche ne peut-être effectuée côté client, l'idée m'est venue qu'il devrait en être autrement côté serveur en Php.
Après y avoir quelque peu cogité, je vois 2 possibilités. La première, peu élégante et brutale est d'appliquer l'insertion de l'icône en analysant le tampon de sortie des données par l'utilisation d'une regexp.
La seconde demande à voir le problème sous un angle encore plus large. L'idée serait que chaque lien du site soit généré en Php. Suivant ses caractéristiques, php construit la balise avec tous les éléments dont requis (dont notre fameuse icône).
Là où je n'ai pas encore trouvé de réponse est sur la manière de construire ce "générateur de liens".
=> De prime abord l'intégration sera faite à la main, le processus d'automatisation fera parti d'un prochain travail : "construction et gestion des liens"



==> Mise en application:

1) Créer / modifier le sprite svg (filename: sprite.svg)

<!-->Un sprite svg regroupe les définitions des différents modèles graphiques<-->

<svg display="none" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-->On place le svg en display:none car ce fichier sera appelé à partir du body ; nous ne souhaitons pas que ces définitions apparaissent<-->

 <defs>
  <symbol id="ico1" viewBox="0 0 18 18">
<!-->Préférer l'usage d'une viewBox au lieu de width/height permet de prendre le contrôle des dimensions en css<-->
   <path d="xxx"/>
  </symbol>

  <symbol id="ico2" viewbox="0 0 18 18">
   <path d="yyy"/>
  </symbol>
 </defs>
</svg>

2) Insérer les définitions svg (sprite.svg) au sein des pages (filename: ma_page.php)

</head>
<body>
  <?php include('sprite.svg');?>
<!--> Ici vous déclarez les définitions, en aucun cas vous ne les affichez <-->

<!--> ici la suite de votre code <-->
</body>

3) Personnalisation de base en Css (filename: style.css)

svg {
  fill: currentColor; /* cette propriété permet l'application de l'effet de cascade sur la couleur du svg ; valable pour svg monochromes */
}

/* NE PAS OUBLIER:

   de définir la taille de chacun des svg à utiliser soit de manière globale s'ils ont tous la même taille soit en ciblant leur parent.

  la personnalisation de la taille ne peut se faire sur l'identifiant de l'icône (par exemple #ico1 {...} ne fonctionne pas.
*/

4) Afficher l'icône à un endroit voulu (exemple.php)

<style>
<!-->Je place le style ici pour l'exemple, préférez l'inclusion dans le fichier css commun<-->

a[href^="http"][target="_blank"] svg {
 width: 1.5rem;
 height: 1.5rem;
 etc: etc;/* svg accepte une grande partie des propriétés Css (transform, transition, shadows... */
}
</style>
</head>
<body>
 <?php include('sprite.svg');?>

 <a href="http:///" target="_blank">un lien
  <svg><!-->C'est l'inclusion de cet svg qui mériterait d'être automatisée<-->
   <switch>
    <use xlink:href="#Ico1"/>
    <foreignObject width="0" height="0">
     <span>texte de remplacement si nécessaire</span>
    </foreignObject>
   </switch>
  </svg>
 </a>

</body>

Et vous, que pensez-vous de cette méthode ?
Modifié par Greg_Lumiere (09 May 2016 - 13:47)