{"id":782,"date":"2010-03-31T13:45:23","date_gmt":"2010-03-31T13:45:23","guid":{"rendered":"http:\/\/www.codedread.com\/blog\/?p=782"},"modified":"2010-03-31T14:19:54","modified_gmt":"2010-03-31T14:19:54","slug":"to-and-fro","status":"publish","type":"post","link":"https:\/\/www.codedread.com\/blog\/archives\/2010\/03\/31\/to-and-fro\/","title":{"rendered":"To And Fro"},"content":{"rendered":"<p><object type=\"image\/svg+xml\" width=\"100\" height=\"100\" style=\"float:right\" data=\"http:\/\/codedread.com\/clipart\/recycling.svgz\">[clipart]<\/object><a href=\"http:\/\/code.google.com\/p\/svg-edit\/issues\/detail?id=70\" title=\"Convert SVG to PNG\">Issue 70<\/a> has been open for awhile now.  In fact it's one of just a handful of two-digit bugs left in <a href=\"http:\/\/code.google.com\/p\/svg-edit\/issues\/list\">SVG-edit<\/a>.  Now that all browsers have heralded support for SVG into the future, one might argue that the need for this bug will evaporate in a couple years.  However, one would be wrong.  First, there are lots of mobile browsers out there.  Second, in some cases it could be easier to just tell the browser how to draw a collection of dots rather than mathematical instructions (think thumbnails).  So how to solve it?<!--more--><\/p>\n<p>One thought that occurred to me is if I can shove the SVG into a HTML5 Canvas element, I can then call <a href=\"http:\/\/dev.w3.org\/html5\/canvas-api\/canvas-2d-api.html#dom-canvas-todataurl\">toDataURI()<\/a> on it to generate a PNG.  Unfortunately only <a href=\"http:\/\/lists.w3.org\/Archives\/Public\/public-html\/2007Oct\/0320.html\">Opera seems to have experimented<\/a> with loading SVG into a Canvas directly.  Also, there are many effects that can be done in SVG that cannot be done in Canvas (filters, fonts, and more).<\/p>\n<p>The <a href=\"http:\/\/dev.w3.org\/html5\/canvas-api\/canvas-2d-api.html#section-canvas-interface-element\">Canvas2D API<\/a> does mention that in the future, the svg:image element may support <a href=\"http:\/\/dev.w3.org\/html5\/canvas-api\/canvas-2d-api.html#the-canvas-interface-element\">the CanvasElement DOM interface<\/a>.  I'm anticipating Microsoft to announce &#60;canvas&#62; support for IE9 later this year and probably to support this interface on svg:image elements.  It's one way they can innovate on the web standards front while they continue to catch up to other modern browsers.<\/p>\n<p>This would be good, but why only the <a href=\"http:\/\/www.w3.org\/TR\/SVG11\/struct.html#ImageElement\">svg:image element<\/a>?  I'd argue that any element that contains some geometry could gain the toDataURI() method (particularly useful would be the &#60;svg&#62; element here).<\/p>\n<p>Until such time as browsers all get in sync, there are other options.  <a href=\"http:\/\/canvg.googlecode.com\/\">canvg<\/a> is one such option and I've been dutifully raising bugs and writing teeny patches but there's a long ways to go for a robust solution.<\/p>\n<p>Ultimately this is another case of <a href=\"https:\/\/www.codedread.com\/blog\/archives\/2009\/06\/27\/oh-the-things-youll-learn\/\">why am I doing something in script that all browsers already know how to do<\/a>?  You really have to think long-term in the web space, don't you? \ud83d\ude42<\/p>\n<p>Other ideas?<\/p>\n","protected":false},"excerpt":{"rendered":"<p>[clipart]Issue 70 has been open for awhile now. In fact it&#8217;s one of just a handful of two-digit bugs left in SVG-edit. Now that all browsers have heralded support for SVG into the future, one might argue that the need for this bug will evaporate in a couple years. However, one would be wrong. First, [&#8230;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[38,43,25,46,11,28],"tags":[172,198],"class_list":["post-782","post","type-post","status-publish","format-standard","hentry","category-javascript","category-ria","category-software","category-svg","category-technology","category-web","tag-canvas","tag-svg"],"_links":{"self":[{"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/posts\/782","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/comments?post=782"}],"version-history":[{"count":8,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/posts\/782\/revisions"}],"predecessor-version":[{"id":791,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/posts\/782\/revisions\/791"}],"wp:attachment":[{"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/media?parent=782"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/categories?post=782"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/tags?post=782"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}