Representing linear gradients
-
- Posts: 5
- Joined: Tue Mar 13, 2012 5:17 am
Representing linear gradients
Like many people, I suspect, I'll create a linear gradient for an object by manipulating the 'handles' displayed when using the gradient tool.
Here's an example.
Create a rectangle. Apply a linear gradient from Stop ffffffff to ffffff00, in other words solid white to transparent. However. the gradient starts at the top edge of the rectangle, but the lowest point is some distance beneath the bottom edge.
The question is: how do I represent the gradient filling the boundaries of the rectangle? Yes, its full opacity ffffff at the top, but an (as yet) undetermined opacity at the bottom edge. Is this something the XML editor can help with?
Here's an example.
Create a rectangle. Apply a linear gradient from Stop ffffffff to ffffff00, in other words solid white to transparent. However. the gradient starts at the top edge of the rectangle, but the lowest point is some distance beneath the bottom edge.
The question is: how do I represent the gradient filling the boundaries of the rectangle? Yes, its full opacity ffffff at the top, but an (as yet) undetermined opacity at the bottom edge. Is this something the XML editor can help with?
Re: Representing linear gradients
Hhmm, I'm not sure I understand the question. The gradient stops and starts at the end stops. So you just drag them to wherever you want them.
If you create the gradient originally by using Fill and Stroke dialog > Linear gradient button, the gradient will automatically perfectly fill the rectangle. But if you create the gradient originally by enabling the Gradient tool, and dragging the mouse, it's a little trickier to be precise. But you could used snapping for this. Enable snapping, Snap nodes and handles, Snap to paths (3 buttons engaged, all others not). Then drag one end stop to the top and the other to the bottom, and they will snap to the path (if the rectangle is a path and not a shape). (If it's a shape, then you could just create the gradient using Fill and Stroke dialog.)
If that info doesn't help, would you please clarify?
If you create the gradient originally by using Fill and Stroke dialog > Linear gradient button, the gradient will automatically perfectly fill the rectangle. But if you create the gradient originally by enabling the Gradient tool, and dragging the mouse, it's a little trickier to be precise. But you could used snapping for this. Enable snapping, Snap nodes and handles, Snap to paths (3 buttons engaged, all others not). Then drag one end stop to the top and the other to the bottom, and they will snap to the path (if the rectangle is a path and not a shape). (If it's a shape, then you could just create the gradient using Fill and Stroke dialog.)
If that info doesn't help, would you please clarify?
Basics - Help menu > Tutorials
Manual - Inkscape: Guide to a Vector Drawing Program
Inkscape Community - Inkscape FAQ - Gallery
Inkscape for Cutting Design
Manual - Inkscape: Guide to a Vector Drawing Program
Inkscape Community - Inkscape FAQ - Gallery
Inkscape for Cutting Design
-
- Posts: 5
- Joined: Tue Mar 13, 2012 5:17 am
Re: Representing linear gradients
Hi. Thanks for the reponse. I think I wasn't clear when framing the original question. I'll have another go.
When I present the parameters of a linear gradient for a developer, I might do something like this:
stop-color:#254c7f;stop-opacity:0.25
stop-color:#7996b8;stop-opacity:0.75
Then I supply the dimsensions of the object, and the image can be drawn.
This is works fine for a scenario where the start and stop points of the gradient are precisely on the edges of the object itself.
However, if, in modifying the gradient, you 'pull' one of the handles to a new position away from the edge, then the details of the gradient within the boundries of the object will change. This is because the gradient details are descibing a transformation from one colour to another, from one end stop to another. Not from one edge of an object to the other edge.
So the problem I am facing is trying to represent the parameters of this new scenario.
Now, I could just always keep the end stops on the boundaries of the object, but it doesn't give the creative leeway that I'm after. I like moving the handles around to experiment with different shading.
Hope this describes the issue more clearly.
When I present the parameters of a linear gradient for a developer, I might do something like this:
stop-color:#254c7f;stop-opacity:0.25
stop-color:#7996b8;stop-opacity:0.75
Then I supply the dimsensions of the object, and the image can be drawn.
This is works fine for a scenario where the start and stop points of the gradient are precisely on the edges of the object itself.
However, if, in modifying the gradient, you 'pull' one of the handles to a new position away from the edge, then the details of the gradient within the boundries of the object will change. This is because the gradient details are descibing a transformation from one colour to another, from one end stop to another. Not from one edge of an object to the other edge.
So the problem I am facing is trying to represent the parameters of this new scenario.
Now, I could just always keep the end stops on the boundaries of the object, but it doesn't give the creative leeway that I'm after. I like moving the handles around to experiment with different shading.
Hope this describes the issue more clearly.
Re: Representing linear gradients
I guess someone else will have to answer this, because I'm still not clear what you're trying to do.
Do you want to write some kind of code? do something with gradients from command line? create a gradient by writing XML?? Why do you present paramenters of a gradient to developers? Do you mean developers of Inkscape or developers of some other program that you're using Inkscape with?
The gradient itself is not an object. To my knowledge, it can have no dimensions. You can't have a gradient by itself. It has to have an object to fill.
If you have a rectangle with a gradient, and you drag one stop away and outside the rectangle, the gradient still does not extend outside the rectangle.
Hhhmmm....are you looking to determine the exact color and opacity of any given point along the gradient? Is that what you're asking?
Anyone else? Feel free to jump right in
!
Do you want to write some kind of code? do something with gradients from command line? create a gradient by writing XML?? Why do you present paramenters of a gradient to developers? Do you mean developers of Inkscape or developers of some other program that you're using Inkscape with?
The gradient itself is not an object. To my knowledge, it can have no dimensions. You can't have a gradient by itself. It has to have an object to fill.
If you have a rectangle with a gradient, and you drag one stop away and outside the rectangle, the gradient still does not extend outside the rectangle.
Hhhmmm....are you looking to determine the exact color and opacity of any given point along the gradient? Is that what you're asking?
Anyone else? Feel free to jump right in

Basics - Help menu > Tutorials
Manual - Inkscape: Guide to a Vector Drawing Program
Inkscape Community - Inkscape FAQ - Gallery
Inkscape for Cutting Design
Manual - Inkscape: Guide to a Vector Drawing Program
Inkscape Community - Inkscape FAQ - Gallery
Inkscape for Cutting Design
Re: Representing linear gradients
I doubt there is a quick way to get what you want. Your best bet is to make the gradient, play with the handles until you like what you have. Select the object and make a bitmap copy (alt-B). Now select the original object and open the gradient editor. Move the handles to the edges of your object using snapping as described by brynn. Select one stop handle, then use the dropper tool to select the color from the appropriate edge of your bitmap copy. Repeat for the other edge.
This method will work best for gradients with only two stops.
This method will work best for gradients with only two stops.
-
- Posts: 5
- Joined: Tue Mar 13, 2012 5:17 am
Re: Representing linear gradients
Yes, I think this is probably the only way.
"are you looking to determine the exact color and opacity of any given point along the gradient"
Yes. This is what I'm after, as an XML definition. But it seems that having designed the object, I should probably take the bitmap route suggested by llogg.
Thanks for your help.
Ed
"are you looking to determine the exact color and opacity of any given point along the gradient"
Yes. This is what I'm after, as an XML definition. But it seems that having designed the object, I should probably take the bitmap route suggested by llogg.
Thanks for your help.
Ed
Re: Representing linear gradients
Dropper tool has two options on its tool bar - Pick and Assign. When both active, dropper tool will grab exact color and transparency and assign it in further use.
- Make desired gradient
- "D" or "F7" to chose Dropper tool / activate Pick and Assign on tool bar / pick desired color
- create any new shape and it will be filled with previously grabbed/picked one from Dropper tool.
p.s.
Check Inkscape guide from Bryns signature (middle one) and look for Dropper tool for some more info.
- Make desired gradient
- "D" or "F7" to chose Dropper tool / activate Pick and Assign on tool bar / pick desired color
- create any new shape and it will be filled with previously grabbed/picked one from Dropper tool.
p.s.
Check Inkscape guide from Bryns signature (middle one) and look for Dropper tool for some more info.
Re: Representing linear gradients
I don't understand the need to convert to raster (bitmap). The dropper tool works the same way on vector or raster.
Basics - Help menu > Tutorials
Manual - Inkscape: Guide to a Vector Drawing Program
Inkscape Community - Inkscape FAQ - Gallery
Inkscape for Cutting Design
Manual - Inkscape: Guide to a Vector Drawing Program
Inkscape Community - Inkscape FAQ - Gallery
Inkscape for Cutting Design
Re: Representing linear gradients
But the bitmap is static and not effected by changing the gradient handles.
Re: Representing linear gradients
I guess I still don't understand the problem 

Basics - Help menu > Tutorials
Manual - Inkscape: Guide to a Vector Drawing Program
Inkscape Community - Inkscape FAQ - Gallery
Inkscape for Cutting Design
Manual - Inkscape: Guide to a Vector Drawing Program
Inkscape Community - Inkscape FAQ - Gallery
Inkscape for Cutting Design
Re: Representing linear gradients
You can only select one color at a time with the dropper. You can only move one handle of the gradient at a time. He wants a gradient that is defined by the edges of the object but often doesn't get the look he needs until he extends or otherwise plays with the gradient handles. If he then uses the dropper to select the color at the edge of the object and then applies that color to one gradient stop, the gradient will change. Moving the handle to the edge of the object changes the gradient some more. Unless the other handle of the gradient was already at the edge of the object the color of the gradient at the edge of the object is now different than when he had it just as he wanted it. The only way around that is to make the "just so" gradient static, i.e. unchanging when he moves the gradient handles one at a time.
Re: Representing linear gradients
Oh, I didn't realize that both gradient handles were being moved. I thought it was just one end of the gradient that needed changing.
Thanks for explaining
Thanks for explaining

Basics - Help menu > Tutorials
Manual - Inkscape: Guide to a Vector Drawing Program
Inkscape Community - Inkscape FAQ - Gallery
Inkscape for Cutting Design
Manual - Inkscape: Guide to a Vector Drawing Program
Inkscape Community - Inkscape FAQ - Gallery
Inkscape for Cutting Design
Re: Representing linear gradients
If I understand the problem correctly, here's another approach that might be quicker or easier than using the dropper tool:
1) Draw your object, with gradient, and position the gradient handles where you want them. I'm going to assume they're both outside the edges of the object.
2) Select the
tool. Zoom in and double click on the gradient line where it crosses your object boundary to create a new stop in the gradient. Repeat for the other crossing point.
3) Still using
select one of the end stops by clicking on it. Press the Delete key to remove it. Repeat for the other end stop.
1) Draw your object, with gradient, and position the gradient handles where you want them. I'm going to assume they're both outside the edges of the object.
2) Select the

3) Still using

Re: Representing linear gradients
Much more elegant approach, Xav.
Re: Representing linear gradients
^ +1
I was under impression that underlying color plays some part in the whole thing.
I was under impression that underlying color plays some part in the whole thing.