Hi , I'm am new to Inkscape having moved over from Adobe Illustrator.
Can anyone please explain if there is a simple fix to allow gradients used in Inkscape to display correctly?
I have spent days learning Inkscape and re-making an image I had constructed in Illustrator but it does not display as it should in the Inkscape SVG version.
The Illustrator file has been saved as an SVG just to show what is happening. The AI SVG will display correctly but the Inkscape SVG just display a plain colour instead.
I understand from this forum that Inkscape's Gradient Mesh has a problem with displaying in broswers. However, I cannot find anything on just normal Gradients.
Is there a setting I am missing somewhere. I have tried Inkscape SVG and Plain SVG.
The majority of the original image has been removed just to show the most simple difference between the AI and Inkscape SVG versions.
Please help, I have spent weeks on this project in total in both AI and Inkscape. I can't afford to use AI any more. And, Inkscape is my only option.
Aside: Oh yuk that AI svg file is one of those XML ENTITY files that cause so many security problems.
The Inkscape file you have here is using a two-step gradient for some reason. Circle points to gradiantA (with specific coordinates) which has no stops and points to gradientB which has generic coordinates but all the stops.
Inkscape loads this gradient fine, but web browsers must not support it. (which is odd tbh)
But the tricky question is, how did you make these gradients? When I create a gradient in Inkscape (1.0 master) it creates a direct gradient without the two steps. Did you make a gradient first and then somehow apply it to the objects?
I am not sure I understand the "Points to gradiantA" and "points to GradientB" and generic coordinated. While I used to use AI over time, I am not understanding of all the SVG specifications.
I have been able to get my Logo done with the last bit of AI I had left, saved it as SVG and then brought it into Inkscape and save it as a Plain SVG. It was the only was I could get it to display in web browsers. See attached result. This one I did after moving to Version 1.0 Beta.
As for how I made the gradient. Well, that was an accident. When I open the AI file I saw the gradient had come across with it. So, I experimented some and found I could "import" various gradient I used in AI and then Cleaning the Document to get rid of unwanted ones.
I really like Inkscape as it is in many ways better than AI while losing just the capability of save gradients, styles, swatches, etc and a little more freedom than preset extensions. There are probably ways but I don't know near enough yet. But for what I am not know having to pay on a regular basis for only doing design work every now and then: well, I am not complaining. I just wish it would do this one thing with gradients and the web. However, this importing old AI files, is not how I wish to do it in future. I wish to be able to design from scratch.
The last few days I have designed very simple gradients in Inkscape and saving them in Inkscape SVG, Plain SVG and Optimised SVG. I tried using the various Stroke Styles to get rounded or square edging /bevelling on circles but no matter what I used. The browsers only displayed a flat bevelled edge for the Stroke of the circle. As noted. Mesh Gradients don't seem work, which is a shame because give a better grain on metal style gradients (Gold/Silver)
Where I had one circle only, the gradient would display in Firefox and Google Chrome with the slight gradient. However, when I made two circles and, therefore, had two gradients so to speak, it went back to being the two plain colours. That was this morning.
I'm experimenting more this evening and I don't know why but the gradients I have made now work. I did some more testing as I now suspect the imported gradients from the AI import were the issue.
So far, all is working with the ones I designed directly in Inkscape. So I continue to learn.
Is there a way to import Inkscape SVG Gradients for web sources ?
You're not going to like this as an answer, but the truth is the thing:
It's the browser's fault that they don't display the gradients. These are valid SVG files with valid fills. Browsers have an error, they should fix it.
But also: When creating gradients in Inkscape natively (without importing them) does not produce this problem, because Inkscape does not make two step gradients by default. (but it does support them).
So I think this has bitten you because you're important gradients for Adobe Illustrator (or it maybe because of swatches)
I'm going to keep an eye on the issue because we want to keep track of places where browsers are not supporting different svg pieces.
I does in fact seem to be the imported AI files and Gradients that were causing the problem. I have since started testing gradients from with Inkscape and they are working just fine.
But I have found that if the is an SVG files (not one save from AI) that the image from another SVG can be imported the gradient used, the additional image delete and then all is good.
My lack of understanding about SVG files and lack of familiarity with Inkscape that was the biggest problem.
However, I do wish the browser designers will start implementing acceptance of SVG2 capability because that would be good. I really like the way the Mesh Gradients are smoother, if a little bit harder to manipulate.
But all is good.
Now, just to work out how to get Colour Swatches into Inkscape 🤔
Funny, I'm having the exact opposite issue. I have some SVG sent to me from a free-lance artist that I use alot. I've learned that purchasing assets from artists will get you a great product, but you'll rarely get the product in the exact-right format for the project on hand. So I (the developer) use inkscape to make my final formatting tweaks (typically, adjusting viewbox/canvas size). When I import any asset from this artist into inkscape, ALL gradients show up as black. To further complicate the situation, I can make my adjustments, save the file, and when I open the file in a web browser, THE GRADIENTS ARE STILL THERE!
I'm having the same issue @TyMeador - this should be the industry standard honestly. I don't know why opening the svg asset that works in my browser doesn't work when imported into Inkscape. Thanks for posting this.
Beginners' Questions Inscape Gradients not displaying in web browsers
Inkscape.org
Hi , I'm am new to Inkscape having moved over from Adobe Illustrator.
Can anyone please explain if there is a simple fix to allow gradients used in Inkscape to display correctly?
I have spent days learning Inkscape and re-making an image I had constructed in Illustrator but it does not display as it should in the Inkscape SVG version.
The Illustrator file has been saved as an SVG just to show what is happening. The AI SVG will display correctly but the Inkscape SVG just display a plain colour instead.
I understand from this forum that Inkscape's Gradient Mesh has a problem with displaying in broswers. However, I cannot find anything on just normal Gradients.
Is there a setting I am missing somewhere. I have tried Inkscape SVG and Plain SVG.
The majority of the original image has been removed just to show the most simple difference between the AI and Inkscape SVG versions.
Please help, I have spent weeks on this project in total in both AI and Inkscape. I can't afford to use AI any more. And, Inkscape is my only option.
Thanking you in advance.
Aside: Oh yuk that AI svg file is one of those XML ENTITY files that cause so many security problems.
The Inkscape file you have here is using a two-step gradient for some reason. Circle points to gradiantA (with specific coordinates) which has no stops and points to gradientB which has generic coordinates but all the stops.
Inkscape loads this gradient fine, but web browsers must not support it. (which is odd tbh)
But the tricky question is, how did you make these gradients? When I create a gradient in Inkscape (1.0 master) it creates a direct gradient without the two steps. Did you make a gradient first and then somehow apply it to the objects?
I am not sure I understand the "Points to gradiantA" and "points to GradientB" and generic coordinated. While I used to use AI over time, I am not understanding of all the SVG specifications.
I have been able to get my Logo done with the last bit of AI I had left, saved it as SVG and then brought it into Inkscape and save it as a Plain SVG. It was the only was I could get it to display in web browsers. See attached result. This one I did after moving to Version 1.0 Beta.
As for how I made the gradient. Well, that was an accident. When I open the AI file I saw the gradient had come across with it. So, I experimented some and found I could "import" various gradient I used in AI and then Cleaning the Document to get rid of unwanted ones.
I really like Inkscape as it is in many ways better than AI while losing just the capability of save gradients, styles, swatches, etc and a little more freedom than preset extensions. There are probably ways but I don't know near enough yet. But for what I am not know having to pay on a regular basis for only doing design work every now and then: well, I am not complaining. I just wish it would do this one thing with gradients and the web. However, this importing old AI files, is not how I wish to do it in future. I wish to be able to design from scratch.
The last few days I have designed very simple gradients in Inkscape and saving them in Inkscape SVG, Plain SVG and Optimised SVG. I tried using the various Stroke Styles to get rounded or square edging /bevelling on circles but no matter what I used. The browsers only displayed a flat bevelled edge for the Stroke of the circle. As noted. Mesh Gradients don't seem work, which is a shame because give a better grain on metal style gradients (Gold/Silver)
Where I had one circle only, the gradient would display in Firefox and Google Chrome with the slight gradient. However, when I made two circles and, therefore, had two gradients so to speak, it went back to being the two plain colours. That was this morning.
I'm experimenting more this evening and I don't know why but the gradients I have made now work. I did some more testing as I now suspect the imported gradients from the AI import were the issue.
So far, all is working with the ones I designed directly in Inkscape. So I continue to learn.
Is there a way to import Inkscape SVG Gradients for web sources ?
Thanks you for your time.
You're not going to like this as an answer, but the truth is the thing:
It's the browser's fault that they don't display the gradients. These are valid SVG files with valid fills. Browsers have an error, they should fix it.
But also: When creating gradients in Inkscape natively (without importing them) does not produce this problem, because Inkscape does not make two step gradients by default. (but it does support them).
So I think this has bitten you because you're important gradients for Adobe Illustrator (or it maybe because of swatches)
I'm going to keep an eye on the issue because we want to keep track of places where browsers are not supporting different svg pieces.
Thanks Martin
I does in fact seem to be the imported AI files and Gradients that were causing the problem. I have since started testing gradients from with Inkscape and they are working just fine.
But I have found that if the is an SVG files (not one save from AI) that the image from another SVG can be imported the gradient used, the additional image delete and then all is good.
My lack of understanding about SVG files and lack of familiarity with Inkscape that was the biggest problem.
However, I do wish the browser designers will start implementing acceptance of SVG2 capability because that would be good. I really like the way the Mesh Gradients are smoother, if a little bit harder to manipulate.
But all is good.
Now, just to work out how to get Colour Swatches into Inkscape 🤔
Thank again for your help.
Funny, I'm having the exact opposite issue. I have some SVG sent to me from a free-lance artist that I use alot. I've learned that purchasing assets from artists will get you a great product, but you'll rarely get the product in the exact-right format for the project on hand. So I (the developer) use inkscape to make my final formatting tweaks (typically, adjusting viewbox/canvas size). When I import any asset from this artist into inkscape, ALL gradients show up as black. To further complicate the situation, I can make my adjustments, save the file, and when I open the file in a web browser, THE GRADIENTS ARE STILL THERE!
@TyMeador I think that should be reported. If you're able to share any of the files we could use them to fix Inkscape https://gitlab.com/inkscape/inbox/issues
I'm having the same issue @TyMeador - this should be the industry standard honestly. I don't know why opening the svg asset that works in my browser doesn't work when imported into Inkscape. Thanks for posting this.
@tomboolean , please provide a sample file.