Svg, favicons et toutes les choses amusantes que nous pouvons faire avec eux

Les icônes de site Web (favcons) sont de petites icônes affichées dans les onglets du navigateur, qui facilitent les utilisateurs pour identifier rapidement les sites Web entre de nombreux signets et onglets. Ils sont un design intelligent dans l'histoire d'Internet et ont des fonctionnalités incroyables.

Une nouvelle fonctionnalité consiste à utiliser SVG comme icône de site Web. La plupart des navigateurs modernes prennent en charge cette fonctionnalité et cette prise en charge augmente.

Voici le code pour ajouter l'icône du site Web au site Web. Placez-le sur le site Web partie:

<link href="/favicon.ico" rel="icon" sizes="any">
<link href="/favicon.svg" rel="icon" type="image/svg xml">
<link href="/manifest.webmanifest" rel="manifest">

Et ajouter le code suivant au manifeste de l'application Web du site Web:

 {
  "Icônes": [
    {"src": "/icon-192.png", "type": "image / png", "tailles": "192x192"},
    {"src": "/icon-512.png", "type": "image / png", "tailles": "512x512"}
  ]]
}

Les navigateurs qui prennent en charge les icônes du site Web SVG l'emporteront sur le premier<link> Déclaration des éléments et utilisez le second<link> élément. Les navigateurs qui ne prennent pas en charge les icônes du site Web SVG mais qui prennent en charge les manifestes d'applications Web utiliseront des images de résolution plus élevée. Tous les autres navigateurs se replieront à l'utilisation du fichier favicon.ico . Cela garantit que tous les navigateurs qui prennent en charge les icônes de site Web ont une bonne expérience.

Vous pouvez également remarquer la valeur d'attribut alternative déclarée par rel dans la deuxième ligne. Cet programme programmatisé transmet une icône de site Web à l'aide du format de fichier .ico comme un affichage alternatif.

Après l'icône du site Web est une ligne de code qui charge une autre image SVG nommée safari-pinned-tab.svg . Il s'agit de prendre en charge la fonction de balise fixe de Safari, qui existait avant que les autres navigateurs prennent en charge les icônes de site Web SVG. Vous pouvez également ajouter des fichiers supplémentaires ici pour améliorer les sites Web pour différentes applications et services, ce qui sera couvert plus en détail plus tard.

Voici plus de détails sur le niveau de support actuel de l'icône du site Web de SVG:

Ce navigateur prend en charge les données de Caniuse, qui contient plus de détails. Le nombre indique que le navigateur prend en charge cette fonctionnalité dans cette version et plus tard.

Bureau

Mobile / tablette

Pourquoi choisir SVG?

Vous vous demandez peut-être pourquoi vous avez besoin de SVG. Le format de fichier .ico existe depuis longtemps et peut prendre en charge les images avec une taille maximale de 256 × 256 pixels. Voici trois réponses:

Facile à créer

La création de fichiers .ico est gênante. Ce fichier est un format propriétaire utilisé par Microsoft, ce qui signifie que vous avez besoin d'outils spécialisés pour les créer. SVG est une norme ouverte, ce qui signifie que vous pouvez les utiliser sans outils ou verrouillage de plate-forme supplémentaires.

Développement futur

Écran rétinien? 5K? 6K? Lorsque nous utilisons des fichiers SVG qui ne sont pas liés à la résolution comme icônes de site Web, nous pouvons garantir que nos icônes de site Web seront claires et nettes sur les appareils futurs, quelle que soit la taille de leur affichage.

performance

Les SVG sont généralement de très petits fichiers, en particulier par rapport à leurs homologues d'image raster - surtout si vous les optimisez à l'avance. En utilisant seulement des icônes de site Web de 16 × 16 pixels comme solution de sauvegarde qui ne prend pas en charge les navigateurs SVG, nous fournissons une combinaison de support élevé et de tailles de fichiers plus petites.

Cela semble un peu extrême, mais en ce qui concerne les performances du réseau, chaque octet est important!

Compétence

Un autre avantage de SVG est que nous pouvons intégrer CSS directement à l'intérieur. Cela signifie que nous pouvons les ajuster dynamiquement en utilisant JavaScript, à condition que SVG soit déclaré en ligne, plutôt que d'utiliser<img alt="Svg, favicons et toutes les choses amusantes que nous pouvons faire avec eux" > Élément intégré.

<svg viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <path fill:></path></svg>

Puisque l'icône du site Web SVG est utilisée<link> Les éléments sont intégrés, ils ne peuvent donc pas être modifiés à l'aide de JavaScript. Cependant, nous pouvons utiliser des requêtes Emoji et Media.

Emoji

Lea Verou a une idée de génie d'être dans SVG<text></text> Les emojis sont utilisés dans l'élément pour créer une icône de site Web rapide avec un fond transparent qui est également clair dans les petites tailles.

En réponse, Chris Coyier a fait une petite démo soignée qui vous permet d'essayer le concept.

Support en mode noir

Thomas Steiner et Mathias Bynens ont tous deux découvert indépendamment l'idée que l'utilisation de requêtes médiatiques prefers-color-scheme pour fournir un support en mode sombre. Ce travail est basé sur l'exploration par Jake Archibald des requêtes SVG et des médias.

<svg height="128" width="128" xmlns="http://www.w3.org/2000/svg">
  <path fill: dark path d="M111.904 52.937a1.95 1.95 0 00-1.555-1.314l-30.835-4.502-13.786-28.136c-.653-1.313-2.803-1.313-3.456 0L48.486 47.121l-30.835 4.502a1.95 1.95 0 00-1.555 1.314 1.952 1.952 0 00.48 1.99l22.33 21.894-5.28 30.918c-.115.715.173 1.45.768 1.894a1.904 1.904 0 002.016.135L64 95.178l27.59 14.59c.269.155.576.232.883.232a1.98 1.98 0 001.133-.367 1.974 1.974 0 00.768-1.894l-5.28-30.918 22.33-21.893c.518-.522.71-1.276.48-1.99z" fill-rule="nonzero"></path>
</svg>

Pour les navigateurs pris en charge, ce code signifie que notre icône de site Web Star SVG changera sa couleur de remplissage du noir au blanc lorsque le mode Dark est activé. Très intelligent!

Autres demandes médiatiques

Le support en mode sombre me rappelle: si SVG peut prendre en charge prefers-color-scheme , que pouvons-nous faire d'autre avec eux? Bien que le soutien aux requêtes médiatiques de niveau 5 puisse ne pas encore exister, voici quelques idées à considérer:

• Utilisez des couleurs d'icône de site Web light-level pour désaturer dans des environnements à basse lumière.
• Utilisez inverted-colors en "Flip" pour inverser la couleur pour conserver la marque, ou assurez-vous que les icônes de site Web photo-réaliste apparaissent comme prévu.
• Utilisez prefers-reduced-motion pour supprimer l'animation de l'icône du site Web. Idéalement, nous devons éviter d'animer d'abord les icônes du site Web, car elles peuvent être une cause de trouble d'hyperactivité avec déficit de l'attention et d'autres handicaps connexes.
• Utilisez des requêtes multimédias en forced-colors et / ou en mode à contraste élevé pour vous assurer que les icônes du site Web conservent des effets visuels dans des environnements de couleurs à contraste élevé! N'oubliez pas d'utiliser des mots clés de couleur pour maintenir la dynamique de couleur des icônes de votre site Web!

Rester clair

Un autre aspect important d'une bonne conception d'icônes de site Web est de s'assurer qu'ils ont l'air bien dans la zone de balise du petit navigateur. Le secret est d'aligner le chemin de l'image vectorielle avec la grille de pixels, un guide utilisé par les ordinateurs pour convertir les mathématiques SVG en bitmaps que nous voyons à l'écran.

Voici un exemple simplifié en utilisant des formes carrées:

L'effet anti-aliasing que les ordinateurs utilisent pour lisser les formes n'est pas nécessaire lorsque les points vectoriels du carré sont alignés avec la grille de pixels du tableau art. Lorsque les points vectoriels ne sont pas alignés, nous obtenons l'effet de "frottis":

Des programmes d'édition vectoriels tels que FIGMA, Sketch, Inkscape ou Illustrator peuvent être utilisés pour ajuster la position des points vectoriels sur la grille de pixel. Ces programmes exportent également SVG. Pour ajuster la position d'un point vectoriel, utilisez l'outil de sélection exact pour sélectionner chaque nœud et faites-le glisser vers la position souhaitée.

Pour bien paraître à une si petite taille, certaines icônes plus complexes peuvent devoir être simplifiées. Si vous cherchez un bon guide de démarrage à cet égard, Jeremy Frank a écrit un très bon article en deux parties sur Vidget.

Faire une étape supplémentaire

En plus des icônes de site Web, il existe de nombreuses façons différentes (malheureusement propriétaires) d'utiliser des icônes pour améliorer leur expérience. Il s'agit notamment de l'icône TAG Correct de Safari susmentionnée, de l'expansion de l'application de chat, des carreaux de menu Windows fixes, de l'aperçu des médias sociaux et du lanceur d'écran d'accueil.

Si vous cherchez un excellent endroit pour commencer à utiliser ces améliorations, j'aime vraiment RealFavicongenerator.net.

Une chose intéressante à propos de l'histoire des icônes de site Web: Internet Explorer est le premier navigateur à les soutenir, et ils ont été ajoutés sournoisement à la dernière minute par un développeur nommé Bharat Shyam:

L'histoire est comme ça, tard dans la nuit, Shyam développe sa nouvelle fonctionnalité d'icône de site Web. Il a appelé le chef de projet junior Ray Sun pour jeter un œil.

Shyam a commenté: "C'est bien, non? Enregistrez-vous?" Le soleil n'y a pas beaucoup pensé. Cette fonctionnalité est cool et donnera évidemment un meilleur avantage. Il a donc dit à Shyam de continuer à l'ajouter. Voilà, l'icône du site Web va dans Internet Explorer 5, qui deviendra l'une des plus grandes versions de navigateur du Web.

Le lendemain, Sun a été grondé par le directeur pour avoir permis à la fonctionnalité de passer si rapidement. Il s'avère que Shyam a attendu délibérément jusqu'à plus tard dans la journée, et il savait qu'un chef de projet inexpérimenté le laisserait passer. Mais à ce moment-là, le code avait été fusionné. Soit dit en passant, vous serez surpris du nombre de fonctionnalités relativement importantes de navigateur se faufiler dans la version comme celle-ci.

Extrait de la façon dont nous obtenons des icônes de site Web par Jay Hoffmann

Je suis heureux de voir la plate-forme prêter une certaine attention à l'icône du site Web. Ils ont longtemps été l'un de mes minuscules détails de conception préférés et je suis heureux qu'ils soient devenus plus sensibles à ce que les utilisateurs veulent. Si vous avez le temps, pourquoi ne pas ajouter l'icône du site Web SVG à votre projet comme l'a fait Bharat Shyam en 1999?

¹ Je ne peux pas déterminer si Safari implémentera le support d'icône du site Web SVG, mais je veux qu'ils le fassent. Quelqu'un a-t-il entendu parler de quelque chose?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!