Creating svg gradients for Gimp

Rod · **Joined:** May 16, 2010 **Posts:** 14709 **Location:** USA

This tutorial will explain to you how to create very easy svg gradients for Gimp that will work exactly like your other gradients.First off you will need a couple things.
A text editor
Gimp

Open your text editor and copy and paste this code into your editor.
You will want to save this code so save it as MySVGgradientCode.txt for now.
Then you can use it to create all your new SVG gradients very easily.

Code: Select all

<defs>
<linearGradient id="MySVGgradientCode">
<stop offset="0%" stop-color="#FFFFFF" />
<stop offset="100%" stop-color="#000ac3" />
</linearGradient>
</defs>

From above gradient code -

To save the gradient copy the id name of whatever you named it and in your text editor go to File/Save as.
Then when your save as dialog opens paste the name in the text field and add the svg extension at the end like this. - "yourGradientName.svg" - include the quotation marks. Browse to your user gradients folder and click save.
Either open Gimp or refresh your gradients -your new gradient will be listed as the id name.

Well that's all fine and dandy Rod but what if i want a more complicated gradient - say 5 gradients?
Well i just happened to have created one for you that you can save and add dif stop marks to it however you please.
stops between must go in order between 0% and 100%

stop 5% - 100%
Example: My white to blue Fire gradient

Code: Select all

<defs>
<linearGradient id="myWhiteToBlueFireGrad">
<stop offset="5%" stop-color="#FFFFFF" />
<stop offset="25%" stop-color="#fff000" />
<stop offset="50%" stop-color="#f57d00" />
<stop offset="75%" stop-color="#ff0000" />
<stop offset="100%" stop-color="#000ac3" />
</linearGradient>
</defs>

Example Image:

You can add up to 100 stops as far as i know 0-100% - maybe more with 1.5% i have not tried that yet.
maybe someone can try and post the results here.

IMHO this is a much easier way of creating gradients for gimp.

Enjoy making your new SVG gradients and thanks for checking out this tutorial!

If you need further help just PM me. :bigthup

Rod · **Joined:** May 16, 2010 **Posts:** 14709 **Location:** USA

My metalic 8 stop gradient

Example Image:

nixnine · **Posted:** Thu Mar 03, 2011 11:57 pm **(#3)**

Think I'm missing something, but where in gimp do I place this?

Rod · **Joined:** May 16, 2010 **Posts:** 14709 **Location:** USA

nixnine wrote:

Think I'm missing something, but where in gimp do I place this?

They all go in your user directory in the gimp-2.8/gradients OR gimp-2.9/gradients folder.

Make sure to give them a .svg extension NOT ggr!
svg = scalable vector graphic
ggr = gimp gradient

Both svg, and ggr work as gradient extensions in Gimp. (provided the svg file contains correct gradient code)
Both extensions are text editable files.

capnhud · **Joined:** May 09, 2011 **Posts:** 28

I have found that making gradients for the gimp is best done by using inkscape and then just saving the svg file in your gradient folder here is a post that describes the process.

It has an on canvas gradient editor that will allow you to reposition and add nodes to the gradient with a click of the mouse. You can also "reposition" the gradient to your exact specifications.

Rod · **Joined:** May 16, 2010 **Posts:** 14709 **Location:** USA

capnhud wrote:

I have found that making gradients for the gimp is best done by using inkscape. It has an on canvas gradient editor that will allow you to reposition and add nodes with a click of the mouse. You can also "reposition" the gradient to your exact specifications.

That's all fine and dandy if you have The Inkscape Program installed.

The beauty of making them as SVG is all you need really is a text editor, and of course Gimp.

capnhud · **Joined:** May 09, 2011 **Posts:** 28

Yes you would need inkscape installed. But since it works on windows and linux ( not sure about mac) it complements gimp

Rod · **Joined:** May 16, 2010 **Posts:** 14709 **Location:** USA

My biggest wish is for Gimp to get a live gradient editor.Like Inkscape and Xara.

DONE! In GIMP-2.9.5 - http://www.Partha.com

akky · **Joined:** Apr 09, 2011 **Posts:** 1764

capnhud wrote:

:) Yes you would need inkscape installed. But since it works on windows and linux ( not sure about mac) it complements gimp

Inkscape is installed and working on my Mac...I just never used it really but it opens and looks as though its ok.

Gms9810 · **Posted:** Tue May 31, 2011 8:24 am **(#10)**

Rod wrote:

capnhud wrote:

I have found that making gradients for the gimp is best done by using inkscape. It has an on canvas gradient editor that will allow you to reposition and add nodes with a click of the mouse. You can also "reposition" the gradient to your exact specifications.

That's all fine and dandy if you have The Inkscape Program installed.

The beauty of making them as SVG is all you need really is a text editor, and of course Gimp.

I can't imagine life without Inkscape, anyone who doesn't have it should get it. It's free and the perfect compliment to Gimp.

Rod · **Joined:** May 16, 2010 **Posts:** 14709 **Location:** USA

I hear that.

Inkscape is an excellent vector freeware.I just wish Gimp could mate with Inkscape and have a new child called SodiGimp.

Or GimpScape would be cool too.

Gms9810 · **Posted:** Tue May 31, 2011 3:07 pm **(#12)**

If inkscape mated with Gimp I want some of the babies.

Konstantin · **Joined:** Sep 20, 2016 **Posts:** 293

First post.

Whenever i try to do this, or the method explained on the Inkscape board, my gradient turns up completely black.
What am i doing wrong ?
I tried Rod's examples..... all the same (completely black).

Rod · **Joined:** May 16, 2010 **Posts:** 14709 **Location:** USA

Konstantin wrote:

First post.

Whenever i try to do this, or the method explained on the Inkscape board, my gradient turns up completely black.
What am i doing wrong ?
I tried Rod's examples..... all the same (completely black).

Could you post the entire code between brackets like these please.
[code][/code]
Help if i could look at it. Also are you saving as .SVG extension?

Konstantin · **Joined:** Sep 20, 2016 **Posts:** 293

Im using both of your examples you posted.
Yes im saving them as svg.

They turn up in my gradients list, but they are just black.
When i open the gradient in the gradient editor, all the stops are black.

Rod · **Joined:** May 16, 2010 **Posts:** 14709 **Location:** USA

Konstantin wrote:

Im using both of your examples you posted.
Yes im saving them as svg.

They turn up in my gradients list, but they are just black.
When i open the gradient in the gradient editor, all the stops are black.

What version of GIMP are you using?

Rod · **Joined:** May 16, 2010 **Posts:** 14709 **Location:** USA

Just a second i am loading one of the examples in GIMP-2.8.16 64 bit. I will see if i can duplicate the problem.

Konstantin · **Joined:** Sep 20, 2016 **Posts:** 293

Im on 2.8.16

Rod · **Joined:** May 16, 2010 **Posts:** 14709 **Location:** USA

Konstantin wrote:

Im on 2.8.16

Yes i get the same results. Possibly a bug in this version. Thanks for bringing it up. I use GURM (add on manager) so i haven't loaded any SVG gradients in a while.
You should report the bug to the developers. SVG scalable gradients are supposed to work. Let me try one of Parthas portable GIMP-2.9 versions a second. BRB.

Rod · **Joined:** May 16, 2010 **Posts:** 14709 **Location:** USA

Yes same bug in GIMP-2.9.5 Parthas color corrected build.

	Similar Topics	Replies
	Problem with gradients	5
	two gradients two photos	7
	How to create custom gradients?	5
	\| Solved ] Move points on gradients	2
	Editing Gradients Stopped Working Overnight (Solved)	2