CODEWITHSUNDEEP
svgsvg-filters
Nrc
Nrc

Reputation: 9797

Svg does not work in Safari and Firerox

I have an svg created with Inkscape. I can see well the img in the original program Inkscape, it's also ok in Chrome but I see nothing in Safari and Firefox.

I tried to find the problem making a copy and make the document as simple as possible. I end up with just the letter "p" convert to a path.

Then I tried to reproduce the error and I create a new svg document with Inkscape and I draw anything, like a "p" converted to a path. It works well in all browsers.

If I open the wrong svg with a code editor this is what I see:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="180"
   height="180"
   viewBox="0 0 47.625001 47.625001"
   version="1.1"
   id="svg8"
   inkscape:version="0.92.2 5c3e80d, 2017-08-06"
   sodipodi:docname="p.svg"
   enable-background="new"
   inkscape:export-filename="/Users/narcis/Dropbox/feines/business/projectes/want/want-web/want-parts/svg/p.png"
   inkscape:export-xdpi="300"
   inkscape:export-ydpi="300">
  <defs
     id="defs2">
    <filter
       inkscape:collect="always"
       style="color-interpolation-filters:sRGB"
       id="filter853">
      <feBlend
         inkscape:collect="always"
         mode="color-burn"
         in2="BackgroundImage"
         id="feBlend855" />
    </filter>
  </defs>
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="1"
     inkscape:cx="90"
     inkscape:cy="90"
     inkscape:document-units="mm"
     inkscape:current-layer="layer1"
     showgrid="false"
     showguides="false"
     inkscape:guide-bbox="true"
     inkscape:window-width="1592"
     inkscape:window-height="915"
     inkscape:window-x="0"
     inkscape:window-y="1"
     inkscape:window-maximized="0"
     units="px" />
  <metadata
     id="metadata5">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title />
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1"
     transform="translate(0,-249.37498)"
     style="filter:url(#filter853);opacity:1">
    <path
       inkscape:connector-curvature="0"
       id="path818"
       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:35.27777863px;line-height:125.99999905%;font-family:futura;-inkscape-font-specification:'futura Bold';letter-spacing:0px;word-spacing:0px;fill:#020202;fill-opacity:1;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       d="m 27.693056,269.00706 q 0,-0.84667 -0.3175,-1.5875 -0.282222,-0.77611 -0.846667,-1.34056 -0.564444,-0.56444 -1.340556,-0.88194 -0.740833,-0.35277 -1.622777,-0.35277 -0.846667,0 -1.5875,0.31749 -0.740834,0.3175 -1.305278,0.88194 -0.529167,0.56446 -0.881945,1.34056 -0.3175,0.74083 -0.3175,1.5875 0,0.84667 0.3175,1.5875 0.3175,0.74083 0.881945,1.30528 0.564444,0.52916 1.305278,0.88194 0.776111,0.3175 1.622777,0.3175 0.846667,0 1.5875,-0.3175 0.740834,-0.3175 1.270001,-0.88194 0.564444,-0.56445 0.881944,-1.30528 0.352778,-0.74083 0.352778,-1.55222 z M 19.649722,287.034 h -6.385278 v -27.12861 h 6.385278 v 2.01083 q 2.046111,-2.57527 5.573889,-2.57527 1.940278,0 3.598334,0.77612 1.693333,0.74083 2.928055,2.04611 1.234723,1.30527 1.905,3.06916 0.705556,1.76388 0.705556,3.77472 0,2.01083 -0.705556,3.73945 -0.670277,1.72861 -1.905,3.03388 -1.199444,1.30528 -2.8575,2.04611 -1.658055,0.74084 -3.598333,0.74084 -3.386667,0 -5.644445,-2.32834 z" />
  </g>
</svg>

Here is the code of the file that I reproduced and works well in all browsers:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="180"
   height="180"
   viewBox="0 0 47.624999 47.625001"
   version="1.1"
   id="svg4510"
   inkscape:version="0.92.2 5c3e80d, 2017-08-06"
   sodipodi:docname="p-be.svg">
  <defs
     id="defs4504" />
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="1"
     inkscape:cx="-50.54196"
     inkscape:cy="90"
     inkscape:document-units="mm"
     inkscape:current-layer="layer1"
     showgrid="false"
     units="px"
     inkscape:window-width="1920"
     inkscape:window-height="1035"
     inkscape:window-x="67"
     inkscape:window-y="36"
     inkscape:window-maximized="0" />
  <metadata
     id="metadata4507">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title />
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1"
     transform="translate(0,-249.37498)">
    <g
       aria-label="p"
       style="font-style:normal;font-weight:normal;font-size:5.29166651px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       id="text5057">
      <path
         d="m 27.693056,269.00707 q 0,-0.84667 -0.3175,-1.5875 -0.282223,-0.77612 -0.846667,-1.34056 -0.564445,-0.56444 -1.340556,-0.88194 -0.740833,-0.35278 -1.622777,-0.35278 -0.846667,0 -1.587501,0.3175 -0.740833,0.3175 -1.305277,0.88194 -0.529167,0.56445 -0.881945,1.34056 -0.3175,0.74083 -0.3175,1.5875 0,0.84666 0.3175,1.5875 0.3175,0.74083 0.881945,1.30528 0.564444,0.52916 1.305277,0.88194 0.776112,0.3175 1.622778,0.3175 0.846667,0 1.5875,-0.3175 0.740834,-0.3175 1.27,-0.88194 0.564445,-0.56445 0.881945,-1.30528 0.352778,-0.74084 0.352778,-1.55222 z m -8.043334,18.02694 H 13.264444 V 259.9054 h 6.385278 v 2.01083 q 2.046111,-2.57528 5.573889,-2.57528 1.940278,0 3.598334,0.77612 1.693333,0.74083 2.928055,2.04611 1.234722,1.30527 1.905,3.06916 0.705556,1.76389 0.705556,3.77473 0,2.01083 -0.705556,3.73944 -0.670278,1.72861 -1.905,3.03389 -1.199444,1.30528 -2.8575,2.04611 -1.658056,0.74083 -3.598333,0.74083 -3.386667,0 -5.644445,-2.32833 z"
         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:35.27777863px;font-family:Futura;-inkscape-font-specification:'Futura Bold';stroke-width:0.26458332px"
         id="path814" />
    </g>
  </g>
</svg>

I know nothing about svg code. Can anyone tell me what's wrong and why that svg has problems with Safari and Firefox?

Upvotes: 0

Views: 321

Answers (1)

ccprog
ccprog

Reputation: 21876

You are using a filter that contains the primitive

<feBlend in2="BackgroundImage" mode="color-burn" />

The Blend mode color-burn has been part of Inkscape for some time, but it is not defined in the SVG 1.1 specification. For the SVG 2 spec, filter effects have been moved to CSS Filter Effects. The blend mode is defined there, but not yet implemented by all browsers.

But that is a secondary problem. The main issue is the attempt to use a background image as a source for blending. I am not aware of this working anywhere yet. Currently, filters only support the use of the source graphic, its transparency, fill or stroke as input.

If you want to use anything but the source graphic as an input to compositing, you'll have to import it via an <feImage> filter primitive as described here.

What you probably did in Inkscape to introduce that filter was to open the Layer->Layers... editor and select Blend mode: "Coror burn". Select "Normal" to delete the filter. No other selection will work outside of Inkscape.

Upvotes: 2

Related Questions