SVG designs with gradients fading to transparent
Hello.
Currently when uploading a design consisting of a SVG file with multiple colours, it only seems to be able to handle solid colours.
My request is to allow gradients than can start with a tone of 100% at one end, then fade to 0% within svg and retain their appearance when being dynamically colour within FPD
Example svg attached
Kind regards Karl
Hi Karl, i think you didn't "Flatten transparency" in your software.
I tried with your SVG using illustrator, seems to work, but need some adjustments. i.e. change the layers order, remove the white, ...
I attach the screen i made.
Just got it !
You have to flatten your design within Illustrator (or your SVG editor software)
Flatten the gradients
Decompose the design
then the SVG is made of solid color for FPD.
I attach your SVG with my modifications
Hi Olivia
I appreciate you looking at this for us, however it's not quite right.
If you look at my example attachment, you will see I'm using this as a front design on top of a shirt.
So there should only be 3 colours within the svg, allowing the customer to change those 3 colours with the picker.
When uploading your example, instead of only getting 3 colours - I get about 50?
Is there anyway we can keep the transparency and still allow us to colour this?
Note this current technique works with solid colours, - its only when we add vignettes, which we now require is it not working
Regards Karl
Hi Karl,
Oh ! i thought you was just struggling importing your SVG with gradients, so found this simple solution.
In fact, if you want to be able to also modify the color, i think you will need to import several layers into FPD
I try and let you know the best solution I found :)
Olivia
Thanks Olivia.
Yes I can import several colours fine to build the actual shirt - it's just the additional front or back design with multiple colours I am having issues with.
I'm hoping this can me included in an upcoming release to allow for gradients fading to 0% colour overlaying other colours in the future
That's what i thought :)
You have to separate the layers of your SVG in FPD and create a compound shape of your solid color layers (the yellow background and the dark blue outline)
For the gradient layer, i choose the PNG export, so the transparency is preserved and you can change the color in the builder.
I attach the video screen and files.
Hi Olivia
Sorry - the main layers aren't the issue I have - it's the design placed on top that has colours in it that I'm having issues with.
Please see attached video
Ok ! That's much more tricky ^^
Have you tried to import the designs as PNG to test if it's works better ?
Hi Olivia
As each design has multiple colours that need changing within the svg - png isn't an option as it need to be contained within the one file and editable
1 person likes this
I can do it fine with solid colours - However gradients just turn into solids once the colour chip is selected
Unfortunately, i'm not sure you'll be able to do so with designs library and SVG :(
I'm hoping the developers can allow for this in future updates :)
thanks Karl