title: Imagemagick flips direction of LinearGradient
body: <p>I've implemented a go script that generates a custom playing card based on a json input file. The output is svg. In order to print the card, I need to convert it to png. Therefore I installed ImageMagick.</p>
  
  <p>I'm using the convert command line tool:</p>
  
  <pre><code>convert output.svg output.png
  </code></pre>
  
  <p>This is the svg markup:</p>
  
  <pre><code>&lt;?xml version="1.0"?&gt;
  &lt;!-- Generated by SVGo --&gt;
  &lt;svg width="630" height="891"
       xmlns="http://www.w3.org/2000/svg" 
       xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
  &lt;defs&gt;
  &lt;linearGradient id="h" x1="0%" y1="100%" x2="0%" y2="0%"&gt;
  &lt;stop offset="0%" stop-color="red" stop-opacity="1.00"/&gt;
  &lt;stop offset="100%" stop-color="rgb(255,255,255)" stop-opacity="1.00"/&gt;
  &lt;/linearGradient&gt;
  &lt;/defs&gt;
  &lt;rect x="0" y="0" width="630" height="891" style="fill:black"/&gt;
  &lt;rect x="10" y="10" width="610" height="871" style="fill:url(#h)"/&gt;
  &lt;text x="20" y="89" style="fill:black;font-size:30pt;text-anchor:start"&gt;1 Sold&lt;/text&gt;
  &lt;text x="610" y="89" style="fill:black;font-size:30pt;text-anchor:end"&gt;Gegenstand&lt;/text&gt;
  &lt;line x1="20" y1="98" x2="610" y2="98" style="stroke:black;stroke-width:3"/&gt;
  &lt;text x="20" y="151" style="font-family:monospace;fill:black;font-size:25pt;text-anchor:start"&gt;Bogen&lt;/text&gt;
  &lt;text x="20" y="534" style="fill:black;font-size:20pt;text-anchor:start"&gt;Wird in einer Schmiede hergestellt&lt;/text&gt;
  &lt;text x="20" y="579" style="fill:black;font-size:20pt;text-anchor:start"&gt;&lt;/text&gt;
  &lt;text x="20" y="623" style="fill:black;font-size:15pt;text-anchor:start"&gt;Vor dem Kampf hat der Bogenschütze eine Wahrscheinlichkeit&lt;/text&gt;
  &lt;text x="20" y="641" style="fill:black;font-size:15pt;text-anchor:start"&gt;von 4,5,6 dass der dem Gegner einen Lebenspunkt abzieht&lt;/text&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>If you paste this in an svg file and open it in your browser, you can see that the background is a rect with a lineargradient. The bottom of the card is red and towards the top it slowly turns to white. After converting the file to png, it looks like this:</p>
  
  <p><img src="https://i.stack.imgur.com/PFlFP.png" alt="enter image description here"></p>
  
  <p>The language on the card is German, but the text is not important. It is rendered correctly. The problem is the inverted gradient. At first I designed the cards with Gimp but then I decided to automate the process. Unfortunately I already printed a lot of these cards and would like to keep the layout consistent.</p>
  
  <p>I'm rather sure that the flipped gradient is not my fault. Chrome, Firefox and Internet Explorer display the same image. Maybe my usage of ImageMagick is wrong ?</p>
  
  <p>Could you recommend an alternative tool ?</p>