New to the community? Start here

Changing the colour of a SVG image added via CSS

On my site there’s a background SVG added via CSS. I’d like to change it’s colour if possible. Can you help me with that?

Mon, 1 Jun 2020 14:50:19
  • Adam
    • Support Gorilla

    Hi Alex

    I hope you’re well today and thank you for your question!

    It’s not that simple to change SVG color via CSS but since the image was “included” directly in CSS there’s a chance that it’s code could be altered – but I’d need to be able to get to that code and either I’m missing something or it’s no longer there.

    Have you change the background meanwhile? I’m asking because I wasn’t able to “pinpoint” that SVG image in the CSS any longer.

    Kind regards,
    Adam

  • Adam
    • Support Gorilla

    Hi Alex

    Thanks for response!

    I checked again and was able to now find the reference to that image in site’s CSS so we’re on a good path.

    It’s going to be a bit “tricky” but should work – works when tested in browser. Here’s what to do:

    1) you need to find a color value that you want to use as color (standard HEX) first and replace the current black (#000000) value for “fill” parameter in this code:

    <svg width="100%" height="72vw" viewBox="0 0 1280 140" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg"><g fill="#FF0000"><path d="M0 0v140h1280L0 0z"/></g></svg>

    2) then save the code as e.g. “image.svg” file and visit this site:

    https://base64.guru/converter/encode/image/svg

    – for “Datatype” select “Local File”
    – upload your “image.svg” file via “browe” button under “local file”
    – for “Output Format” select “Plain text – just the base64 value”
    – and click “encode SVG to Base64

    – copy the code from “Base64” field

    3) in below code replace the XXX with the code that you just copied in step 2

    .et_pb_section_2.section_has_divider.et_pb_bottom_divider .et_pb_bottom_inside_divider {
    background-image: url(data:image/svg+xml;base64,XXX)!important;
}

    4) copy above code (with replaced XXX already) and add it to the “Appearance -> Customize -> Additional CSS” on site or via custom CSS in Divi settings, preferably somewhere at the bottom.

    Clear all cache on site/server if there is any and it should get the job done.

    Best regards,
    Adam