Histoire — documentation
Mettre l'icône exacte du produit dans la doc, bien nette
« Ma doc disait aux gens de “cliquer sur l'icône d'export”, et l'icône que j'avais collée à côté de cette phrase était un rognage flou de 18 pixels tiré d'une capture. Sur un écran retina, ça ressemblait à une erreur. Je voulais le vrai glyphe — celui exact du produit — posé en ligne dans la page. »
Le contexte
Des instructions ne valent que ce que vaut l'icône à côté
Ce qui ne marchait pas
« Découper des icônes dans des captures est un combat perdu d'avance. C'est du raster, donc ça floute dès qu'on zoome ou qu'on lit sur un écran haute densité. Ça traîne une teinte de fond venue de l'endroit du rognage. Et ça se périme : le produit livre une nouvelle icône, ma doc montre encore celle du trimestre dernier. Je pouvais demander des exports au design, mais c'est une file d'attente, et j'écrivais aujourd'hui. »
Le clic droit n'aidait pas davantage : les glyphes étaient du balisage en ligne sans aucune URL d'image derrière. Rien à enregistrer.
Le changement
Tomás a ouvert le produit, cliqué sur SVG Downloader, et feuilleté les aperçus isolés jusqu'au glyphe exact de la barre d'outils dont il avait besoin. Chaque icône s'affiche seule, hors de l'habillage chargé, sans ambiguïté sur celle qu'on attrape. Un nom de fichier — export.svg — un clic, terminé.
« En ligne dans MDX, l'icône est nette à tout zoom, elle hérite de la couleur du texte de la doc via currentColor et se pose donc dans une phrase comme un mot, et c'est le glyphe réel du produit — pas mon approximation. Quand l'icône d'export du produit change, je la reprends en dix secondes. Le fichier est arrivé avec son xmlns réparé, il a donc simplement marché dans le build. »
« La doc ressemble enfin au produit plutôt qu'à une photocopie de celui-ci. Et j'ai arrêté d'attendre une file d'export pour écrire une phrase. »
— Tomás Herrera, rédacteur techniqueLe résultat
- Netle SVG en ligne reste net à tout zoom et sur tout écran
- 10 spour reprendre une icône quand le produit la met à jour
- currentColorles glyphes héritent de la couleur du texte de la doc, en ligne dans une phrase
- Ce qui a fait le travail
- La détection du SVG en ligne plus l'aperçu isolé pour choisir le glyphe exact, enregistré sous un nom choisi. Voir la méthode universelle.
- Pourquoi l'icône paraissait noire
- Beaucoup de glyphes d'interface utilisent
currentColoret s'enregistrent sans couleur inscrite — ce qui est exactement ce qu'on veut en ligne dans du texte. Dans la doc, ils prennent automatiquement la couleur du paragraphe. - Une note sur les droits
- Documenter un produit sur lequel vous êtes autorisé à écrire ne pose pas de problème ; vérifiez les licences avant de réutiliser les icônes d'une autre société hors de ce contexte.
Histoire composite — un déroulé illustratif mais représentatif. La personne et le produit sont fictifs ; le comportement de l'extension décrit ici est réel. Plus d'histoires →
Une doc qui colle au produit
Attrapez le glyphe exact en SVG en ligne — net à tout zoom, conscient de la couleur, toujours à jour.