{"id":454,"date":"2008-04-16T23:15:30","date_gmt":"2008-04-17T04:15:30","guid":{"rendered":"http:\/\/blog.codedread.com\/archives\/2008\/04\/16\/svg-news-digest-2008-04-16\/"},"modified":"2008-04-16T23:15:30","modified_gmt":"2008-04-17T04:15:30","slug":"svg-news-digest-2008-04-16","status":"publish","type":"post","link":"https:\/\/www.codedread.com\/blog\/archives\/2008\/04\/16\/svg-news-digest-2008-04-16\/","title":{"rendered":"SVG News Digest:  2008-04-16"},"content":{"rendered":"<p><object type=\"image\/svg+xml\" width=\"100\" height=\"100\" align=\"right\" hspace=\"10\" data=\"http:\/\/codedread.com\/clipart\/svg.svgz\"><span\/><\/object>I haven't really given a good 'SVG News Digest' in well over a year, but there was enough recent news that I thought I should post a little bit about what's going on in the <a href=\"http:\/\/www.w3.org\/Graphics\/SVG\">Scalable Vector Graphics<\/a> world.  Fair warning:  This blog post is long, I probably should have spread it over 4-5 days worth of blogging, but I lose patience when queuing up posts...<!--more--><\/p>\n<h3 id=\"toc\">Table Of Contents<\/h3>\n<ul>\n<li><a href=\"#svg-in-html\">SVG In HTML: Did You Blink?<\/a><\/li>\n<li><a href=\"#svg-wg-going-public\">SVG Working Group Going Public<\/a><\/li>\n<li><a href=\"#smil-getting-some-love\">SMIL Getting Some Love<\/a><\/li>\n<li><a href=\"#gemi\">Cool Demo: GEMi<\/a><\/li>\n<li><a href=\"#slanty-comments\">Slanty Blog Comments<\/a><\/li>\n<\/ul>\n<h3 id=\"svg-in-html\"><a href=\"#svg-in-html\">SVG In HTML:  Did You Blink?<\/a><\/h3>\n<p><object type=\"image\/svg+xml\" width=\"100\" height=\"100\" align=\"left\" hspace=\"10\" data=\"http:\/\/codedread.com\/clipart\/html.svgz\"><span\/><\/object>For about a week, there was a <a href=\"http:\/\/annevankesteren.nl\/2008\/04\/html5-foreign\">pretty solid proposal<\/a> for how <a href=\"http:\/\/www.whatwg.org\/specs\/web-apps\/current-work\/\">HTML5<\/a> could include support for existing popular XML languages currently making up the fabric of the 'open web' platform - this included Scalable Vector Graphics.<\/p>\n<p>Specifically, the spec described how HTML5 could allow inline markup that (very closely) resembled SVG and MathML (in a special mode of the HTML5 parser).  However, very recently, the <a href=\"http:\/\/lists.w3.org\/Archives\/Public\/public-html\/2008Apr\/0392.html\">SVG WG requested<\/a> the SVG part of the proposal be <a href=\"http:\/\/intertwingly.net\/blog\/2008\/04\/15\/HTML5-SVG\">removed<\/a> from the HTML5 spec so that the SVG WG could investigate if there were any improvements that could be made that would preserve interoperability with existing user agents and tools.<\/p>\n<p>My biggest concern about the original proposal was that 'round-tripping' SVG images was not guaranteed.  Round-tripping means that I should be able to take a valid SVG document made in an editor like <a href=\"http:\/\/inkscape.org\/\">Inkscape<\/a> and copy-paste that XML code into an HTML5 document and vice versa.  The trip from Inkscape-to-HTML was supported by the original proposal (where the HTML parser would just ignore namespace prefixes).  But the trip the other way (copy-paste from a HTML5+SVG document to Inkscape) was not guaranteed.<\/p>\n<p>This is because the HTML5 parser is much more forgiving about certain things.  It does not mandate namespace prefixes, double-quotes on attribute values, or case sensitivity for all modes.  It doesn't even require you to close all your elements.  This is by design.<\/p>\n<p>This means that an author could not be guaranteed to take valid SVG markup embedded in HTML5 and paste it into a standalone document and expect a graphical editor to be able to bring up the image.<\/p>\n<p>However, if we require that any browser supporting SVG-in-HTML5 must support a means of exporting the DOM as XML - then my concerns are very much alleviated.  It <a href=\"http:\/\/lists.w3.org\/Archives\/Public\/public-html\/2008Apr\/0414.html\">was clarified<\/a> to me that this was indeed recommended, but it could not be a requirement because User <del>Agent<\/del> <ins>Interface<\/ins> requirements are out of scope of the HTML5 specification.  <del>I'm not really sure why - we are not talking about capturing all UA requirements, only those that are required for interoperability with a foreign language such as SVG - but c'est la guerre.<\/del>  See <a href=\"http:\/\/blog.codedread.com\/archives\/2008\/04\/16\/svg-news-digest-2008-04-16\/#comment-12518\">Ian's comment<\/a> below for more clarity.<\/p>\n<h3 id=\"svg-wg-going-public\"><a href=\"#svg-wg-going-public\">SVG Working Group Going Public<\/a><\/h3>\n<p><object type=\"image\/svg+xml\" width=\"100\" height=\"100\" align=\"right\" hspace=\"10\" data=\"http:\/\/codedread.com\/clipart\/svg.svgz\"><span\/><\/object>The <a href=\"http:\/\/www.w3.org\/Graphics\/SVG\/WG\/\">SVG Working Group<\/a> has been <a href=\"http:\/\/lists.w3.org\/Archives\/Public\/www-svg\/2008Apr\/0048.html\">rechartered<\/a> as a <em>Public<\/em> Working Group.  This means that the general public will be able to read emails, conference transcripts, action items, etc.  I really think this is a great idea, and I look forward to more transparency around SVG activities.  Here's their <a href=\"http:\/\/www.w3.org\/2007\/11\/SVG_rechartering\/SVG-WG-charter.html\">new charter<\/a>.<\/p>\n<p>Another activity within the W3C surrounding SVG is the creation of a <a href=\"http:\/\/www.w3.org\/Graphics\/SVG\/IG\/\">SVG Interest Group<\/a>.  This is an interesting idea - not sure if it's the first of its kind within the W3C.  Based on <a href=\"http:\/\/www.w3.org\/2007\/11\/SVG_rechartering\/SVG-IG-charter.html\">their charter<\/a>, the IG will:<\/p>\n<blockquote cite=\"http:\/\/www.w3.org\/2007\/11\/SVG_rechartering\/SVG-IG-charter.html#scope\">\n<p>\"provide requirements, specification feedback, errata suggestions and tests to the SVG WG\"<\/p>\n<\/blockquote>\n<p>Sounds like a good opportunity to gather more folks interested in vector graphics on the web into one place for some interaction.<\/p>\n<h3 id=\"smil-getting-some-love\"><a href=\"#smil-getting-some-love\">SMIL Getting Some Love<\/a><\/h3>\n<p><object type=\"image\/svg+xml\" width=\"100\" height=\"100\" align=\"left\" hspace=\"10\" data=\"http:\/\/codedread.com\/clipart\/smile.svgz\"><span\/><\/object>In case you <a href=\"http:\/\/blog.codedread.com\/archives\/2008\/03\/26\/webkit-nightly-not-smiling\/\">missed it<\/a>, the <a href=\"http:\/\/www.webkit.org\/\">WebKit<\/a> nightly builds now includes some support for declarative animation (SMIL).  I'm really pleased to see two native browsers now supporting SVG animation interoperably.  Now I'd like to see <a href=\"https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=216462\">this patch<\/a> land as soon as Firefox 3 ships so that we can have some declarative animation support in all 3 major native SVG browsers.<\/p>\n<h3 id=\"gemi\"><a href=\"#gemi\">Cool Demo: GEMi<\/a><\/h3>\n<p><object type=\"image\/svg+xml\" width=\"100\" height=\"100\" align=\"right\" hspace=\"10\" data=\"http:\/\/codedread.com\/clipart\/party.svgz\"><span\/><\/object>Domenico Strazzullo <a href=\"http:\/\/tech.groups.yahoo.com\/group\/svg-developers\/message\/60327\">announced<\/a> today <a href=\"http:\/\/www.dotuscomus.com\/svg\/lib\/gemi\/v1.29\/gemi.svg\">a very nice demo<\/a> of a windowing system built in SVG for browsers.  Kind of reminds me of <a href=\"http:\/\/www.ajaxwindows.com\/apps\/windows\/content\/index.html\">AjaxWindows<\/a>, but this GEMi demo actually works really well in all 3 major SVG browsers without the help of XUL.  Apparently it also works in IE+ASV.<\/p>\n<p>I was really impressed with this - but I can't wait to see if anybody tries to build anything with it, since the goal of the project was a framework that can be integrated into some other project.<\/p>\n<p><a href=\"http:\/\/www.dotuscomus.com\/svg\/lib\/gemi\/v1.29\/gemi.svg\"><b>Click here to try it out<\/b><\/a>!<\/p>\n<h3 id=\"slanty-comments\"><a href=\"#slanty-comments\">Slanty Blog Comments<\/a><\/h3>\n<p><object type=\"image\/svg+xml\" width=\"100\" height=\"100\" align=\"left\" hspace=\"10\" data=\"http:\/\/codedread.com\/clipart\/wordpress.svgz\"><span\/><\/object>More blog experimentation last night by adding 'slanty comments'.  After futzing with PHP, CSS, HTML and SVG, I finally got the effect I was after.  It took me over 2 hours.  Of course that was also testing it in Firefox 2, Firefox 3, Safari 3.1, Opera 9.20, WebKit nightly, Internet Explorer 6 and on two platforms (Windows and Linux).<\/p>\n<p>Unfortunately, when all was said and done, I wasn't really happy with <a href=\"http:\/\/blog.codedread.com\/archives\/2008\/04\/01\/giving-flash-a-chance\/#comments\">the result<\/a>.  Maybe I'm just not used to seeing that on a website?  If anybody has ideas on how to improve it, I'll gladly steal them.<\/p>\n<p>What I thought was really interesting about this?  Well first, let me explain how I serve my website and blog:  I author my content in XHTML served the content as application\/xhtml+xml for those browsers that support it (which is, incidentally, all major browsers except for Internet Explorer).  For IE, I simply change the MIME type to text\/html and cross my fingers (ok, in fairness, I did do some tweaking and did design a horrid little HTML table-based fallback menu).<\/p>\n<p>Anyway, for my slanted comment links, I use inline SVG.  Here is a snip of the code for a blog comment:<\/p>\n<p style=\"background-color:#ddd\"><code style=\"text-align:left; font-size:10pt;\">&#160;&#160;&#60;div&#62;<\/p>\n<p>&#160;&#160;&#160;&#160;&#60;svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" ...&#62;<\/p>\n<p>&#160;&#160;&#160;&#160;&#160;&#160;&#60;a href=\"http:\/\/example.com\/\" xlink:href=\"http:\/\/example.com\/\" ...&#62;<\/p>\n<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#60;text ...&#62;1. Joe Blow Says:&#60;\/text&#62;<\/p>\n<p>&#160;&#160;&#160;&#160;&#160;&#160;&#60;\/a&#62;<\/p>\n<p>&#160;&#160;&#160;&#160;&#60;\/svg&#62;<\/p>\n<p>&#160;&#160;&#60;\/div&#62;<\/p>\n<p>&#160;&#160;&#60;div&#62;<\/p>\n<p>&#160;&#160;&#160;&#160;&#60;p&#62;... comment text goes here ...&#60;\/p&#62;<\/p>\n<p>&#160;&#160;&#60;\/div&#62;<\/code><\/p>\n<p>Most browsers (IE included) simply ignore elements they do not recognize.  So how does the above look to IE6?  See the bold markup below:<\/p>\n<p style=\"background-color:#ddd\"><code style=\"text-align:left; font-size:10pt;\"><b>&#160;&#160;&#60;div&#62;<\/b><\/p>\n<p>&#160;&#160;&#160;&#160;&#60;svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" ...&#62;<\/p>\n<p><b>&#160;&#160;&#160;&#160;&#160;&#160;&#60;a href=\"http:\/\/example.com\/\"<\/b> xlink:href=\"http:\/\/example.com\/\" <b>...&#62;<\/b><\/p>\n<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#60;text ...&#62;<b>1. Joe Blow Says:<\/b>&#60;\/text&#62;<\/p>\n<p><b>&#160;&#160;&#160;&#160;&#160;&#160;&#60;\/a&#62;<\/b><\/p>\n<p>&#160;&#160;&#160;&#160;&#60;\/svg&#62;<\/p>\n<p><b>&#160;&#160;&#60;\/div&#62;<\/p>\n<p>&#160;&#160;&#60;div&#62;<\/p>\n<p>&#160;&#160;&#160;&#160;&#60;p&#62;... comment text goes here ...&#60;\/p&#62;<\/p>\n<p>&#160;&#160;&#60;\/div&#62;<\/b><\/code><\/p>\n<p>So the svg:a element looks like a html:a element to IE.  So in this one case, my inline SVG kinda sorta falls back as HTML content for the one browser that doesn't support SVG (again, Internet Explorer).  Yes, I know - horrible horrible horrible.  However, it works.  I kind of shudder to think what this would do in IE8 (without an SVG plugin), I guess I'll have to test it eventually.<\/p>\n<p>Oh, and if you don't know what I mean by slanty comments, well you'll just have to post a comment...<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I haven&#8217;t really given a good &#8216;SVG News Digest&#8217; in well over a year, but there was enough recent news that I thought I should post a little bit about what&#8217;s going on in the Scalable Vector Graphics world. Fair warning: This blog post is long, I probably should have spread it over 4-5 days [&#8230;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[25,46,11,28],"tags":[98,136,198,154,159],"class_list":["post-454","post","type-post","status-publish","format-standard","hentry","category-software","category-svg","category-technology","category-web","tag-html","tag-smil","tag-svg","tag-w3c","tag-whatwg"],"_links":{"self":[{"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/posts\/454","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=454"}],"version-history":[{"count":0,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/posts\/454\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/media?parent=454"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/categories?post=454"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codedread.com\/blog\/wp-json\/wp\/v2\/tags?post=454"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}