---
title: "Ersetzen Sie vorhandene PNG-Icons durch SVG-Icons."
slug: "migrating-from-old-png-icons-to-svg-icons"
updated: 2026-05-07T00:34:31Z
published: 2026-05-29T04:29:43Z
canonical: "support.whatfix.com/migrating-from-old-png-icons-to-svg-icons"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://support.whatfix.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Ersetzen Sie vorhandene PNG-Icons durch SVG-Icons.

### Warum zu SVG-Icons migrieren?

Mit der Icon Library stellt Whatfix die Verwendung von PNG-Icons ein. Wenn Sie PNG-Icons in Inhalten wie Smart Tips verwenden, stellen Sie sicher, dass Sie alle bestehenden PNG-Icons auf das SVG-Format aktualisieren. Die Migration zu SVG-Icons stellt sicher, dass Ihr Inhalt konsistent bleibt und mit dem Design Ihrer Anwendung übereinstimmt.

### Vorteile der Verwendung von SVG-Icons gegenüber PNG-Icons

| Aspekt | SVG-Icons | PNG Icons |
| --- | --- | --- |
| **Skalierbarkeit** | Kann ohne Qualitätsverlust in der Größe verändert werden; bleibt in jeder Größe scharf und klar | Verliert an Qualität beim Verkleinern, wird unscharf oder pixelig |
| **Dateigröße** | Oft kleiner, was die Ladezeit und die Leistung Ihrer Anwendung verbessert | Kann größer sein, insbesondere bei höheren Auflösungen, was die Anwendung verlangsamen kann |
| **Anpassungen** | Die einfache Manipulation mit CSS oder JavaScript für dynamische Änderungen in Farbe, Größe und Effekten aktivieren | Statisch, erfordert neue Images für Änderungen, was die Anpassung umständlich macht |
| **Konsistenz** | Sorgt für ein einheitliches Erscheinungsbild auf verschiedenen Geräten und Bildschirmgrößen, was zu einer konsistenten Benutzererfahrung beiträgt | Kann auf verschiedenen Geräten unterschiedlich erscheinen, was zu Inkonsistenzen im Inhalt führt |

### Wie man von PNG zu SVG-Icons in Smart Tips migriert?

1. Erstellen oder finden Sie SVG-Ersatz für Ihre vorhandenen PNG-Icons
2. Laden Sie die SVG-Icons in die Icon Library hoch

**Die SVG-Icons in die Icon Library hochladen**

Um SVG-Icons in die Icon-Bibliothek hochzuladen, sehen Sie, [Custom Icons in Whatfix-Inhalten und Widgets verwenden](/studio/docs/de/customize-icons-in-whatfix-contents-and-widgets).
3. Ersetzen Sie vorhandene PNG-Icons durch SVG-Icons

**Ersetzen Sie vorhandene PNG-Icons durch SVG-Icons**

Verwenden Sie die folgenden Schritte, um bestehende Icons durch SVG-Icons in Smart Tips zu ersetzen:

  1. Auf dem Whatfix Guidance Dashboard, klicken Sie **Stil**.![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image(319).png?sv=2026-02-06&spr=https&st=2026-10-29T05%3A33%3A54Z&se=2026-10-29T06%3A33%3A54Z&sr=c&sp=r&sig=IP9VUEg2%2FtpeGhqeSPPDvNZTjhZPya8ZzKt%2FYGLKQ5M%3D)
  2. Klicken Sie **Smart Tips**. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image(397).png?sv=2026-02-06&spr=https&st=2026-10-29T05%3A33%3A54Z&se=2026-10-29T06%3A33%3A54Z&sr=c&sp=r&sig=IP9VUEg2%2FtpeGhqeSPPDvNZTjhZPya8ZzKt%2FYGLKQ5M%3D)
  3. Klicken Sie im Abschnitt Icon auf **+ Icon hinzufügen**.![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image(398).png?sv=2026-02-06&spr=https&st=2026-10-29T05%3A33%3A54Z&se=2026-10-29T06%3A33%3A54Z&sr=c&sp=r&sig=IP9VUEg2%2FtpeGhqeSPPDvNZTjhZPya8ZzKt%2FYGLKQ5M%3D)
  4. Wählen Sie das hochgeladene Symbol aus der **Icon Library** aus und klicken Sie auf **Hinzufügen**. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image(399).png?sv=2026-02-06&spr=https&st=2026-10-29T05%3A33%3A54Z&se=2026-10-29T06%3A33%3A54Z&sr=c&sp=r&sig=IP9VUEg2%2FtpeGhqeSPPDvNZTjhZPya8ZzKt%2FYGLKQ5M%3D)
  5. Wählen Sie das Symbol aus und konfigurieren Sie dann dessen **Farbe** und **Größe**. ![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image(400).png?sv=2026-02-06&spr=https&st=2026-10-29T05%3A33%3A54Z&se=2026-10-29T06%3A33%3A54Z&sr=c&sp=r&sig=IP9VUEg2%2FtpeGhqeSPPDvNZTjhZPya8ZzKt%2FYGLKQ5M%3D)
  6. Klicken Sie **Speichern**.

![](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/image(401).png?sv=2026-02-06&spr=https&st=2026-10-29T05%3A33%3A54Z&se=2026-10-29T06%3A33%3A54Z&sr=c&sp=r&sig=IP9VUEg2%2FtpeGhqeSPPDvNZTjhZPya8ZzKt%2FYGLKQ5M%3D)

> [!WARNING]
> Note:
> 
> Sobald gespeichert, gilt dieses SVG-Symbol für alle Smart Tips in Ihrer Anwendung, und überall wo ein PNG-Symbol verwendet wird, wird es durch dieses SVG-Symbol ersetzt. Das PNG-Symbol ist dauerhaft veraltet. Das bedeutet, dass Sie das gleiche PNG-Symbol nicht mehr verwenden können. Wenn Sie den gleichen Symboltyp wünschen, stellen Sie sicher, dass Sie die SVG-Version davon verwenden.