Re: [svg-developers] question about loading svg within and html5 document
- On Thu, Nov 19, 2009 at 3:34 PM, Erik Dahlstrom <ed@...> wrote:
>I got these steps from one comment AndiSkater ( ) by
> On Thu, 19 Nov 2009 09:25:42 +0100, narendra sisodiya
> <narendra.sisodiya@...> wrote:
> > On Thu, Nov 19, 2009 at 1:35 PM, Erik Dahlstrom <ed@...> wrote:
> >> On Wed, 18 Nov 2009 16:34:17 +0100, Bryan Berry <bryan@...>
> >> wrote:
> >> > Is there a way to load an svg element w/out putting it in the html as
> >> an
> >> > element?
> >> Sure, by using XMLHttpRequest for example.
> >> > html5 supports this for behavior audio and images w/
> >> > var audio = new Audio();
> >> > var image = new Image();
> >> >
> >> > audio.src = "someSound.ogg";
> >> > image.src = "someImage.png";
> >> >
> >> > Is/will it be possible to do something similar w/ SVG?
> >> In Opera 10 and later (and probably recent webkit too):
> >> image.src = "someImage.svg";
> > is it part of html5 standard ??
> Support for any particular image format? No, not even png is required. :)
> The fact that you can reference svg images from <img> is noted in the
> HTML5 spec. See http://dev.w3.org/html5/spec/Overview.html#the-img-element
> > I am eagerly waiting for this feature in firefox because this will
> > directly lead to svg to png conversion in firefox.
> > --> draw canvas --> canvas.src="someImage.svg"; --> canvas to png
> > (todataurl)
> There's no src attribute on canvas, but I guess you meant to use
> canvas.drawImage together with an Image that has src="some.svg".
http://ajaxian.com/archives/todataurl-canvas-and-svg , I was trying to
""""copy paste start """""
I have found a workaround to get rendered svg pixeldata from an
inline svg into a canvas (working in latest webkit nightly):
1. create an xhtml file with an inline svg (like descriibed here:
http://wiki.svg.org/Inline_SVG) and save it as .xhtml file
2. encapsulate the svg-tag in a div-tag with id “svgcontainer”
3. use svgcontainer.innerHTML to get the contents of the div
(which is the current svg structure!)
4. use the webkit native base64 encoder
(window.btoa(svgcontainer.innerHTML)) to encode the svg as base64
5. add “data:image/svg+xml;base64,” to the start of the base64 string
6. create an img-element and assign the base64 svg dataurl as src
7. use canvas drawImage to draw the img into the canvas
8. now you have the rendered svg as editable pixel data in a canvas.
This will only work in webkit because FF does not support svg
files as sources for img-tags.
If this is of general interest I can post are full example in my
""""copy paste end """""
> Opera disallows the canvas from being converted to a data uri when you've
> drawn some svg to it for security reasons, this restriction might be
> lifted for svg images that are deemed "safe" in the future.
│ Narendra Sisodiya ( नरेन्द्र सिसोदिया )
│ Society for Knowledge Commons
│ Web : http://narendra.techfandu.org