How to colour this SVG?


#1

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>

#2

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>

#3

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


#4

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


#5

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


#6

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.


#7

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>