How to colour this SVG?

I am trying to give the this SVG image a colour, without success. I have tried applying CSS styl color to just about everything I can think of. What am I missing?

<?xml version="1.0" encoding="utf-8"?>
<svg
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  id="layer1"
  viewBox="0 0 50 50"
  xml:space="preserve"
  width="50"
  height="50"
  version="1.1">
<polygon points="41,5 41,10.73 35,6.05 35,5 "/>
<path d="M48.79,20.62C48.59,20.87,48.3,21,48,21c-0.22,0-0.43-0.07-0.62-0.21L46,19.71V46c0,0.55-0.45,1-1,1H31V29H19v18H5  c-0.55,0-1-0.45-1-1V19.71l-1.38,1.08c-0.44,0.34-1.07,0.26-1.41-0.17c-0.34-0.44-0.26-1.07,0.17-1.41l23-17.95  c0.37-0.28,0.87-0.28,1.24,0l23,17.95C49.05,19.55,49.13,20.18,48.79,20.62z"/>
</svg>

fill=“red” /*or your choice*/

<?xml version="1.0" encoding="utf-8"?>
<svg
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  id="layer1"
  viewBox="0 0 50 50"
  xml:space="preserve"
  width="50"
  height="50"
  fill="red"
  version="1.1">
<polygon points="41,5 41,10.73 35,6.05 35,5 "/>
<path d="M48.79,20.62C48.59,20.87,48.3,21,48,21c-0.22,0-0.43-0.07-0.62-0.21L46,19.71V46c0,0.55-0.45,1-1,1H31V29H19v18H5  c-0.55,0-1-0.45-1-1V19.71l-1.38,1.08c-0.44,0.34-1.07,0.26-1.41-0.17c-0.34-0.44-0.26-1.07,0.17-1.41l23-17.95  c0.37-0.28,0.87-0.28,1.24,0l23,17.95C49.05,19.55,49.13,20.18,48.79,20.62z"/>
</svg>
2 Likes

Thanks Ray. I’ve been trying with CSS. I though that was possible…

How are you putting the svg in your page, is it linked via img or inlined into the html?

It’s currently linked as an image but I’m thinking of inlining it…

If the svg is linked or embedded from an external file, css won’t work because it can’t touch a linked/embedded file, only the document itself.
To use css on svg you must in-line it into the html document.
That can get messy and hard to maintain, so I only do it when I need to use css and my other trick is to keep the image as a separate independant file and insert it as a php include, best of both worlds, a separate file, but inlined in the final document.

6 Likes

You can also use CSS directly in the svg…

via the style attribute…

<rect x="10" height="180" y="10" width="180" style="stroke: black; fill: red;"/>

For example

<?xml version="1.0" encoding="utf-8"?>

<svg
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  id="layer1"
  viewBox="0 0 50 50"
  xml:space="preserve"
  width="50"
  height="50"
  version="1.1">
<polygon points="41,5 41,10.73 35,6.05 35,5"  style="fill: green;"/>
<path style="fill: red;" d="M48.79,20.62C48.59,20.87,48.3,21,48,21c-0.22,0-0.43-0.07-0.62-0.21L46,19.71V46c0,0.55-0.45,1-1,1H31V29H19v18H5  c-0.55,0-1-0.45-1-1V19.71l-1.38,1.08c-0.44,0.34-1.07,0.26-1.41-0.17c-0.34-0.44-0.26-1.07,0.17-1.41l23-17.95  c0.37-0.28,0.87-0.28,1.24,0l23,17.95C49.05,19.55,49.13,20.18,48.79,20.62z"/>
</svg>
2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.