Die Whatfix Icon Library unterstützt nur SVG (Scalable Vector Graphics) Dateitypen für Icons, die in Widgets wie Smart Tips, Beacons und Launchers verwendet werden. Befolgen Sie die besten Praktiken, um sicherzustellen, dass Ihre Symbole wie erwartet angezeigt werden.
Info:
Die folgenden besten Praktiken konzentrieren sich auf Prüfungen, die erforderlich sind, um sicherzustellen, dass die SVG-Icons den gewünschten Style haben, den Sie benötigen. Wenn Sie weitere Änderungen vornehmen möchten, bearbeiten Sie die Icons in der Code-Ansicht. Öffnen Sie das SVG-Icon in einem beliebigen Texteditor, nehmen Sie die erforderlichen Änderungen vor und speichern Sie das Icon. Laden Sie das gespeicherte Icon abschließend in Ihre Icon Library hoch.
SVG-Struktur und Dimensionen prüfen
Eine SVG-Datei ist mit einem <svg> Tag strukturiert, der Elemente wie <path>, <circle> oder <rect> enthalten kann. Solche Elemente können die Formen und Komponenten Ihres SVGs definieren.
Stellen Sie sicher, dass die Höhe und Breite des SVG im <svg> Tag definiert sind, damit die Elemente innerhalb des SVG entsprechend skaliert werden. Dies erhält die Gesamtgröße des Symbols, während die internen Komponenten im Verhältnis zu den angegebenen Abmessungen bleiben.
Info:
Um die SVG-Struktur zu überprüfen, klicken Sie mit der rechten Maustaste auf das SVG und wählen Sie Untersuchen, um die Struktur anzuzeigen.
Verwenden Sie einheitenlose Werte in SVGs
Anstatt px zu verwenden, setzen Sie die Breite und Höhe auf einheitenlose Werte (oder 100%). Dadurch kann das Icon flexibel an den verfügbaren Platz angepasst werden und ein Abschneiden des Icons wird verhindert. Verwenden Sie zum Beispiel <svg width="100%" height="100%" viewBox="0 0 48 48">
Farbanpassung in SVGs befolgen
Einige SVGs könnten feste Farben haben (zum Beispiel fill="blue"), die innerhalb von Whatfix nicht geändert werden können. In diesem Fall, wenn Sie versuchen, die SVG-Farbe zu ändern, werden die fest codierten Farben im SVG nicht überschrieben. Weitere Informationen finden Sie unter Wie arbeite ich mit Füllfarbe und Strichfarbe?
Als beste Praxis sollten Sie das Hochladen von SVGs mit festen Farben vermeiden, wenn Sie erwarten, dass sie sich an die Themes von Whatfix anpassen. Wählen Sie stattdessen SVGs mit dynamischen Farbeigenschaften aus oder erstellen Sie diese, das heißt,
fill="currentColor", für Flexibilität.Note:
Um zu überprüfen, ob eine SVG eine feste Farbe hat, rechts klicken Sie auf das SVG und klicken Sie auf Inspect, um die Strukturanzuzeigen oder öffnen Sie die SVG in einem Code-Editor wie VS Code.
Um externe Styles zu vermeiden, verwenden Sie Inline-Styling. Indem Sie
fill="currentColor"direkt am <path>-Element platzieren, verwenden Sie Inline-Styling.Sie können die Farbe direkt mit jedem einfachen Code Editor ändern.
SVG-Dateien komprimieren
Die maximal unterstützten Abmessungen für Symbole in der Whatfix Icon Library betragen 48x48 Pixel, und die Dateigröße sollte 25KB nicht überschreiten.
Wenn Ihr SVG die Größenobergrenze überschreitet, ziehen Sie in Betracht, es mit einem beliebigen SVG-Komprimierungstool zu komprimieren.
PNG-Dateien in SVG-Dateien konvertieren
Beim Konvertieren einer PNG-Datei in eine SVG-Datei stellen Sie sicher, dass die SVG-Datei keine <image> Tags enthält. Whatfix blockiert SVG-Dateien mit diesen Tags aus Sicherheitsgründen.
Note:
Überprüfen Sie, ob Ihr SVG ein
<image>-Tag enthält, indem Sie die Datei in einem beliebigen Editor öffnen.
Was ist zu tun, wenn Ihr konvertiertes SVG ein <image> Tag enthält?
Wenn Sie feststellen, dass Ihre konvertierte SVG-Datei ein <image> Tag enthält, wird das bloße Entfernen des Tags aus einer vorhandenen Datei das Problem nicht lösen, da das SVG möglicherweise ohne die erforderlichen Bilddaten immer noch nicht korrekt dargestellt wird.
Hier ist, was Sie tun können:
Erstellen oder finden Sie eine SVG-Datei, die keinen
<image>-Tag enthält.Verwenden Sie ein beliebiges Online-Konverter-Tool, um PNG in SVG zu konvertieren, aber beachten Sie, dass die meisten von ihnen möglicherweise immer noch Dateien mit
<image>Tags erstellen.Wenn Sie ein Konverter-Tool nicht finden können, das Ihnen eine reine SVG-Datei liefert, wenden Sie sich an Ihr Designteam, um ein sauberes SVG ohne
<image>Tags bereitzustellen. Dies stellt sicher, dass das Icon korrekt mit Whatfix funktioniert.
Sicherheitsüberlegungen befolgen
Aus Sicherheitsgründen werden SVGs, die bestimmte HTML-Tags und -Attribute enthalten, beim Hochladen von Icons in die Icon-Bibliothek blockiert, um die Ausführung von schädlichem Code zu verhindern.
Blockierte HTML-Tags:
"a","script","foreignObject","image","video","feimage","div","use","set"Blockierte HTML-Attribute:
Jedes Attribut, das mit
"on"beginnt (zum Beispiel,"onmouseover","onload"),"href","xlink:href"Wenn Ihr SVG eines dieser Tags oder Attribute enthält, müssen Sie sie entfernen und das SVG erneut hochladen.
Note:
Um zu überprüfen, ob eine SVG eines der folgenden Tags oder Attribute hat, rechts klicken Sie auf das SVG und klicken Sie auf Inspect, um die Struktur, oder öffnen Sie die SVG in einem Code-Editor wie VS Code.
Als Beste Praktiken sollten Sie immer Ihre SVG Icons in einer Entwicklungsumgebung testen, bevor Sie sie in der Produktion verwenden, um sicherzustellen, dass sie wie erwartet funktionieren.