Working with SVG files dynamically

Question

Working with SVG files dynamically

I am developing a Web page where I use numerous CSS effects. between one of them I realized that I can not ultilize the filters in Firefox. Searching the internet I found some solutions that tell me to use SVG files. The problem is when I need to use 2 filters in the same element, for example invert the color of an image and put shadow. In Chrome I can do it this way:

div img{
  -webkit-filter: invert(100%) drop-shadow(0.2em 0.1em 0.3em #000);
}

When using 2 SVG in firefox, it bugs, sometimes it shows one effect, sometimes it shows another effect, sometimes it doesn't, as if it depends on which SVG is loaded last and overlays the first.

How to resolve this impasse?

One of the class I use to turn an image into black and white

.grayscale {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
    filter: grayscale(100%);    
    -webkit-filter: grayscale(100%);
}

5

svg css3 html5 firefox

Author: LeandroLuk, 2013-12-13

Source

1 answers

score 1 · Accepted Answer

Firefox still does not support CSS filters. So to increase compatibility, you should create a -webkit-filter to work in Chrome, Safari, and other WebKit-based browsers, and an equivalent SVG filter for Firefox (as in your .grayscale example).

I also couldn't apply two SVG filters on the same element in Firefox directly. You have two options:

create a filter that combines the two effects (e.g. invert and drop-shadow), or
place the image inside a <div> and apply an SVG filter on the <div> (e.g. drop-shadow) and another on the image (invert).

For Option 1, you can use an SVG file editing program, such as Inkscape. Simply import your image, apply the desired Filters (menu Filters), save as SVG, open the file in a text editor, and copy the tag <filter> into an element <svg> in your HTML.

Option 2 can be illustrated for the following example:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style type="text/css">
      .invert-shadow {
        /* Firefox */
        filter: url(#invert);
        /* Chrome, Safari */
        -webkit-filter: invert(100%) drop-shadow(0.2em 0.1em 0.3em #000);
      }
      .shadow {
        /* Firefox */
        filter: url(#shadow);
      }
    </style>
  </head>
  <body>
    <div class="shadow">
      <img class="invert-shadow" src="http://blog.stackoverflow.com/wp-content/uploads/stackoverflow-logo-300.png" />
    </div>

    <svg>
      <filter id="invert">
        <feColorMatrix in="SourceGraphic" type="matrix" 
          values="-1  0  0 0 1 
                   0 -1  0 0 1 
                   0  0 -1 0 1
                   0  0  0 1 0"/>
      </filter>
      <filter id="shadow">
        <feOffset result="offOut" in="SourceAlpha" dx="2" dy="2" />
        <feGaussianBlur result="blurOut" in="offOut" stdDeviation="1" />
        <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
      </filter>
    </svg>
  </body>
</html>