W3C home > Mailing lists > Public > www-svg@w3.org > August 2011

On toDataURL and accumulate

From: Charles Pritchard <chuck@visc.us>
Date: Fri, 19 Aug 2011 11:40:45 -0700
Message-ID: <4E4EAE2D.4040502@visc.us>
To: "www-svg@w3.org" <www-svg@w3.org>
Bit of an amateurish question here: has anyone experience in using the 
accumulate features
with SVG Filter Effects. My interpretation of background accumulation 
suggests that it is
possible to use SVG FE to rasterize and maintain a render-tree.

By combination of enable-background:new and <discard>, it seems to me
that SVG would behave as an immediate mode canvas, which still of course,
retaining its DOM (which could be removed via scripting).

The example in SVG FE 1.1 is not working in WebKit (the accumulate example),
so I'm not able to do a quick test.

GPAX+MP4Box showed me the <discard> element, this whole time I was in 
the dark.

Now, if I am -somewhat- correct about enable-background, then it seems
we could get a clear path to having toDataURL support on live SVG 
documents (vs. <img src="SVG">).

Considerations
a) the author does have to signal rasterization first (via 
enable-background),
b) the hook would be placed only on <g>, SVGGElement -- it's not something
we want to add to the SVGElement generic.
c) same-origin checks can really pile up, and they're not something 
currently handled in CSS, so we really want
to tread lightly there. enable-background: new would set an 
implementation flag letting
the interpreter know that it needs to have an internal same-origin flag 
on the filter results.
d) toDataURL is an old method. The toBlob method described in the 
current Canvas element
is more appropriate for this case. And, considering that the rendering 
may be on the GPU, it's
perhaps the only appropriate method. Blob works fine with base64 output, 
nothing is lost,
so I strongly suggest that we use toBlob to pull raster data from SVG.
e) discard is valuable, I'm still looking for graceful uses in this scheme.

<defs><filter>...</filter></defs>
<g enable-background="new" id="filterExample">
<g filter="url..." />
<discard begin="2s" /> <!-- take snapshot of the raster at 2 seconds 
into animation, discard the rest -->
</g>


filterExample.toBlob(function(file) { ... });

Note that styles set on the accumulation <g> element should-not apply 
(afaik)
to the rendering.
<g style="fill: red" enable-background="new"> <!-- the red will not be 
in the raster image -->




-Charles
Received on Friday, 19 August 2011 18:41:50 GMT

This archive was generated by hypermail 2.3.1 : Friday, 8 March 2013 15:54:49 GMT