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?
Erstellen oder finden Sie SVG-Ersatz für Ihre vorhandenen PNG-Icons
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.
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:
Auf dem Whatfix Guidance Dashboard, klicken Sie Stil.
.png?sv=2026-02-06&spr=https&st=2026-06-04T01%3A25%3A50Z&se=2026-06-04T01%3A36%3A50Z&sr=c&sp=r&sig=CmGv%2BrE1ID6GRxyT0aqMubV%2Fekk6YWuIXmi7TMv6V3c%3D "image(396).png")
Klicken Sie Smart Tips.
.png?sv=2026-02-06&spr=https&st=2026-06-04T01%3A25%3A50Z&se=2026-06-04T01%3A36%3A50Z&sr=c&sp=r&sig=CmGv%2BrE1ID6GRxyT0aqMubV%2Fekk6YWuIXmi7TMv6V3c%3D "image(397).png")
Klicken Sie im Abschnitt Icon auf + Icon hinzufügen.
.png?sv=2026-02-06&spr=https&st=2026-06-04T01%3A25%3A50Z&se=2026-06-04T01%3A36%3A50Z&sr=c&sp=r&sig=CmGv%2BrE1ID6GRxyT0aqMubV%2Fekk6YWuIXmi7TMv6V3c%3D "image(398).png")
Wählen Sie das hochgeladene Symbol aus der Icon Library aus und klicken Sie auf Hinzufügen.
.png?sv=2026-02-06&spr=https&st=2026-06-04T01%3A25%3A50Z&se=2026-06-04T01%3A36%3A50Z&sr=c&sp=r&sig=CmGv%2BrE1ID6GRxyT0aqMubV%2Fekk6YWuIXmi7TMv6V3c%3D "image(399).png")
Wählen Sie das Symbol aus und konfigurieren Sie dann dessen Farbe und Größe.
.png?sv=2026-02-06&spr=https&st=2026-06-04T01%3A25%3A50Z&se=2026-06-04T01%3A36%3A50Z&sr=c&sp=r&sig=CmGv%2BrE1ID6GRxyT0aqMubV%2Fekk6YWuIXmi7TMv6V3c%3D "image(400).png")
Klicken Sie Speichern.
.png?sv=2026-02-06&spr=https&st=2026-06-04T01%3A25%3A50Z&se=2026-06-04T01%3A36%3A50Z&sr=c&sp=r&sig=CmGv%2BrE1ID6GRxyT0aqMubV%2Fekk6YWuIXmi7TMv6V3c%3D "image(401).png")
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.