SVG transformation (e_colorize,co_rgb)

Options
Krzysztof
Krzysztof Member Posts: 3 ✭
in Developer APIs

Hello ✋

I want to colorize the SVG using e_colorize transformation.

For example I have SVG icon:
https://res.cloudinary.com/lastminute-contenthub/e_colorize,co_rgb:ff00ff/f_png/v1/DAM/SVG/Custom%20Icons/2021%20redesign/HP/shadow_FS

Here it works because I added the f_png transform. Without this transformation, an SVG is returned but without the changed colors e.g:
https://res.cloudinary.com/lastminute-contenthub/e_colorize,co_rgb:ff00ff/fl_sanitize/v1/DAM/SVG/Custom%20Icons/2021%20redesign/HP/shadow_FS

I found out that this can be done if the original image is raster (e.g. png) and then vectorized: https://res.cloudinary.com/lastminute-test/image/upload/e_colorize,co_rgb:ff00ff/e_vectorize/w_8.0/v1/shadow_FS -raster_iahcww.svg

Unfortunately I can't figure out yet whether it is possible to convert SVG to raster, color it and convert it back to SVG. Or maybe there is a better option?

In short, I want to transform an SVG icon by adding color and I want SVG in return.

I will be grateful for any help 🙏

Tagged:

Answers

  • Wissam
    Wissam Member, Cloudinary Staff Posts: 72
    Options

    Hi there,

    To transform an SVG icon by adding color and return an SVG, here are the steps:
    1. Change the format to PNG using f_png.
    2. Implement the color change e_colorize,co_rgb:ff00ff

    3. Then change the file format to SVG by using e_vectorize,f_svg

    Here you can find the result of the chain transformation for your SCG file:

    https://res.cloudinary.com/lastminute-test/image/upload/e_colorize,co_rgb:ff00ff/f_png/e_vectorize,f_svg/fl_sanitize/w_8.0/v1/shadow_FS-raster_iahcww

    Please review and let me know your feedback.
    Regards,

    Wissam

  • Krzysztof
    Krzysztof Member Posts: 3 ✭
    Options

    Hi Wissam,

    Thanks for your quick response.

    Unfortunately this doesn't work. In your example, the source image is in PNG format.

    Here is real SVG where transformation doesn't work:
    https://res.cloudinary.com/lastminute-test/image/upload/f_png/e_colorize,co_rgb:ff00ff/e_vectorize,f_svg/fl_sanitize/w_8.0/v1/DAM/SVG/Custom%20Icons/2021%20redesign/HP/shadow_FS

  • Wissam
    Wissam Member, Cloudinary Staff Posts: 72
    Options

    Hi there,

    I have tried the URL you have provided with the real SVG and added the extension .svg at the end of your URL and remove the flag fl_sanitize to download the SVG file.

    Here is the URL:

    https://res.cloudinary.com/lastminute-test/image/upload/e_colorize,co_rgb:ff00ff/f_png/e_vectorize,f_svg/w_8.0/v1/DAM/SVG/Custom%20Icons/2021%20redesign/HP/shadow_FS.svg

    I have added the SVG file attached here.

    Is it the requested behavior?

    Regards,
    Wissam

    Untitled Image
    shadow_FS.svg.txt

  • Krzysztof
    Krzysztof Member Posts: 3 ✭
    edited April 2
    Options

    Unfortunately no.

    "e_colorize,co_rgb:ff00ff" should colorize asset to blue, where above SVG looks almost the same as the original one. I expect something like that:

    image.png

Categories