Icon Library Best Practices

An SVG file is structured with an <svg> tag that might contain elements such as <path>, <circle>, or <rect>. Such elements can define the shapes and components of your SVG.

Ensure that the SVG’s height and width are defined within the <svg> tag to ensure the elements inside the SVG scale accordingly. This maintains the overall size of the icon while keeping its internal components in proportion to the specified dimensions.  

Info:

To check the SVG structure, right click the SVG and click Inspect to view the structure.

Instead of using px, set the width and height to unitless values (or 100%). Doing so enables the icon to scale flexibly to its given space, preventing cropping of the icon. For instance, use <svg width="100%" height="100%" viewBox="0 0 48 48">

• Some SVGs might come with fixed colors (for example, fill="blue"), which cannot be changed within Whatfix. In this case, if you try to change the SVG color, it will not override the hardcoded colors in the SVG. For more information, see How to work with Fill Color and Stroke Color?

• As a best practice, avoid uploading SVGs with fixed colors if you expect them to adapt to Whatfix's theme. Instead, select or create SVGs with dynamic color properties, that is, fill="currentColor", for flexibility.

  Note:

  • To check if an SVG has a fixed color, right click the SVG and click Inspect to view the structure, or open the SVG in a code editor such as VS Code.

  • Also, to avoid any external styles use inline styling. By placing fill="currentColor"directly on the <path> element, you use inline styling.

  • You can change the color directly using any basic code editor.

• The maximum supported dimensions for icons in the Whatfix Icon Library is 48x48 pixels, and the file size should not exceed 25KB.

• If your SVG exceeds the size limit, consider compressing using any SVG compressor tool.

When converting a PNG file to an SVG file, ensure that the SVG file does not contain any <image> tags. Whatfix blocks SVG files with these tags for security reasons.

Note:

To check if your SVG contains any <image> tag, open the file in any code editor.

What to do if your converted SVG contains an <image> tag?

If you find that your converted SVG file contains an <image> tag, simply removing the tag from an existing file won't resolve the issue because the SVG might still not render correctly without the necessary image data.

Here’s what you can do:

• Create or find an SVG file that doesn't include any <image> tag.

• Use any online converter tool to convert PNG to SVG, but be mindful that most of them might still produce files with <image> tags.

• If you are unable to find a converter tool that gives you a pure SVG file, reach out to your design team to provide a clean SVG without <image> tags. This ensures that the icon will work correctly with Whatfix.

• For security reasons, SVGs that contain certain HTML tags and attributes are blocked when uploading icons to the Icon Library to prevent malicious code execution.

  Blocked HTML Tags:

  "a", "script", "foreignObject", "image", "video", "feimage", "div", "use", "set"

  Blocked HTML Attributes:

  Any attribute starting with "on" (for example, "onmouseover", "onload"), "href", "xlink:href"

• If your SVG contains any of these tags or attributes, you must remove them and upload the SVG again.

Note:

To check if an SVG has any of the following tags or attributes, right click the SVG and click Inspect to view the structure, or open the SVG in a code editor such as VS Code.

• As a best practice, always test your SVG icons in a development environment before using them in production to ensure they behave as expected.