title: SVG linear gradient from hue 0 to 360
body: <p><a href="https://i.stack.imgur.com/Hq0IE.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Hq0IE.png" alt="SVG linear gradient" /></a><br />
  <sub>(source: <a href="http://elv1s.ru/files/svg/gradient-hue.png" rel="noreferrer">elv1s.ru</a>)</sub></p>
  <p>What a proper way to do a gradient like this? I tried <a href="http://elv1s.ru/files/svg/gradient-hue.xhtml" rel="noreferrer">this SVG</a>:</p>
  <pre>&lt;linearGradient id="hue" x1="0" y1="1" x2="0" y2="0">
      &lt;stop offset="0%" stop-color="#ff0000"/>
      &lt;stop offset="17%" stop-color="#ffff00"/>
      &lt;stop offset="34%" stop-color="#00ff00"/>
      &lt;stop offset="50%" stop-color="#00ffff"/>
      &lt;stop offset="66%" stop-color="#0000ff"/>
      &lt;stop offset="82%" stop-color="#ff00ff"/>
      &lt;stop offset="100%" stop-color="#ff0000"/>
  &lt;/linearGradient></pre>
  <p>It works, but still not good enough:</p>
  <p><a href="http://elv1s.ru/files/svg/gradient-hue.xhtml" rel="noreferrer"><img src="https://i.stack.imgur.com/VZan5.png" alt="SVG linear gradient" /></a><br />
  <sub>(source: <a href="http://elv1s.ru/files/svg/gradient-hue-reference.png" rel="noreferrer">elv1s.ru</a>)</sub></p>
  <p>I can see the difference between those two gradients. Is there a better way of doing it?</p>