SVG path with gradient

Question

Currently, I have a script (through .py plug-ins in GIMP) that can generate an SVG path with a gradient (emulated by having multiple paths of the same path of varying widths and

Answer 1

It is not completely impossible, but you are restricted to pretty elementary cases and you have to jump through some pretty complicated hoops.

SVG knows only two types of gradients: linear and radial. You can align a linear gradient with a straight line, and a radial gradient with a circle or an arc with equal axis.

So you will need to cut up every path into individual segments and, if you need to connect straight lines, convert lines to polygons to provide for corners.

<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="200" >
  <defs>
    <linearGradient id="rainbow">
       <stop stop-color="rgb(255,0,0)"   offset="0.8" />
       <stop stop-color="rgb(255,128,0)" offset="0.825" />
       <stop stop-color="rgb(255,255,0)" offset="0.85" />
       <stop stop-color="rgb(128,255,0)" offset="0.875" />
       <stop stop-color="rgb(0,255,0)"   offset="0.9" />
       <stop stop-color="rgb(0,240,68)"  offset="0.925" />
       <stop stop-color="rgb(0,160,168)" offset="0.95" />
       <stop stop-color="rgb(0,0,255)"   offset="0.975" />
       <stop stop-color="rgb(255,0,255)" offset="1" />
    </linearGradient>
    <radialGradient xlink:href="#rainbow" gradientUnits="userSpaceOnUse" cx="60" cy="100" r="50" fx="60" fy="100" id="rg1" />
    <radialGradient xlink:href="#rainbow" gradientUnits="userSpaceOnUse" cx="140" cy="100" r="50" fx="140" fy="100" id="rg2" />
    <linearGradient xlink:href="#rainbow" gradientUnits="userSpaceOnUse" x1="100" y1="100" x2="100" y2="50" id="lg1" />
    <linearGradient xlink:href="#rainbow" gradientUnits="userSpaceOnUse" x1="100" y1="100" x2="100" y2="150" id="lg2" />
    <linearGradient xlink:href="#rainbow" gradientUnits="userSpaceOnUse" x1="50" y1="100" x2="100" y2="100" id="lg3" />
  </defs>
  <path fill="none" stroke="url(#rg1)" stroke-width="10" d="M 60 55 A 45 45 0 0 0 60 145" />
  <path fill="none" stroke="url(#rg2)" stroke-width="10" d="M 140 55 A 45 45 0 0 1 140 145" />
  <path fill="none" stroke="url(#lg1)" stroke-width="10" d="M 60 55 140 55" />
  <path fill="none" stroke="url(#lg2)" stroke-width="10" d="M 60 145 100 145" />
  <polygon fill="url(#lg3)" points="90 80 100 80 100 150 90 140" />
</svg>