How to interpolate hue with svg gradient?
Full hsl gradient 0 - 360
By setting the stops colors at 10% i get a shape close to the image:
<svg height="100%" viewBox="0 0 100 20">
<defs>
<linearGradient id="Gradient2">
<stop offset="0%" stop-color="hsl(0, 100%, 50%)" />
<stop offset="10%" stop-color="hsl(36, 100%, 50%)" />
<stop offset="20%" stop-color="hsl(72, 100%, 50%)" />
<stop offset="30%" stop-color="hsl(108, 100%, 50%)" />
<stop offset="40%" stop-color="hsl(144, 100%, 50%)" />
<stop offset="50%" stop-color="hsl(180, 100%, 50%)" />
<stop offset="60%" stop-color="hsl(252, 100%, 50%)" />
<stop offset="70%" stop-color="hsl(236, 100%, 50%)" />
<stop offset="80%" stop-color="hsl(288, 100%, 50%)" />
<stop offset="90%" stop-color="hsl(324, 100%, 50%)" />
<stop offset="100%" stop-color="hsl(360, 100%, 50%)" />
</linearGradient>
</defs>
<line stroke-width="16" stroke-linecap="round" stroke="url(#Gradient2)" x1="10" y1="10" y2="10.1" x2="90" />
</svg>If you want to see how stops colors at 1% are here is a fiddle created by Harry:
Fiddle
Included with comparison to the 10% stops.
If you think that there are to many stop colors then you could use javascript to add each stop element. But i think that just adding them manually is a better aproach in general.
Color interpolation in SVG is done using the sRGB color space (although you should be able to specify linearRGB but I don't think it's well supported), so you can't do what you want - those HSL colors are converted to sRGB before they're interpolated.
(And technically HSL colors aren't supported in SVG 1.1 - so while this works in Chrome, don't be surprised if it doesn't work everywhere)
Gradient stops every 60 degrees!
Because of how hsl and rgb interact, you will achieve the best results by having gradient stops every 60 degrees on the hue. Adding more stops or in other places, makes the result worse.
Using hex, html color names,rgb, or hsl to define the gradient should all create the same results in a web browser because all of it converts to rgb in the end. I'm not sure about hsl svg compatibility outside web browsers, to be on the safe side I would stick to rgb or hex in most cases.
<svg width=100%>
<rect width=100% height="1em" fill="url(#hslGradient)"/>
<rect width=100% y="1.5em" height="1em" fill="url(#nameGradient)"/>
<rect width=100% y="3em" height="1em" fill="url(#rgbGradient)"/>
<rect width=100% y="4.5em" height="1em" fill="url(#hexGradient)"/>
<defs>
<linearGradient id="hslGradient">
<stop offset=0% stop-color="hsl( 0, 100%, 50%)" />
<stop offset=16% stop-color="hsl( 60, 100%, 50%)" />
<stop offset=33% stop-color="hsl(120, 100%, 50%)" />
<stop offset=50% stop-color="hsl(180, 100%, 50%)" />
<stop offset=66% stop-color="hsl(240, 100%, 50%)" />
<stop offset=83% stop-color="hsl(300, 100%, 50%)" />
<stop offset=100% stop-color="hsl(360, 100%, 50%)" />
</linearGradient>
<linearGradient id="nameGradient">
<stop offset=0% stop-color="red" />
<stop offset=16% stop-color="yellow" />
<stop offset=33% stop-color="lime" />
<stop offset=50% stop-color="cyan" />
<stop offset=66% stop-color="blue" />
<stop offset=83% stop-color="magenta"/>
<stop offset=100% stop-color="red" />
</linearGradient>
<linearGradient id=rgbGradient>
<stop offset=0% stop-color="rgb(255, 0, 0)"/>
<stop offset=16% stop-color="rgb(255,255, 0)"/>
<stop offset=33% stop-color="rgb( 0,255, 0)"/>
<stop offset=50% stop-color="rgb( 0,255,255)"/>
<stop offset=66% stop-color="rgb( 0, 0,255)"/>
<stop offset=83% stop-color="rgb(255, 0,255)"/>
<stop offset=100% stop-color="rgb(255, 0, 0)"/>
</linearGradient>
<linearGradient id=hexGradient>
<stop offset=0% stop-color="#f00"/>
<stop offset=16% stop-color="#ff0"/>
<stop offset=33% stop-color="#0f0"/>
<stop offset=50% stop-color="#0ff"/>
<stop offset=66% stop-color="#00f"/>
<stop offset=83% stop-color="#f0f"/>
<stop offset=100% stop-color="#f00"/>
</linearGradient>
</defs>
</svg>If we are talking about the web, I would personaly just use a css gradient.
html {
background: linear-gradient(to right,
#f00,
#ff0,
#0f0,
#0ff,
#00f,
#f0f,
#f00)
}