Support - Why is my svg / icon not rendering correctly ?

About

This article explains why your svg or icon may not render correctly with Combostrap and brings two solutions.

If your icon or svg does not render correctly, this is ultimately caused by a styling issue because ComboStrap suppress them by default with the svg optimization (along with all class attributes).

Why is the style suppressed by default ?

Style Conflict

By default, a icon or any svg should not use the css style element because:

• the style will leak into the current page
• the style generally contains the same class names across icons (they are generated by the icon/svg application. For instance, cls-1, cls-2, from photoshop).

Below, you can see examples of such icon:

• Eva Facebook
• Carbon SQL

If you put this two icon on a page, the second will be a blank square ¹⁾ because:

• the share the same class cls-1 (photoshop generated class)
• and the first one has a transparency attribute.

Color Conflict

We allows a user to change the color for any icon. If there was any style, it would not be possible because there would be a conflict between:

• the color of the user
• the color of the style

Solution

Modify your file

The first solution is to change your svg file by replacing any style attribute or element by the corresponding svg painting attribute that are:

• fill
• stroke

Example:

• You could replace this declaration

<defs>
   <style>.cls-1{fill:#fff;}</style>
</defs>
<path class="cls-1">

• With

<path fill="#fff">

Preserve

If you are sure that the style will not leak and that you want to preserve them, you can add the preserve attribute.

It will:

• preserve the style
• and serve the svg as image (to not leak the style)

Example:

• Icon

<icon name="carbon:logo-tumblr" preserve="style"/>

• Svg

{{:combostrap:icons:carbon:logo-tumblr.svg?24&preserve=style}}