---json
{
    "layout": "median",
    "page_id": "nfr9z6siij6anj8y3059d"
}
---
====== Support - Why is my svg / icon not rendering correctly ? ======



===== About =====
This article explains why your [[docs:content:svg|svg]] or [[docs:content:icon|icon]] may not render correctly with Combostrap and brings two solutions.


<note>
If the [[docs:content:icon|icon]] that you are using is from one of our [[docs:content:icon#library|supported icon library]], [[:support|contact us or create a ticket]]
</note>

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

===== Why is the style suppressed by default ? =====

==== Style Conflict  ====

By default, a [[docs:content:icon|icon]] or any [[docs:content:svg|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:
      * [[https://github.com/akveo/eva-icons/blob/master/package/icons/fill/svg/facebook.svg|Eva Facebook]]
      * [[https://raw.githubusercontent.com/carbon-design-system/carbon/main/packages/icons/src/svg/32/SQL.svg|Carbon SQL]]

If you put this two icon on a page, the second will be a blank square  (([[https://github.com/carbon-design-system/carbon/issues/5568|Carbon Issue]])) 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 [[docs:content:icon|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
<code svg>
<defs>
   <style>.cls-1{fill:#fff;}</style>
</defs>
<path class="cls-1">
</code>
  * With 
<code svg>
<path fill="#fff">
</code>
==== 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:
  * [[docs:content:icon|Icon]]
<webcode name="Default" frameborder="0">
<code dw>
<icon name="carbon:logo-tumblr" preserve="style"/>
</code>
</webcode>

  * [[docs:content:svg|Svg]]
<webcode name="Default" frameborder="0">
<code dw>
{{:combostrap:icons:carbon:logo-tumblr.svg?24&preserve=style}}
</code>
</webcode>



<note>
It will preserve the style but also the class and id attributes.
</note>