{"id":2148,"date":"2010-10-29T11:56:57","date_gmt":"2010-10-29T10:56:57","guid":{"rendered":"http:\/\/toki-woki.net\/blog\/?p=2148"},"modified":"2022-03-29T21:53:02","modified_gmt":"2022-03-29T20:53:02","slug":"svg-to-raphaeljs","status":"publish","type":"post","link":"http:\/\/toki-woki.net\/blog\/p2148-svg-to-raphaeljs","title":{"rendered":"SVG to RaphaelJS"},"content":{"rendered":"

While redesigning this blog I wanted to keep the “one color per post<\/a>” concept I had in the previous version by changing (tweening) the logo’s color accordingly to the article being viewed (or scrolled to). I rapidly realized I couldn’t achieve this with just HTML+CS+JS and I didn’t want to use Flash (mainly because of iOS devices but also to avoid loading a SWF file on every page).<\/p>\n

I remembered hearing \u2014\u00a0a few months earlier<\/a> \u2014\u00a0about Rapha\u00ebl<\/a> (a JS lib to render vector graphics). At that time I found the concept really interesting but couldn’t see where to use it.<\/p>\n

OK, so I know what I want to do, I know the tools I’ll use, but how do we do that? Rapha\u00ebl is cool, but its syntax looks a bit cryptic<\/a> at first. It says it handles SVG, and \u2014 guess what \u2014 Illustrator can export to SVG. We’re getting closer…<\/p>\n

SVG is XML, but Rapha\u00ebl doesn’t eat XML, it eats a specific syntax meant to be compatible with SVG and VML. Hum… This is when I fire Flash Builder and start writing code. The goal: accept an SVG XML file as input and spit some “Rapha\u00ebl-compatible script” out.<\/p>\n

Boom<\/a> (plus a little demo<\/a> of an output).<\/p>\n

I then simply had to export my Ai logo to SVG, open it in SVG2RaphaelJS, copy paste the output, and wire all that to the scroll\/color tweening logic. Pretty easy.<\/p>\n

Everything worked and looked nice on all browsers and OS’s but I realized the sole idea of having a logo changing colors didn’t work that well. For purely visual reasons. So I dropped it from my theme and rolled back to the black PNG version you can see right now.<\/p>\n

The good thing is, the tool<\/a> works pretty well (at least with Illustrator SVGs) and is OpenSource<\/a>. Either use it or modify it, and tell me what you think. I did this in a hasty fashion and I probably won’t use it a lot, so don’t expect updates or bug fixes… But if you feel like improving it, please do so!<\/p>\n","protected":false},"excerpt":{"rendered":"

While redesigning this blog I wanted to keep the “one color per post” concept I had in the previous version by changing (tweening) the logo’s color accordingly to the article being viewed (or scrolled to). I rapidly realized I couldn’t achieve this with just HTML+CS+JS and I didn’t want to use Flash (mainly because of […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[3,6],"tags":[42,41,19,89,30,55],"acf":[],"_links":{"self":[{"href":"http:\/\/toki-woki.net\/blog\/wp-json\/wp\/v2\/posts\/2148"}],"collection":[{"href":"http:\/\/toki-woki.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/toki-woki.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/toki-woki.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/toki-woki.net\/blog\/wp-json\/wp\/v2\/comments?post=2148"}],"version-history":[{"count":11,"href":"http:\/\/toki-woki.net\/blog\/wp-json\/wp\/v2\/posts\/2148\/revisions"}],"predecessor-version":[{"id":2241,"href":"http:\/\/toki-woki.net\/blog\/wp-json\/wp\/v2\/posts\/2148\/revisions\/2241"}],"wp:attachment":[{"href":"http:\/\/toki-woki.net\/blog\/wp-json\/wp\/v2\/media?parent=2148"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/toki-woki.net\/blog\/wp-json\/wp\/v2\/categories?post=2148"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/toki-woki.net\/blog\/wp-json\/wp\/v2\/tags?post=2148"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}