Saturday, May 24, 2014

Inkscape vs. Browser SVG Filter Postioning

I ended last night's Polymer / SVG effort with a problem. Not so much a Polymer problem as an SVG problem. I have some fairly simple DOM animation triggered by mouse-overs:

All of this works, except the stinking drop shadow filter, which is getting clipped. This seemed a simple problem at first—I assumed that I only needed to resize the SVG “pepperoni” in my <x-pizza> pizza building custom element. But no matter how I resized the SVG—attributes, style, mucking with the SVG itself, or even trying it different browsers—I could not get the shadow to be unclipped. I am honestly tempted to just drop it (yeah, I said it) and move on to other, more Polymer-y things. But darn it, why won't it unclip? (declip?)

Happily, Emanuele Sabetta had a suggestion in last night's comments. Instead of fiddling with the elements attributes, perhaps I need to change the filter attributes.

So I fire up Inkscape again, open my pepperoni SVG file, and start the Filter Editor (Filters → Filter Editor…):

First off, wow. That is a lot of filtering for a simple drop shadow. Looking through it, I can understand why some of it is needed, but two blurs? Anyhow, after recovering from filter astonishment, I see that the filter area (the dashed box) does seem to clip some of the drop shadow. Hopefully this is the problem. I change the width and height to 1.5—it would seem that is 1.5× the path being shadowed, not the entire image. I then adjust the center of the filter accordingly so that it still encompasses the area that I would like to see the effect:

Checking the resulting XML in Inkscape's XML Editor, I see that this results in three new attributes to the filter:

Well, heck. I can type those in myself in the SVG being used in <x-pizza>:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape ( -->
      <!-- ... -->
  <!-- ... -->
And, when I reload that in the browser, I find:

Arrrgh! Are you kidding me?! It's still clipped!

Ah, but it is not clipped as much, and not at all in the x-direction. So I change the height to 2.5, reload and...

<Sniff>. It's so beautiful!

I am unsure why there is a discrepancy between Inkscape's bounding area in the Filter Editor and the area that is actually clipped in the image. I trial-and-error the actual lower limit of the height and y-position of the filter to find:
So fiddling with the values in Inkscape's Filter Editor put me on the right track, but only manual intervention got me the full solution:

No matter how I got the solution, I will take it.

Day #73

1 comment:

  1. Cool!
    So now we can just add the html custom element:

    to any html page, and it will works without any additional code? Allowing us to add or remove toppings?