Does anyone know of a way, in Curve or elsewhere, to create SVG vector files (logos, icons, etc.) that contain true vector gradients, not as embedded JPG or PNG, but SVG-compliant…same goes for drop-shadows and similar effects, which are embedded as an image when exported from Curve.
I’d really like to find a method or software that can create fully compliant SVG files with such effects.
Anyone knows how in can be done in Curve or which other software can do this?
Hi Till, Linearity Curve can export SVG with native gradients. Steps to do:
Inside the SVG code you can see this.
Change red and purple colors directly in the code, hit refresh button in your web browser to see the effect.
You can tweak your SVG file in the code directly according to specifications.
Let me know if this helps.
Thanks a lot!
Thank you, Alexander
I can’t say that I ever felt comfortable with editing code, and am always on the search for GUI methods of accomplishing these type of things, but I appreciate the pointer. I would have to experiment a bit to get the hang of it, but if it can be in code, might there be a way to let Curve render gradients and drop-shadows as SVG-compliant vector gradients, rather than images?
Does anyone know of SVG software that can already do this?
Thank you, again, though!
This is exactly what happens under the hood - our SVG files do not contain images, they use an SVG technique called “linear gradient” and to prove this I showed you a screenshot with this part selected inside SVG file.
When SVG contains image there is usually an “image” tag in the code.
So to answer your question, you can apply native gradients using Linearity Curve and then export to SVG. No need to deal with code at all. This was just my way of proving that there are no hidden images inside.
Aha, I see what went wrong, then! The image gradient must have come from Logoist, then, which I used to create the initial SVG file that I imported into Curve. Got it!
Follow-up questions:
When I remove the image components that Logoist added, I am left with the outlines/paths of the logo and its components. How do I fill them with a Curve gradient, and how do I set the direction and in/out points of a linear gradient in Curve? (see attached screenshot of what I am working with)
Sure, let see. For some reason I can’t say for sure why gradient is invisible at your screenshot. But you can try copy that selected object, and paste it into a new empty project and try to apply gradient fill again.
If it doesn’t help you can share the file with me by using direct messages, so I can do that for you.
I tried that, but that didn’t give me a visible gradient either.
This is what the logo looked like after importing it from Logoist, and I will be trying to accomplish a similar effect with SVG-compliant methods, realizing, that I will have to apply some boolean operations to the GN and TV parts to create the shapes that I want to fill with different gradients.
Those parts are in the GNTV BAK layer, which I hide when working on the new Curve-native solution I screen-grabbed before.
Let me try to figure out dm’ing you my curve file, and thanks so much for taking a look at it, Alexander!
