title: Sketch SVG Linear Gradient is black instead of white in the browser
body: <p>I have a simple SVG that I have drawn is Sketch 2.</p>
  
  <p>The shape is a simple skewed rectangle, that has a linear gradient, from top to bottom. White at the top, with 75% opacity, and white at the bottom too, with 0% opacity.</p>
  
  <p><img src="https://i.stack.imgur.com/FFUYB.png" alt="enter image description here"></p>
  
  <p>I have added a grey background in the example above, so you can see the shape and liner gradient.</p>
  
  <p>My problem is, when I export the SVG, and use it as a <code>background-image</code> in CSS, the white changes to black.</p>
  
  <p>Here is the SVG that is exported from Sketch:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8" standalone="no"?&gt;
  &lt;svg width="150px" height="50px" viewBox="0 0 150 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"&gt;
      &lt;title&gt;Untitled&lt;/title&gt;
      &lt;description&gt;Created with Sketch (http://www.bohemiancoding.com/sketch)&lt;/description&gt;
      &lt;defs&gt;
          &lt;linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1" stop-color="#FFFFFF"&gt;
              &lt;stop stop-opacity="0.75" offset="0%"&gt;&lt;/stop&gt;
              &lt;stop stop-opacity="0" offset="100%"&gt;&lt;/stop&gt;
          &lt;/linearGradient&gt;
      &lt;/defs&gt;
      &lt;g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage"&gt;
          &lt;path d="M100.099413,0 L0,0 L49.9005867,50 L150,50 L100.099413,0 Z" id="Rectangle-1" fill="url(#linearGradient-1)" sketch:type="MSShapeGroup"&gt;&lt;/path&gt;
      &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>And here is the minified SVG:</p>
  
  <pre><code>&lt;svg width="150" height="50" viewBox="0 0 150 50" xmlns="http://www.w3.org/2000/svg"&gt;&lt;title&gt;Untitled&lt;/title&gt;&lt;defs&gt;&lt;linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="a" stop-color="#fff"&gt;&lt;stop stop-opacity=".75" offset="0%"/&gt;&lt;stop stop-opacity="0" offset="100%"/&gt;&lt;/linearGradient&gt;&lt;/defs&gt;&lt;g fill="none" fill-rule="evenodd"&gt;&lt;path d="M100.1 0H0l49.9 50H150L100.1 0z" fill="url(#a)"/&gt;&lt;/g&gt;&lt;/svg&gt;
  </code></pre>
  
  <p>I cannot for the life of me figure out why this would appear like this; the SVG looks correct to me. Why would the SVG render as a negative in the browser?</p>
  
  <p>Just for clarification, when I reopen either the exported or minified SVG in Sketch again, it is rendered correctly (a white liner gradient).</p>
  
  <p>Any help with this would be much appreciated.</p>
  
  <p>Thank you!</p>