SVG, Favicons und all die lustigen Dinge, die wir mit ihnen machen können

Website -Symbole (Favicons) sind kleine Symbole, die auf den Registerkarten von Browser angezeigt werden, um den Benutzern die schneller Identifizierung von Websites zwischen vielen Lesezeichen und Registerkarten zu ermöglichen. Sie sind ein cleveres Design in der Geschichte des Internets und haben einige erstaunliche Funktionen.

Eine neue Funktion besteht darin, SVG als Website -Symbol zu verwenden. Die meisten modernen Browser unterstützen diese Funktion und die Unterstützung nimmt zu.

Hier ist der Code, mit dem das Website -Symbol zur Website hinzugefügt wird. Platzieren Sie es auf der Website Teil:

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

Fügen Sie den folgenden Code zum Webanwendungsmanifest der Website hinzu:

 {
  "Ikonen": [
    {"src": "/icon-192.png", "Typ": "Image/png", "Größen": "192x192"},,
    {"src": "/icon-512.png", "Typ": "Image/png", "Größen": "512x512"}
  ]
}

Browser, die SVG -Website -Symbole unterstützen<link> Elementerklärung und verwenden Sie die zweite<link> Element. Browser, die SVG -Website -Symbole nicht unterstützen, aber Webanwendungen unterstützen, verwenden Bilder mit höherer Auflösung. Alle anderen Browser fallen zurück, um die Datei favicon.ico zu verwenden. Dies stellt sicher, dass alle Browser, die Website -Symbole unterstützen, eine gute Erfahrung haben.

Sie können auch den von rel in der zweiten Zeile deklarierten alternativen Attributwert bemerken. Dies vermittelt programmgesteuert ein Website -Symbol mit dem .ico -Dateiformat als alternative Anzeige.

Nach dem Website-Symbol befindet sich eine Codezeile, die ein weiteres SVG-Bild mit dem Namen safari-pinned-tab.svg lädt. Dies soll die feste Tag -Funktion von Safari unterstützen, die vor anderen Browsern die SVG -Website -Symbole unterstützte. Sie können hier auch zusätzliche Dateien hinzufügen, um Websites für verschiedene Anwendungen und Dienste zu verbessern, die später ausführlicher behandelt werden.

Hier finden Sie weitere Details zum aktuellen Support -Level des SVG -Website -Symbols:

Dieser Browser unterstützt Daten von Caniuse, die weitere Details enthält. Die Nummer zeigt an, dass der Browser diese Funktion in dieser Version und später unterstützt.

Desktop

Mobile/Tablet

Warum SVG wählen?

Möglicherweise fragen Sie sich, warum Sie SVG brauchen. Das .ico -Dateiformat gibt es schon lange und kann Bilder mit einer maximalen Größe von 256 × 256 Pixel unterstützen. Hier sind drei Antworten:

Leicht zu erstellen

Das Erstellen von .ico -Dateien ist problematisch. Diese Datei ist ein proprietäres Format, das von Microsoft verwendet wird. Dies bedeutet, dass Sie spezielle Tools benötigen, um sie zu erstellen. SVG ist ein offener Standard, was bedeutet, dass Sie sie ohne zusätzliche Tools oder Plattformsperrungen verwenden können.

Zukünftige Entwicklung

Netzhautbildschirm? 5k? 6k? Wenn wir SVG -Dateien verwenden, die nicht mit der Lösung als Website -Symbole zusammenhängen, können wir garantieren, dass unsere Website -Symbole auf zukünftigen Geräten klar und scharf aussehen, unabhängig davon, wie groß ihre Anzeige ist.

Leistung

SVGs sind in der Regel sehr kleine Dateien, insbesondere im Vergleich zu ihren Raster -Image -Gegenstücken - insbesondere wenn Sie sie im Voraus optimieren. Durch die Verwendung von nur 16 × 16 -Pixel -Website -Symbolen als Sicherungslösung, die SVG -Browser nicht unterstützt, bieten wir eine Kombination aus hoher Unterstützung und kleineren Dateigrößen.

Dies scheint ein bisschen extrem zu sein, aber wenn es um Netzwerkleistung geht, ist jedes Byte wichtig!

Fähigkeit

Ein weiterer Vorteil von SVG besteht darin, dass wir CSS direkt darin einbetten können. Dies bedeutet<img alt="SVG, Favicons und all die lustigen Dinge, die wir mit ihnen machen können" > Element eingebettet.

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

Da das SVG -Website -Symbol verwendet wird<link> Elemente sind eingebettet, sodass sie nicht mit JavaScript geändert werden können. Wir können jedoch Emoji- und Medienanfragen verwenden.

Emoji

Lea Verou hat eine geniale Idee, in SVG zu sein<text></text> Emojis werden im Element verwendet, um ein schnelles Website -Symbol mit einem transparenten Hintergrund zu erstellen, der auch in kleinen Größen klar ist.

Als Reaktion darauf machte Chris Coyier eine nette kleine Demo, mit der Sie das Konzept ausprobieren können.

Dunkelmodusunterstützung

Sowohl Thomas Steiner als auch Mathias Bynens entdeckten unabhängig voneinander die Idee, dass die Verwendung von Medienabfragen prefers-color-scheme für die Unterstützung von dunklen Modus die Verwendung von Dark-Modus-Unterstützung. Diese Arbeit basiert auf Jake Archibalds Erkundung von SVG- und Medienfragen.

<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>

Für unterstützte Browser bedeutet dieser Code, dass unser Star SVG -Website -Symbol seine Füllfarbe von Schwarz nach Weiß ändert, wenn der Dunkelmodus aktiviert ist. Sehr klug!

Andere Medienanfragen

Die Unterstützung des Dark-Modus erinnert mich daran: Wenn SVG prefers-color-scheme unterstützen kann, was können wir dann mit ihnen noch tun? Während die Unterstützung für Medienabfragen der Stufe 5 noch nicht vorhanden ist, sollten Sie einige Ideen berücksichtigen:

• Verwenden Sie light-level , um die Icon-Farben der Website in schlechten Lichtverhältnissen zu entlasten.
• Verwenden Sie inverted-colors , um die Farbe umzukehren, um die Marke zu halten, oder stellen Sie sicher, dass die foto-realistischen Website-Symbole wie erwartet erscheinen.
• Verwenden Sie prefers-reduced-motion um die Website-Symbolanimation zu löschen. Im Idealfall sollten wir zuerst die Animes -Website -Symbole vermeiden, da sie eine Ursache für Aufmerksamkeitsdefizit -Hyperaktivitätsstörung und andere damit verbundene Behinderungen sein können.
• Verwenden Sie forced-colors und/oder Windows High Contrast Mode Medienabfragen, um sicherzustellen, dass Website-Symbole visuelle Effekte in Farbumgebungen mit hoher Kontrast beibehalten! Denken Sie daran, Farbschlüsselwörter zu verwenden, um die Farbdynamik Ihrer Website -Symbole zu halten!

Bleib klar

Ein weiterer wichtiger Aspekt eines guten Website -Symboldesigns besteht darin, sicherzustellen, dass sie im kleinen Browser -Tag -Bereich gut aussehen. Das Geheimnis dazu besteht darin, den Pfad des Vektorbildes mit dem Pixelgitter auszurichten, eine Anleitung, die von Computern verwendet wird, um die SVG -Mathematik in Bitmaps umzuwandeln, die wir auf dem Bildschirm sehen.

Hier ist ein vereinfachtes Beispiel mit quadratischen Formen:

Der Anti-Aliasing-Effekt, den Computer verwenden, um die Formen zu glätten, wird nicht benötigt, wenn die Vektorpunkte des Quadrats mit dem Pixelgitter der Kunstkarte ausgerichtet sind. Wenn die Vektorpunkte nicht ausgerichtet sind, erhalten wir den "Abstrich" -Effekt:

Vektorbearbeitungsprogramme wie Figma, Skizze, Inkscape oder Illustrator können verwendet werden, um die Position der Vektorpunkte am Pixelgitter anzupassen. Diese Programme exportieren auch SVG. Um die Position eines Vektorpunkts anzupassen, wählen Sie das genaue Auswahlwerkzeug, um jeden Knoten auszuwählen und in die gewünschte Position zu ziehen.

Um in einer so kleinen Größe gut auszusehen, müssen möglicherweise einige komplexere Symbole vereinfacht werden. Wenn Sie diesbezüglich einen guten Starterführer suchen, schrieb Jeremy Frank einen sehr guten zweiteiligen Artikel über Vidget.

Einen zusätzlichen Schritt machen

Zusätzlich zu Website -Icons gibt es viele verschiedene (leider proprietäre) Möglichkeiten, Symbole zu verwenden, um ihre Erfahrungen zu verbessern. Dazu gehören die oben erwähnte Safari -Symbol für das Tag -Tag, die Chat -App -Erweiterung, das Fixed Windows -Startmenü, die Vorschau auf soziale Medien und Startbildschirm -Launcher.

Wenn Sie nach einem großartigen Ort suchen, um diese Verbesserungen zu verwenden, mag ich RealFavicongenerator.net sehr.

Eine interessante Sache über die Geschichte der Website -Ikonen: Internet Explorer ist der erste Browser, der sie unterstützt, und sie wurden in letzter Minute von einem Entwickler namens Bharat Shyam in der letzten Minute hinzugefügt:

Die Geschichte ist so, spät in der Nacht entwickelt Shyam seine neue Website -Ikone -Funktion. Er rief Junior Project Manager Ray Sun an, um einen Blick darauf zu werfen.

Shyam kommentierte: "Das ist gut, oder? Check -in?" Und forderte die Erlaubnis, Code in der Internet Explorer -Codebasis zu unterschreiben, damit sie in der nächsten Version veröffentlicht werden kann. Sun hat nicht viel darüber nachgedacht. Diese Funktion ist cool und bietet dem IE offensichtlich einen besseren Vorteil. Also sagte er Shyam, er solle es weiter hinzufügen. Das ist es, das Website -Symbol geht in Internet Explorer 5, das zu einer der größten Browserversionen des Webs aller Zeiten wird.

Am nächsten Tag wurde Sun vom Manager beschimpft, weil die Funktion so schnell passieren konnte. Es stellte sich heraus, dass Shyam bis später an diesem Tag absichtlich wartete und er wusste, dass ein unerfahrener Projektmanager ihn passieren ließ. Aber bis dahin war der Code zusammengeführt worden. Übrigens werden Sie überrascht sein, wie viele relativ große Browser -Funktionen in die Version wie diese einschalten.

Auszug aus der Art und Weise, wie wir Website -Symbole von Jay Hoffmann erhalten

Ich bin froh zu sehen, dass die Plattform dem Website -Symbol aufmerksam macht. Sie sind lange Zeit eines meiner Lieblings -winzigen Designdetails und ich bin froh, dass sie mehr auf das reagieren, was Benutzer wollen. Wenn Sie Zeit haben, sollten Sie Ihr Projekt als Bharat Shyam 1999 das SVG -Website -Symbol hinzufügen?

¹ Ich kann nicht feststellen, ob Safari SVG -Website -Icon -Unterstützung implementiert, aber ich möchte, dass sie dies tun. Hat jemand von irgendetwas gehört?

Das obige ist der detaillierte Inhalt vonSVG, Favicons und all die lustigen Dinge, die wir mit ihnen machen können. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!