Illustrator and Gradient SVG

[glassmonolith]

Hello, all. I'm having issues with getting just the most BASIC shape to work with a linear-gradient on export from Illustrator. I'm hoping someone can help me understand what part in the process (specific to Illustrator) or code that's either hindering the export from working in GT, or what I need to do different for it to work.

 

[Vectra4]

Theres a path 13 that is a nonzero'ed box in a box thats odd so lets delete that, But the problems the style def of the gradient.

If you open the files in notepad or the like you can see <style>.c{fill:url(#b);}</style> then the actual gradient, Which GT doesnt like. The fill should be at the end of the path data. You can delete the <style> section and just add fill="url(#b)" at then end and it works.

Gradients need to be very basic for GT to allow them to render correctly, Im not versed in which button you need to check to make Illustrator put its duck in order, I imagine its in the export options somewhere. (Trying to google options dropdowns and their effects when I cant fiddle with it is pain)

Edit: Huh, why do I find options 5 mins after I post. I think the export styling needs to be Presentation Attributes.

 

[glassmonolith]

Ahhh, this is great! Now I can use your corrected file to compare and figure out the coding issues so I know what to look out for in the future.

And you're totally right, Presentation fixes the issue! But NOW, I just tried it on a file with two shapes, one gradients each and it only seems to detect ONE gradient. Could you solve the code issue again so I could see that? That would obviously help me with any number of gradients going forward I could imagine.

 

[glassmonolith]

I just got it working, actually. I would be still curious to see what you have, if you wouldn't mind, though. Just to give me a more involved idea of what parts of the code can change.

 

[Vectra4]

Every seperate path needs its own gradient and each gradient need all its data defined in its own string.

The Busch logo has Gradient c and e, c is fine. Gradient e however doesnt have its stop data defined properly and attempts to use gradient c's stop data by using xlink:href="#c"

Make a new gradient for e without using c to copy over and it should be fine.

As for the general pitfalls of gradients and what code wise you dont want to see, Xlinks , Tranforms , Matrix-transforms. Deleting the gradient and starting again is usually quicker. To avoid problems make the gradients last and dont move objects around afterwards.

SVGグラデーション補正 for GTSport （超アルファ版）

Can be useful to remove the above issues, but often requires going back into the file and putting stop nodes back where you want them.

 

[glassmonolith]

Awesome. Got it all solved with this. Thanks so much for the assist!