SVG object change color from external CSS

Question

I am playing around with SVGs (trying to replace icon fonts with SVG.) I got it to render the image/svg using object tag. However, I can't get it to change color from CSS. Assuming, I prefer coloring it from CSS, is there a way to do that while I use to embed SVG.

   <object class="partnerLogo" type="image/svg+xml" data="assets/logos/sample.svg">
           Your browser does not support SVG
   </object>

CSS, I tried so far:

.partnerLogo {
    width: 100%;
    height: 100px;
    color: red;
    color-fill: red;
}

In sample.svg file, I added, <?xml-stylesheet type="text/css" href="../css/styles.css"?> just before

styles.css is being added to the page.

Thanks!

Answer 1

As far as I know, color in SVG-CSS should be stroke for borders and fill for backgrounds:

.partnerLogo {
  width: 100%;
  height: 100px;
  stroke: red;
  fill: red;
}