For those who know CSS and SVG, you must be familiar with the "currentColor" property. It means that any object with "currentColor" property will follow whatever color on its parent.

If you set a path inside SVG with fill="currentColor" or stroke="currentColor" it will bubble up to find any color that can be use for the color fill. If the SVG wrapped by a div and this div has style of "color:red", the the path will have red color.

If then we convert that svg code to PNG, the default color render for "currentColor" is black, eventhough the color you see in the browser is red. So on the PNG you will see the image with black color.