title: Moving svg style properties inline
body: <p>In Mapbox Studio, svg images with color are imported as black and white. According to the <a href="https://www.mapbox.com/help/studio-troubleshooting-svg/#black-images-with-no-color" rel="nofollow noreferrer">troubleshooting website</a>:</p>
  
  <blockquote>
    <p>If you are able to add your SVG to Mapbox Studio, but appears black,
    it’s likely because you are using  tags to assign style
    properties rather than using inline style attributes. Mapbox Studio
    does not support style properties added in  tags.</p>
  </blockquote>
  
  <p>I am new to editing svgs - how would one assign style properties inline? </p>
  
  <p>My svg code is below:</p>
  
  <pre><code>&lt;svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22.56 28.71"&gt;
      &lt;defs&gt;
          &lt;style&gt;
              .cls-1{fill:#f15824;}
          &lt;/style&gt;
      &lt;/defs&gt;
      &lt;title&gt;black_only_v3&lt;/title&gt;
      &lt;g id="svg_9" data-name="svg 9"&gt;
          &lt;g id="svg_5" data-name="svg 5"&gt;
              &lt;g id="svg_6" data-name="svg 6"&gt;
                  &lt;path id="svg_7" data-name="svg 7" d="M1.55,15.54C2.71,19,5.46,24,12,28.71,18.56,24,21.3,19,22.45,15.54a11.23,11.23,0,0,0,.83-4.14.59.59,0,0,0,0-.12h0a11.28,11.28,0,1,0-22.56,0s0,0,0,.12A11.19,11.19,0,0,0,1.55,15.54ZM12,2.79a8.7,8.7,0,1,1-8.7,8.7A8.69,8.69,0,0,1,12,2.79Z" transform="translate(-0.72 0)"/&gt;
              &lt;/g&gt;
          &lt;/g&gt;
          &lt;polygon id="svg_8" data-name="svg 8" class="cls-1" points="11.31 8.14 4.42 11.58 9.59 11.58 11.31 15.03 18.19 11.58 13.03 11.58 11.31 8.14"/&gt;
      &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>