Comments on: Raphaël: Simple graphics wrapper on top of SVG and VML http://ajaxian.com/archives/raphael-simple-graphics-wrapper-on-top-of-svg-and-vml Cleaning up the web with Ajax Thu, 09 Feb 2012 06:55:33 +0000 hourly 1 http://wordpress.org/?v=3.2 By: Hans Schmucker http://ajaxian.com/archives/raphael-simple-graphics-wrapper-on-top-of-svg-and-vml/comment-page-1#comment-266540 Hans Schmucker Fri, 08 Aug 2008 19:06:32 +0000 http://ajaxian.com/?p=4044#comment-266540 A very simple way to get SVG into a HTML document is through IFrames and DataUrls. Actually, it's also a very clean way to get VML into HTML using javascript urls. <object type="image/svg+xml" style="border:none;" data='data:image/svg+xml,<?xml version="1.0" standalone="no"?> <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.0" > <circle cx="0" cy="0" r="30" style="fill:rgb(0,0,0)" /> </svg>' width="320" height="240" ></object> <iframe style="width:320px;height:240px;" frameborder="0" src='javascript:%27<html><head></head><body><style>v\\: * { behavior:url(#default#VML);display:inline-block }</style><xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v" /><v:oval style="height:60px;width:60px" coordsize="21600,21600" style="position:absolute;left:-30px;top:-30px;" fillcolor="black" strokecolor="none" /></body></html>%27;' ></iframe> A very simple way to get SVG into a HTML document is through IFrames and DataUrls. Actually, it’s also a very clean way to get VML into HTML using javascript urls.

<object type=”image/svg+xml” style=”border:none;”
data=’data:image/svg+xml,<?xml version=”1.0″ standalone=”no”?>
<svg
xmlns:svg=”http://www.w3.org/2000/svg”
xmlns=”http://www.w3.org/2000/svg” version=”1.0″
>
<circle cx=”0″ cy=”0″ r=”30″ style=”fill:rgb(0,0,0)” />
</svg>’
width=”320″
height=”240″
></object>

<iframe style=”width:320px;height:240px;” frameborder=”0″
src=’javascript:%27<html><head></head><body><style>v\\: * { behavior:url(#default#VML);display:inline-block }</style><xml:namespace ns=”urn:schemas-microsoft-com:vml” prefix=”v” /><v:oval style=”height:60px;width:60px” coordsize=”21600,21600″ style=”position:absolute;left:-30px;top:-30px;” fillcolor=”black” strokecolor=”none” /></body></html>%27;’
></iframe>

]]> By: matanlurey http://ajaxian.com/archives/raphael-simple-graphics-wrapper-on-top-of-svg-and-vml/comment-page-1#comment-266539 matanlurey Fri, 08 Aug 2008 18:55:18 +0000 http://ajaxian.com/?p=4044#comment-266539 @elfpoet: I can't remember the source, but canvas was found to be significantly faster than SVG. The speed difference was negligible on static images, but anything dynamic... @elfpoet: I can’t remember the source, but canvas was found to be significantly faster than SVG. The speed difference was negligible on static images, but anything dynamic…

]]> By: elfpoet http://ajaxian.com/archives/raphael-simple-graphics-wrapper-on-top-of-svg-and-vml/comment-page-1#comment-266537 elfpoet Fri, 08 Aug 2008 18:18:51 +0000 http://ajaxian.com/?p=4044#comment-266537 Pertaining to Canvas vs. SVG/VML in general, have there been any benchmarks regarding performance for each? IMO, a thin API on top of the OS drawing API (Canvas) would be faster than DOM manipulation (although obviously we can't test Canvas against VML yet). Pertaining to Canvas vs. SVG/VML in general, have there been any benchmarks regarding performance for each? IMO, a thin API on top of the OS drawing API (Canvas) would be faster than DOM manipulation (although obviously we can’t test Canvas against VML yet).

]]> By: Dylan Schiemann http://ajaxian.com/archives/raphael-simple-graphics-wrapper-on-top-of-svg-and-vml/comment-page-1#comment-266536 Dylan Schiemann Fri, 08 Aug 2008 17:40:23 +0000 http://ajaxian.com/?p=4044#comment-266536 @sashaklar: actually, there's a way around this... check out the dojox.gfx source code as it works with html pages as well. @rborn: there's really no reason someone couldn't use dojox.gfx with jQuery or Mootools or Prototype. @sashaklar: actually, there’s a way around this… check out the dojox.gfx source code as it works with html pages as well.

@rborn: there’s really no reason someone couldn’t use dojox.gfx with jQuery or Mootools or Prototype.

]]> By: rborn http://ajaxian.com/archives/raphael-simple-graphics-wrapper-on-top-of-svg-and-vml/comment-page-1#comment-266535 rborn Fri, 08 Aug 2008 17:24:23 +0000 http://ajaxian.com/?p=4044#comment-266535 @jaxsphere dojo is dojo only this function work nice with mootools(tested by me) and jquery as seen on his page. I think it works with other frameworks. @jaxsphere

dojo is dojo only
this function work nice with mootools(tested by me) and jquery as seen on his page. I think it works with other frameworks.

]]> By: jaxsphere http://ajaxian.com/archives/raphael-simple-graphics-wrapper-on-top-of-svg-and-vml/comment-page-1#comment-266534 jaxsphere Fri, 08 Aug 2008 16:58:03 +0000 http://ajaxian.com/?p=4044#comment-266534 Sorry, what's new here? Dojo has had a small cross-platform SVG,VML,Canvas,Silverlight vector graphics api for a year now that does the same thing. Sorry, what’s new here? Dojo has had a small cross-platform SVG,VML,Canvas,Silverlight vector graphics api for a year now that does the same thing.

]]> By: sashasklar http://ajaxian.com/archives/raphael-simple-graphics-wrapper-on-top-of-svg-and-vml/comment-page-1#comment-266533 sashasklar Fri, 08 Aug 2008 16:49:14 +0000 http://ajaxian.com/?p=4044#comment-266533 I considered this SVG/VML over Canvas/VML as a cross-browser graphics solution and ran up against a deal breaker: Mozilla browsers (and possibly others) won't render SVG fragments unless the page is served as XHTML. I considered this SVG/VML over Canvas/VML as a cross-browser graphics solution and ran up against a deal breaker: Mozilla browsers (and possibly others) won’t render SVG fragments unless the page is served as XHTML.

]]>