search

piqnt / svgexport

SVG to PNG/JPEG command-line tool and Node.js module
927 stars 85 forks source link

Modifying fill via CSS class names #63

Open kodie opened 6 years ago

kodie commented 6 years ago

I have an SVG like this:

<svg id="Icon_BG" data-name="Icon BG" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 288 288">
  <defs>
    <style>
      .cls-1 {
        fill: #fff;
      }

      .cls-2 {
        fill: #ff3363;
      }
    </style>
  </defs>
  <title>app-icon</title>
  <rect class="cls-1" width="288" height="288" rx="72" ry="72"/>
  <g>
    <path class="cls-2" d="M138.328,197.054a49.029,49.029,0,0,1-30.845-81.5H54v81.818a16.412,16.412,0,0,0,16.364,16.364H192.636a28.222,28.222,0,0,1-6.794,17.983,3.161,3.161,0,0,0,3.3,5.128c17.4-5.823,20.54-23.112,20.54-23.112h7.954A16.412,16.412,0,0,0,234,197.372V115.554H180.517A49.043,49.043,0,0,1,138.328,197.054Z"/>
  </g>
</svg>

You would think that running

svgexport app-icon.svg app-icon.png ".cls-1{fill:#000;}"

would result in the white box turning black however it doesn't. Manually changing the value in the SVG does.

shakiba commented 5 years ago

I think the style is being added at the beginning, so it will be overridden by the value in the file. I guess if you remove the styles from svg it will work.