Von PNG-Icons zu SVG-Icons migrieren
- 17 Jul 2025
- 1 Minute zum Lesen
- Drucken
- DunkelLicht
- pdf
Von PNG-Icons zu SVG-Icons migrieren
- Aktualisiert am 17 Jul 2025
- 1 Minute zum Lesen
- Drucken
- DunkelLicht
- pdf
Artikel-Zusammenfassung
Fanden Sie diese Zusammenfassung hilfreich?
Vielen Dank für Ihr Feedback
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=2022-11-02&spr=https&st=2025-09-25T12%3A34%3A32Z&se=2025-09-25T12%3A44%3A32Z&sr=c&sp=r&sig=stNdNGlXlFeozdQSHDYOjkjbOcquNqfHTYrQO%2FoqNm8%3D "image(396).png")
Klicken Sie Smart Tips.
.png?sv=2022-11-02&spr=https&st=2025-09-25T12%3A34%3A32Z&se=2025-09-25T12%3A44%3A32Z&sr=c&sp=r&sig=stNdNGlXlFeozdQSHDYOjkjbOcquNqfHTYrQO%2FoqNm8%3D "image(397).png")
Klicken Sie im Abschnitt Icon auf + Icon hinzufügen.
.png?sv=2022-11-02&spr=https&st=2025-09-25T12%3A34%3A32Z&se=2025-09-25T12%3A44%3A32Z&sr=c&sp=r&sig=stNdNGlXlFeozdQSHDYOjkjbOcquNqfHTYrQO%2FoqNm8%3D "image(398).png")
Wählen Sie das hochgeladene Symbol aus der Icon Library aus und klicken Sie auf Hinzufügen.
.png?sv=2022-11-02&spr=https&st=2025-09-25T12%3A34%3A32Z&se=2025-09-25T12%3A44%3A32Z&sr=c&sp=r&sig=stNdNGlXlFeozdQSHDYOjkjbOcquNqfHTYrQO%2FoqNm8%3D "image(399).png")
Wählen Sie das Symbol aus und konfigurieren Sie dann dessen Farbe und Größe.
.png?sv=2022-11-02&spr=https&st=2025-09-25T12%3A34%3A32Z&se=2025-09-25T12%3A44%3A32Z&sr=c&sp=r&sig=stNdNGlXlFeozdQSHDYOjkjbOcquNqfHTYrQO%2FoqNm8%3D "image(400).png")
Klicken Sie Speichern.
.png?sv=2022-11-02&spr=https&st=2025-09-25T12%3A34%3A32Z&se=2025-09-25T12%3A44%3A32Z&sr=c&sp=r&sig=stNdNGlXlFeozdQSHDYOjkjbOcquNqfHTYrQO%2FoqNm8%3D "image(401).png")
Sobald gespeichert, gilt dieses SVG-Symbol für alle Smart Tips in Ihrer Anwendung, und überall wo PNG-Symbole verwendet werden, werden sie durch dieses SVG-Symbol ersetzt. Die PNG-Icons sind veraltet.
War dieser Artikel hilfreich?