I'm using Inkscape to produce an SVG image which is supposed to reproduce a photo. I have some arbitrarily drawn shape, and I need to shade it. Here's an example photo:

a lump of clay

Here's how I would like to define the shading of the clay in the image above: define the color at a small set of control points, and have the color at every other point in the shape defined by interpolating between those control points. Or more sophisticatedly: define a set of control lines of constant color, so that the other pixels' colors interpolate between these lines. (I don't know what the interpolation algorithm should be; I imagine something like 2D Gouraud shading.)

However, I can't find how to do this. SVG only seems to provide linear and radial gradients. Other people seem to very carefully draw their naturalistic images in SVG using many shapes with combinations of these two shaders. For example:

shaded fish

This method is time-consuming, and only seems to work well for smooth, shiny things with a lot of specular highlights.

Is it possible to do something like my suggested shading method in SVG? I can imagine something which compiles a shading definition like the one I suggested, and produces an SVG approximation.

Alternatively, do technologies outside of SVG provide something like what I suggested?

  • 1
    Sounds like you're describing gradient mesh - not sure if that exists in Inkscape yet though. – user56reinstatemonica8 Jan 2 '15 at 12:31
  • @user568458 aha, a search term! Amazing what you can find once you know the right terminology. Turns out there is an experimental gradient mesh feature in Inkscape. I'll try it out. Thanks! Btw, if you turn your comment into an answer, I'll accept it. – jameshfisher Jan 2 '15 at 12:45
  • 1
    I don't know much about Inkscape - how about, when you find something that works, you post a simple step-by-step of what you did? Looks like there's a lack of Inkscape gradient mesh resources. – user56reinstatemonica8 Jan 2 '15 at 12:48
  • I just found this report which describes exactly what I want, but I can't find an implementation :-( cl.cam.ac.uk/techreports/UCAM-CL-TR-862.pdf – jameshfisher Nov 13 '15 at 10:33
  • I mentioned how to use the gradient mesh in Inkscape in this answer graphicdesign.stackexchange.com/questions/97228/… - it's not an exact duplicate of yours. Does it help? Note that the gradient mesh is not fully implemented in browsers yet. – Billy Kerr Feb 12 '19 at 13:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.