Asked  7 Months ago    Answers:  5   Viewed   59 times

Placing the SVG output directly inline with the page code I am able to simply modify fill colors with CSS like so:

polygon.mystar {
    fill: blue;
}?

circle.mycircle {
    fill: green;
}

This works great, however I'm looking for a way to modify the "fill" attribute of an SVG when it's being served as a BACKGROUND-IMAGE.

html {      
    background-image: url(../img/bg.svg);
}

How can I change the colors now? Is it even possible?

For reference, here are the contents of my external SVG file:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="320px" height="100px" viewBox="0 0 320 100" enable-background="new 0 0 320 100" xml:space="preserve">
<polygon class="mystar" fill="#3CB54A" points="134.973,14.204 143.295,31.066 161.903,33.77 148.438,46.896 151.617,65.43 134.973,56.679 
    118.329,65.43 121.507,46.896 108.042,33.77 126.65,31.066 "/>
<circle class="mycircle" fill="#ED1F24" cx="202.028" cy="58.342" r="12.26"/>
</svg>

 Answers

39

One way to do this is to serve your svg from some server side mechanism. Simply create a resource server side that outputs your svg according to GET parameters, and you serve it on a certain url.

Then you just use that url in your css.

Because as a background img, it isn't part of the DOM and you can't manipulate it. Another possibility would be to use it regularly, embed it in a page in a normal way, but position it absolutely, make it full width & height of a page and then use z-index css property to put it behind all the other DOM elements on a page.

Tuesday, June 1, 2021
 
rypskar
answered 7 Months ago
92

Here's an example of applying dropshadow to some svg using the 'filter' property. If you want to control the opacity of the dropshadow have a look at this example. The slope attribute controls how much opacity to give to the dropshadow.

Relevant bits from the example:

<filter id="dropshadow" height="130%">
  <feGaussianBlur in="SourceAlpha" stdDeviation="3"/> <!-- stdDeviation is how much to blur -->
  <feOffset dx="2" dy="2" result="offsetblur"/> <!-- how much to offset -->
  <feComponentTransfer>
    <feFuncA type="linear" slope="0.5"/> <!-- slope is the opacity of the shadow -->
  </feComponentTransfer>
  <feMerge> 
    <feMergeNode/> <!-- this contains the offset blurred image -->
    <feMergeNode in="SourceGraphic"/> <!-- this contains the element that the filter is applied to -->
  </feMerge>
</filter>
<circle r="10" style="filter:url(#dropshadow)"/>

Box-shadow is defined to work on CSS boxes (read: rectangles), while svg is a bit more expressive than just rectangles. Read the SVG Primer to learn a bit more about what you can do with SVG filters.

Tuesday, June 1, 2021
 
Optimus
answered 7 Months ago
79

You use an addtional attribute; fill-opacity: This attribute takes a decimal number between 0.0 and 1.0, inclusive; where 0.0 is completely transparent.

For example:

<rect ... fill="#044B94" fill-opacity="0.4"/>

Additionally you have the following:

  • stroke-opacity attribute for the stroke
  • opacity for the entire object
Friday, June 11, 2021
 
PeterTheLobster
answered 6 Months ago
62

# in URLs starts a fragment identifier. So, in order to make that work, write %23 instead of #. That is the value of escaped # character.

background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='10' ><path fill='%23FF0000' d='M 0,10 H 20 L 10,0 Z' /></svg>")  repeat-x;

You can find it all well explained on following link: https://codepen.io/gunnarbittersmann/pen/BoovjR

Saturday, September 25, 2021
 
David
answered 3 Months ago
53

In SVG, filters are supposed to be using the Linear RGB colour space by default. However it appears as if Chrome is hardwired to using the sRGB colour space when fi;ltering <video> elements. I'm not sure why - it's possibly/probably a bug.

You can get Firefox to behave the same as Chrome, by specifying

color-interpolation-filters="sRGB"

on your filter. Unfortunately, Chrome ignores you if you try to force it to use the LinearRGB colour space (color-interpolation-filters="linearRGB").

And you can hide your SVG filter in the page by specifying a zero width and height on the <svg> element.

<video autoplay controls muted src=" https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" style="width: 488px; height: 360px; filter: url(#temperature_filter)">
</video>

<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
  <filter id="temperature_filter" color-interpolation-filters="sRGB">
    <feColorMatrix type="matrix" values="1 0 0 0 0 0 0.694 0 0 0 0 0 0.431 0 0 0 0 0 1 0"></feColorMatrix>
  </filter>
</svg>

https://jsfiddle.net/fyy5wrkw/8/

Wednesday, December 1, 2021
 
Goudgeld1
answered 1 Week ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :
 
Share