Start Webentwicklung Archiv nach Kategorie "HTML"

Kategorie: HTML

[SVG] Transparentes SVG-Icon

Um SVG-Icons transparent anzuzeigen, muss der Abschnitt rect angepasst werden. Wenn das rect keine Füllfarbe hat, behandelt der SVG‑Renderer das rect ohne "fill" als schwarz gefüllt, also nicht transparent.

Dadurch verdeckt es den Hintergrund. Durch das explizite Setzen von rect mit einem fill="none" wird das SVG-Icon vollständig transparent, nur der feste Inhalt (Beispiel-Symbol) bleibt sichtbar.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
    <defs>
        <linearGradient id="grad-light" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" stop-color="#38bdf8"/>
            <stop offset="100%" stop-color="#3b82f6"/>
        </linearGradient>
        <linearGradient id="grad-dark" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" stop-color="#7dd3fc"/>
            <stop offset="100%" stop-color="#60a5fa"/>
        </linearGradient>
    </defs>

    <!-- Transparenter Hintergrund durch fill="none" -->
    <rect class="bg" width="64" height="64" rx="9" fill="none"/>
    <text class="text" x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-size="45" font-family="sans-serif" font-weight="700" dy="0.087">&#x1f3a7;</text>
</svg>

[HTML] Favicon auf einer Webseite einbinden

Favicons

Ein Favicon unterstützt die Wiedererkennung einer Website und erfüllt dabei aber wichtige Funktionen für Orientierung, Markenwirkung und Professionalität.
Favicons werden in Browser‑Tabs, Lesezeichen, der Adressleiste und im Browserverlauf angezeigt. Moderne Suchmaschinen zeigen Favicons auch in den mobilen Suchergebnissen an.
Grundsätzlich werden die Favicons im head-Teil der HTML-Seite eingebunden. Hierbei können verschiedene Typen von Favicons (Größen, Dateiformate) für unterschiedliche Plattformen berücksichtigt werden. Für Progressive Web App (PWA) gibt es noch eine modernere Form über die Einbindung einer manifest.json.

Einbindung

<!DOCTYPE html>
<html lang="de">
	<head>
		<meta charset="UTF-8"/>
		<title>Page title</title>
		<link rel="icon" href="./favicon.ico"/>
		<link rel="icon" type="image/png" sizes="96x96" href="./favicon-96x96.png"/>
		<link rel="icon" type="image/svg+xml" sizes="any" href="./favicon.svg"/>
		<link rel="apple-touch-icon" href="./apple-touch-icon.png"/>
		<link rel="manifest" href="./manifest.json"/>
	</head>
	<body>
	</body>
</html>

Links

[HTML] Manifest (manifest.json) zu einer Webseite hinzufügen

Progressive Web App (PWA)

Für die Nutzung von PWA‑Funktionen für eine Webseite ist ein Manifest in Form einer manifest.json sinnvoll. Die manifest.json teilt dem Browser mit, wie sich Ihre App verhalten soll, wenn sie auf einem Endgerät ausgeführt wird.

Beispiel

{
  "name": "Meine Webseite",
  "short_name": "MWS",
  "description": "Tolle Sachen zum Lesen",
  "start_url": ".",
  "display": "browser",
  "orientation": "any",
  "icons": [
    {
      "src": "/favicon.svg",
      "sizes": "any",
      "type": "image/svg+xml",
      "purpose": "any"
    },
    {
      "src": "/icon-192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/icon-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ],
  "categories": ["productivity", "utilities", "social"]
}

Tipps

  • Die Parameter sollten sorgfältig gesetzt werden, insbesondere der Parameter start_url. Gängige Werte sind z.B.: nicht angeben, "." oder "/"

Einbindung

Die manifest.json wird im der HTML-Seite eingebunden.

<!DOCTYPE html>
<html lang="de">
	<head>
		<meta charset="UTF-8"/>
		<title>Page title</title>
		<link rel="manifest" href="./manifest.json"/>
	</head>
	<body>
	</body>
</html>

Links

[HTML] Unicode‑Emojis in Texten verwenden

Einfügen von Emojis

Vorteile

  • schnell und ohne Bibliothek-Abhängigkeiten ein Symbol im Text einfügen

Nachteile

  • Darstellung variiert je nach Plattform
<!DOCTYPE html>
<html lang="de">
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="width=device-width,initial-scale=1"/>
		<title>Emoji Test</title>
	</head>
	<body>
		<div class="app">
			<label>&#x1f4c2; Öffnen</label>
			<label>&#x1f4c1; Ordner</label>
			<label>&#x1f4be; Diskette</label>
		</div>
	</body>
</html>

Links