From: whatwg [] On Behalf Of Anne van 

> Perhaps we could support assigning an SVG filter directly (as an object)? 
> Developers would be responsible to load them if they're external. Adding yet 
> another network API that's a thin layer on top of some CSS syntax seems a 
> little hackish. I'd prefer if we exposed filters at a lower level somehow.

I tend to agree. I don't like that the filter property is now sometimes a 
string, sometimes a CanvasFilter.

Maybe something like `setFilter((DOMString or CanvasFilter) filter)` with the 
readonly `filter` property returning a CanvasFilter all the time? This would 
involve fleshing out CanvasFilter a bit. Strawman:

const filter1 = new CanvasFilter("contrast(50%) blur(3px)");

// filter1 looks like { value: "contrast(50%) blur(3px)", loadedFrom: null }

CanvasFilter.load("file.svg#blur").then(filter2 => {
  // filter2 looks like { value: null, loadedFrom: "file.svg#blur" }

  ctx.strokeText("Canvas", 50, 500);
  assert(ctx.filter === filter1);
  ctx.strokeText("Filters", 50, 100);
  assert(ctx.filter === filter2);
  ctx.strokeText("SVG", 50, 200);

This doesn't really solve Anne's concerns about a new networking API, but I am 
not sure how to do that given that fragments are involved (which are not a 
networking concept, really). Maaaybe you could do something like

fetch("file.svg").then(res => res.blob()).then(blob => {
  const filter2 = CanvasFilter.fromSVG(blob, "#blur");
  // ...


Alternately, is it possible to generically represent a loaded SVG filter as a 
string? Browsing the linked thread it seems unlikely as it may involve further 
external resource fetches etc. But that would help some design space.

Reply via email to