The latest project is finally finished, I say finished but as always there is stuff that could be done to improve things. I decided to see what SVG was capable of so I set about creating a page turning document view such as:
http://ecom.armourhome.co.uk/brochures/armour_hotel/
You can view the final SVG version here:
http://www.paulbrunt.co.uk/svgflip/
Big thanks for the benderart peeps for letting me use blenderart magazine in this demo.
You can download all the code for this demo here:
http://www.paulbrunt.co.uk/svgflip/svgflip.zip
If you want to use and change the pages simply edit the config.xml file.
For anyone wanting to learn from the code, I must sincerely apologise, I wasn’t even sure where I was going to end up in this project so the code turned into a complete mess, so lets call it a “proof of concept”.The transforms work but even I can’t figure out what I was thinking when I wrote them. For that reason, I’m not worried about the copyright on this code, use it, abuse it, do whatever you want, I give you my permission; since I don’t think it’s maintainable enough to warrant an open source license. My only hope is that it inspires someone to do something better. If you really want to see how the effect is achieved there is an excellent tutorial at: http://oreilly.com/javascript/archive/flashhacks.html. It’s written from the perspective of flash but the same principles apply to SVG.
Comments and observations:
- I was originally going to be using SVG masks. Thankfully, I didn’t as the performance was far slower than clipping paths and in the end it wouldn’t have been usable, but I may not have noticed until too late.
- For some reason chrome was rendering the masks offset. I have a feelling it’s applying the transforms in a different order from firefox and opera, so the mask was being applied at a different point.
- Although the performance seems the best in chrome/webkit, I’m putting this down mainly to the fact that chrome seems to render clipping paths with no anti-aliasing by default. Although, there are “render” options within the SVG spec none of the browsers seemed to render any differently no matter what I set. It was also a little unclear as to where you would apply said render options when it came to clipping paths and masks.
- Firefox really needs to have a decent font implementation, webkit’s was also lacking but seems much further advanced. Opera was nearly perfect with their SVG font implementation. In the end I ended up converting the fonts to paths just to make it display consistently across the browsers.
- Chrome doesn’t seem to be too great with filters at the moment,and importantly it’s missing Gaussian blur. It would have been really useful and allowed much more eye candy had I been able to use it.
- From a performance point of view I would say SVG would benefit greatly from having a cache as bitmap option to indicate when the browser doesn’t need to re-render everything from scratch when animating through the DOM. As it was I ended up using proxy images during most of the animation just to get the speed to a decent level.
- It would have been far better if SVG and Canvas were more tightly integrated, there where many points during the development where using a bitmapped version of the SVG would have been far more preferable, unfortunately it seems that as yet you can’t just draw SVG onto the canvas like other image formats.
Conclusion, SVG is getting there very slowly. Hopefully, all the recent press around SVGWeb and the recent SVG Open will spur people on to use it more and we can get out of the chicken and egg situation we seem to be in at the moment.
