Colored svg is rendered as black.

[alexbartisro]

So I have an SVG at an URL somewhere online, and when I open it in my browser it has two colors, but when I load it with SwiftSVG it's all black. I don't want to apply fill or background colors because those are something else, but it it to have the exact colors that I see when I open the url in my browser.

Is there a setting I'm missing?

I've attached the SVG contents here https://pastebin.com/CWAdKV2Q

[alexbartisro]

Ok, so I saw a difference. In my SVG, the paths get their color from here

<style type="text/css">
    .st0{fill:#F78F33;}
    .st1{fill:#59799C;}
</style>

and they have the css class set

<path class="st0"...>

So I would like to achieve the same thing. Is this possible? So if the path is of a given css class, to apply that css style.

[buguibu]

I'm dealing with similar problems with no success yet, my observations:

• CAShapeLayers seems to have default black color instead of a nil fillColor property
• Looks like the CSS interpreter doesn't properly override element style definitions to previous class or id's definitions

[alexbartisro]

@buguibu It's not supported with this framework, I switched to SVGKit.

[buguibu]

@trusk89 it also doesn't work for me as it crashes due to patterns.

So i have done a dirty fix that can cause vomiting:

    /**
     Function that applies the fill color on all of this group's subelements
     */
    fileprivate func fillGroup(_ fillColorString: String, on layer: CAShapeLayer) {
        guard let fillColor = UIColor(svgString: fillColorString),
        (layer.fillColor?.components!.count)! > 3 && layer.fillColor?.components![0] == 0.0 && layer.fillColor?.components![1] == 0.0 && layer.fillColor?.components![1] == 0.0 else {
            return
        }
        layer.fillColor = fillColor.cgColor
    }

[alexbartisro]

@buguibu thanks for the update!

[nizzam]

Mine still getting black :- . How should I remove that style ?

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="128px" height="128px" viewBox="0 0 128 128" enable-background="new 0 0 128 128" xml:space="preserve">
<g>
    <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="8.8003" y1="16.7222" x2="63.7433" y2="56.9077">
        <stop  offset="0.266" style="stop-color:#F27E24"/>
        <stop  offset="0.5025" style="stop-color:#ED1F24"/>
    </linearGradient>
    <path fill="url(#SVGID_1_)" d="M41.462,37.646l-26.694-8.521C31.049,4.133,65.379-0.365,83.684,13.031
        c26.127,19.122,13.42,58.868,6.225,80.641c9.295-0.662,23.588-5.774,33.889-13.822c-0.377,5.492-2.461,28.023-2.461,28.023
        s-46.178,4.827-56.971,7.951c4.166-11.738,9.975-24.622,14.182-46.008C86.523,29.314,57.746,15.305,41.462,37.646"/>
    <path fill="#B11F24" d="M93.189,23.105c12.033,19.903,4.813,46.073-3.281,70.566c9.295-0.662,23.588-5.774,33.889-13.822
        c-0.377,5.492-2.461,28.023-2.461,28.023s-41.498,4.457-56.971,7.951c1.023-3.121,3.439-10.048,4.607-12.612
        c1.701-3.746,16.271-20.926,20.434-32.126C93.568,59.885,99.547,44.447,93.189,23.105z"/>
    <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="-7.0361" y1="52.501" x2="107.0423" y2="125.0343">
        <stop  offset="0.266" style="stop-color:#F27E24"/>
        <stop  offset="0.5025" style="stop-color:#ED1F24"/>
    </linearGradient>
    <path fill="url(#SVGID_2_)" d="M59.051,116.689c-15.334,4.166-26.751,9.213-40.615,2.637C6.13,113.488,5.043,99.928,5.247,93.672
        c0.271-8.33,7.681-23.855,24.343-31.24c16.661-7.383,35.617-9.641,45.271-8.696c0.852,6.06-0.473,14.295-1.609,18.649
        c-4.354,0-42.715-2.001-45.367,19.015c-0.567,6.248,5.251,8.709,10.98,8.709c5.511,0,17.727,0.678,30.221-11.631
        C67.855,93.875,61.892,109.307,59.051,116.689"/>
    <linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="6.3203" y1="92.7354" x2="74.4668" y2="92.7354">
        <stop  offset="0" style="stop-color:#ED1F24"/>
        <stop  offset="0.5025" style="stop-color:#ED1F24"/>
    </linearGradient>
    <path fill="url(#SVGID_3_)" d="M59.051,116.689c-15.334,4.166-27.02,9.752-40.615,2.637C0.299,109.833,7.004,92.76,10.29,87.432
        c5.6-9.081,16.8-16.801,28.151-20.735c13.048-4.523,36.026-3.936,36.026-3.936c-0.305,4.995-0.078,5.271-1.215,9.625
        c-4.354,0-42.715-2.001-45.367,19.015c-0.567,6.248,5.251,8.709,10.98,8.709c5.511,0,17.727,0.678,30.221-11.631
        C67.855,93.875,61.892,109.307,59.051,116.689"/>
    <path fill="#B11F24" d="M59.051,116.689c-15.334,4.166-27.02,9.752-40.615,2.637c12.867,1.234,16.159,0.609,21.891-0.979
        c5.31-1.473,11.067-3.405,22.25-10.897C61.782,109.605,60.534,112.671,59.051,116.689"/>
</g>
</svg>

[quentinfasquel]

This is unfortunate but gradients (linearGradient & radialGradient) aren't supported by SwiftSVG. I recently encountered the same problem and I considered starting to work on it.. but I did not.