Icon Library Beste Praktiken

Eine SVG-Datei ist mit einem <svg> Tag strukturiert, der Elemente wie <path>, <circle> oder <rect> enthalten kann. Diese 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.  

Your title goes here

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.

• 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 Farb Eigenschaften aus oder erstellen Sie diese, das heißt, fill="currentColor", für Flexibilität.

  Your title goes here

  • 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.

  • Wenn die Farbe fixiert ist, kann sie direkt im Code-Editor geändert werden.

• 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.

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, sodass nur reine SVG-Dateien verwendet werden können.

Your title goes here

Ü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.

• 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 Best Practice sollten Sie immer Ihre SVG-Icons in einer Entwicklungsumgebung testen, bevor Sie sie in der Production verwenden, um sicherzustellen, dass sie wie erwartet funktionieren.