(not only) SVG | Dedicated blog...

Unsorted news

2013-07-14 | various

Swiffy PresentationSwiffy For Ad Banners Tips&Tricks Presentation

2013-02-19 | html5 | banners

I prepared this presentation for purposes of our company, LMC, and it describes benefits of utilizing Swiffy conversion tool for our/client banner ads business. New DZSlides version, which I've used, is a little bit less MSIE 9 friendly then its previous version and I had to hack it a bit. But now the presentation works well in MSIE 10, Firefox, Chrome, Safari, Opera and acceptably also on MSIE 9 as well, but sorry, MSIE 8- ...

In the presentation slides is embedded SWF file and to have it visible in Gecko browser at all, the trick is to add wmode="opaque" (or transparent) to the Flash object's declaration - maybe it will save you some time, well, it cost me a lot to discover this, to be honest...; and, MSIE 10 for Windows 7 seems to be messing ordered lists (<ol>) ordering a bit, but it could be just the Preview Release problem, hmmm...).
So following files are available for your attention:

I do hope you'll find this (perhaps) useful also for your business...

Short news

2013-02-13 | svg

Indonesia 2012 VacationIndonesia 2012 Vacation (presentation)

2013-01-29 | html5 | css3 | svg

More than fourteen days ago I had started my work on interactive web presentation of some best pictures we have taken during our September's vacation last year (lasting four and half week ;-). I planned to utilize not just SVG + SMIL, like I did on many other occasions, but try also some tempting new technologies like CSS Animations, CSS 3D Transformations etc.

In the end, the demo is very different from the early prototype, and needs to be said, that it is visually much more simple, but inside much more complex, than I had it planned to be...
Well, I sacrificed a lot for the better cross-browser compatibility and it is still this far, far away, from what I have been hoping for :-(
Anyway, some (and not only technological) demo highlights are:

I would perhaps try to improve and bugfix it a little more in the near feature, but we'll see when...and if...depends a lot on feedback...which is, of course... welcomed!! :-))

Still Alive and Happy Xmas

2012-12-21 | svg, comparison

BellsWell, I've been quiet for a while, I know, but I'm still alive and I can promise you more posts and experiments for the upcoming year. For now, I've at least some brief resume information for you:

I wish you all happy Christmas and very happy Doom's day...err... Happy New Year ;-))))))

Renewed Benchmarking of SVG Particles in Recent Browser Versions

2012-03-11 | svg, benchmark

Updated: Added graphs + extended/reformulated some conclusions...
More than year ago I measured various browser performance on particles benchmark and today I did it again, on more recent browser versions, of course. I did not benchmarked Safari (which is very weird and unusual on Windows platform), old Firefox 3.6, SW mode (forced) rendering nor MSIE10 (because of its only availability for different OS at this moment).
I had to update RAF demos to follow later specification (and incompatible) changes. And what are my brief results from this benchmarking?

Results of the tests, measured after running for more than 30 seconds, on 32-bit versions of all browsers, running 64-bit Windows 7, Dual-Core CPU with NVidia GPU GT 240M, 1920×1080 resolution, full screen (the same HW as before, only graphic driver was upgraded)

50 particles Firefox 10.0.2 Firefox 13 Nightly Firefox 13 Nightly Azure Opera 11.51 Opera 12 Next ** Chrome 17 Chrome 20 Canary MSIE 9.0.5
original demo 110 FPS / 48% CPU 162 FPS / 12% CPU 167 FPS / 25% CPU 33 FPS / 58% CPU 136 FPS / 92% CPU 92 FPS / 76% CPU 128 FPS / 78% CPU 260 FPS / 33% CPU
suspend redraw 128 FPS / 26% CPU 191 FPS / 3% CPU 170 FPS / 5% CPU 33 FPS / 58% CPU 136 FPS / 92% CPU 92 FPS / 76% CPU 128 FPS / 78% CPU 260 FPS / 33% CPU
offscreen rendering 145 FPS / 25% CPU 192 FPS / 3% CPU 190 FPS / 7% CPU 33 FPS / 58% CPU 136 FPS / 92% CPU 92 FPS / 76% CPU 128 FPS / 78% CPU 260 FPS / 33% CPU
original+RAF 32 FPS / 3% CPU 64 FPS / 3% CPU 64 FPS / 5% CPU N/A N/A 47 FPS / 76% CPU 58 FPS / 48% CPU N/A
suspend redraw+RAF 32 FPS / 3% CPU 64 FPS / 3% CPU 64 FPS / 4% CPU N/A N/A 47 FPS / 76% CPU 58 FPS / 48% CPU N/A
offscreen rendering+RAF 32 FPS / 3% CPU 64 FPS / 3% CPU 64 FPS / 3% CPU N/A N/A 47 FPS / 76% CPU 58 FPS / 48% CPU N/A
500 particles Firefox 10.0.2 Firefox 13 Nightly Firefox 13 Nightly Azure Opera 11.51 Opera 12 Next ** Chrome 17 Chrome 20 Canary MSIE 9.0.5
original demo 2.8 FPS / 76% CPU 25 FPS / 52% CPU 24 FPS / 52% CPU 13.5 FPS / 56% CPU 25 FPS / 54% CPU 32 FPS / 68% CPU 48 FPS / 68% CPU 52 FPS / 49% CPU
suspend redraw 6.3 FPS / 71% CPU 35 FPS / 53% CPU 32 FPS / 52% CPU 13.6 FPS / 56% CPU 112 FPS / 56% CPU 32 FPS / 68% CPU 48 FPS / 68% CPU 52 FPS / 49% CPU
offscreen rendering 36 FPS / 52% CPU 34 FPS / 53% CPU 31.5 FPS / 52% CPU 17 FPS / 56% CPU 46 FPS / 56% CPU 28 FPS / 68% CPU 38 FPS / 62% CPU 39 FPS / 49% CPU
original+RAF 3 FPS / 76% CPU 25 FPS / 52% CPU 23 FPS / 53% CPU N/A N/A 28 FPS / 68% CPU 44 FPS / 64% CPU N/A
suspend redraw+RAF 6.1 FPS / 73% CPU 35 FPS / 53% CPU 32 FPS / 52% CPU N/A N/A 28 FPS / 68% CPU 44 FPS / 64% CPU N/A
offscreen rendering+RAF 36 FPS / 52% CPU 34 FPS / 53% CPU 31 FPS / 53% CPU N/A N/A 25 FPS / 66% CPU 32 FPS / 60% CPU N/A
2500 particles Firefox 10.0.2 Firefox 13 Nightly Firefox 13 Nightly Azure Opera 11.51 Opera 12 Next ** Chrome 17 Chrome 20 Canary MSIE 9.0.5
original demo 0.45 FPS / 80% CPU 5.4 FPS / 52% CPU 5.1 FPS / 52% CPU 2 FPS / 52% CPU 2.1 FPS / 53% CPU 10.5 FPS / 56% CPU 13.6 FPS / 56% CPU 10.4 FPS / 52% CPU
suspend redraw 0.7 FPS / 78% CPU 8 FPS / 53% CPU 7.2 FPS / 52% CPU 2 FPS / 52% CPU 13 FPS / 52% CPU 10.5 FPS / 56% CPU 13.6 FPS / 56% CPU 10.4 FPS / 52% CPU
offscreen rendering 7.4 FPS / 52% CPU 7.2 FPS / 52% CPU 6.6 FPS / 52% CPU 5.5 FPS / 52% CPU 6.6 FPS / 54% CPU 8.8 FPS / 56% CPU 10 FPS / 56% CPU 8.4 FPS / 52% CPU
original+RAF 0.5 FPS / 77% CPU 5.4 FPS / 52% CPU 5 FPS / 52% CPU N/A N/A 10.4 FPS / 58% CPU 13.6 FPS / 56% CPU N/A
suspend redraw+RAF 0.8 FPS / 79% CPU 7.9 FPS / 52% CPU 7.1 FPS / 52% CPU N/A N/A 10.4 FPS / 58% CPU 13.6 FPS / 56% CPU N/A
offscreen rendering+RAF 7.6 FPS / 52% CPU 7.2 FPS / 52% CPU 6.6 FPS / 52% CPU N/A N/A 8.5 FPS / 56% CPU 9.6 FPS / 56% CPU N/A
Color legend more than 30 FPS = OK less than 30 FPS = KO N/A = not available** Opera 12 Next rendering experience is VERY flashy/jerky and cannot be considered acceptable / frame rate is VERY misleading there...

Graphical representation of scaling across different browsers / number of particles + RAF rendering mode CPU demands

Original Suspend Offscreen RAF

HTML5 LogoPresentation: HTML5 Introduction (for LMC purposes)

2012-02-17 | html5 | evangelization

For internal learning purposes of my employing company LMC (Alma media), I created short presentation about HTML5. It raised quite big interest inside company and I spoke to more than 50 people in three individual sessions (+ one webinar in planned as well). I'd like to share it with you as well. I do hope, you'll find it interesting. It is based on presentation engine DZslides by Paul Roget (and is not compatible!! with MSIE 8 and lower) and free cliparts are taken from clker.com and openclipart.org, but the rest is my content only. Of course, it was inspired by many and many great HTML5 presentations and demos around the web, but this one represents my opinion (on current) HTML5 situation...

Short news

2012-02-16 | svg | web

Mozilla FirefoxSupport for Mozilla

2011-12-05 | mozilla

Today I've read about Google not extending search contract with Mozilla. It is very very serious for Mozilla foundation, because large majority of its income in the past came from exactly that source. But I do want to have a free and better web, I really do, and that's why I donated immediately once again and I'm pleading you, to do the same!!

Support this open-source foundation, because if we'll let it fall, our future will be much much darker and more sad, without it, I'm convinced about it. So, why not help to create our own future..., hmm? ;-)

SVG Open 2011SVG Open 2011

2011-10-11 | svg | event

This year's biggest SVG conference is starting soon. Such a pity I'm not attending it again... :-(
But I hope that (at least!) organizers will be able to publish slides and presentations after conference's end, consolidated and on one place, because hunting them on personal blogs of all speakers (like on previous years) is tiring and not very reliable way how to get access to all those exciting information.
Well, we shall wait and see, but program looks really promising... ;-)
Some news:

Short news

2011-09-14 | svg | web

SVG CowboysSVG Cowboys Game compatibility update No.II

2011-07-14 | svg | game

Back in the early 2004, I created game called SVG Cowboys for Adobe SVG Viewer, which utilized SMIL heavily. Year ago, when SMIL support became significant in modern browsers, I did first attempt to make the game compatible with them. Well, it was quite painful work then, because:

However, as a proof-of-evolution, I can say that my second conversion attempt was much more easy and more fun and, as a bonus, I added at least partial support for MSIE9+ as well (via hacked version of FakeSMILe). To be more specific, difference between browser SVG/SMIL support then (one year ago) and now are:

This second re-work took me approx. 20% of time/effort of previous one and the result is much better, compatible and featureful. And everything is only result of browser evolution, wow!! So, what puzzles me a bit is mainly rendering performance => Adobe's SVG Viewer renders game so much more effectively and smoothly, compared to modern browsers, that it is still Performance-King-of-This-Game, even although it is sooooo oooold.... To not talk only about user feeling (although it is very important, and ASV is the only one where animation is fluent and lighting fast and audio without pauses and glitches), average CPU consumption on my notebook is:

HQ Game Mode Firefox 7 Aurora
72% CPU - choppy animation
Opera 11.50
85% CPU - choppy animation
Safari 5.0.5
75% CPU - very choppy animation
Chrome 13 Beta
80% CPU - choppy animation and crashy
66% CPU - smooth animation, but script based
Adobe SVG Viewer 3.03
53% CPU - smooth animation

PS 1: During loading be please patient, I'm not compiling all the work into the one file only, like I did for previous versions, so your browser must download tens of not very size optimized files...
PS 2: Chrome tends to be a bit crashy during this game/experiments and is down quite often for me, sometimes after 10s, sometimes after a minute, but stil...

Unsorted news

2011-07-12 | svg

During previous days I had only little opportunity to SVG experimenting, but there is always something happening anyway ;-)

Update newsMSIE9 Logo

2011-06-03 | svg

During last three days I did couple of demo tweaks and fakeSMILE hacks to even more improve compatibility of some existing demos plus sometimes added a feature a well. MSIE9 users, please, turn on Developer tools console (key F12) on!!, otherwise many demos will freeze suddenly and will not continue... I hope IE guys will fix it somehow, it's really stupid bug... Nevertheless, changes are:

As a result, MSIE9 now scores 472 / 725 points in my tests which is good, and primarily absence of filters is the major drawback now...
Update 2011-06-27: Got rid of many FakeSMILE freezes for MSIE9 (by fixing setProperty issue ;-) ... and MSIE9 now scores 487 points!

World LandmarksSVG Banner World Landmarks

2011-06-01 | svg | banner

Some fourteen days ago I spotted (and downloaded ;-) nice SWF banner on some of site and immediately wanted to create something similar in SVG. Yesterday I've started finding and downloading resources and today I finished it.
It took me less than two hours to create it and result is quite close to the original animation (P.S.: creating exact copy was never my intention).
To create it was very very easy, just to find couple of suitable cliparts (http://www.openclipart.org/people/shokunin/shokunin_world_landmarks_egipt_paris_sydney_ny_taj_mahal.svg, http://www.openclipart.org/people/purzen/purzen_Globe.svg and http://www.clker.com/cliparts/W/e/S/7/L/T/leaning-tower-of-pisa.svg), modify them a bit in Inkscape, then merge them to one file, rotate them with earth globe as the center and run animateTransform rotation over everything (+ add some explanatory texts). Yes, easy and that's why I love SVG and declarative animation!
The file-size of original bitmap-based SWF is 43kB, of vector based uncompressed SVG is 68kB and of compressed using GZIP SVGZ only 29kB !! Can you see why SVG is so cool? ;-)
Demo runs properly, as far as I can tell, in all SVG capable browsers...

Browser ComparisonUpdate: SVG Browsers Comparison Table

2011-05-29 | svg | browser

I've updated my SVG browser support/comparison table, based on majority of SVG files hosted on this site.
This is first update to initial version, published exactly three months ago. I added 43 test-cases I updated browser versions in the test to the most recent ones, of course.
I've also made some more compatibility changes for better utilization of fakeSMILe to extend SMIL support to MSIE9, because these day I see SVG/SMIL as standards who need encouragement in every possible way, rather than pointing maliciously out, that this browser is buggy there or missing some feature at all => and that's why I don't feel this as a way of cheating at all.
As a result, you can see more demos performing better than previously, esp. in MSIE9 (only Chrome did it again and managed to score better in some tests, yes, but at the same time failed some which previously passed, hmm... :-(( )
Enjoy the summary / comparison page and if you're MSIE9 user, I can recommend to your attention especially following demos (Advice: press F12 - open Developer tools console - during running the demos, for some reasons unknown to me fakeSMILe compatibility is much better then...), they're maybe still not perfect, but really good enough ;-):

There are no winner/order changes, except of the fact, that due to the fakeSMILe compatibility/enhancements, is now MSIE 9 performing even slightly better than Batik 1.7, wow.... ;-)))

Cuba 2011 SVG PresentationCar in ride...

2011-05-25 | svg | presentation

Update 2011-05-26: Added "Skip intro" switch (works well in Firefox and Opera, but not so well in Chrome) + made some animations a bit faster...
In March this year (2011) I and my girlfriend Jane visited Cuba. Visit lasted slightly longer than three weeks and we have really tried hard to see as much as possible. After return back to Czech Republic I started immediately thinking about making SVG presentation from this vacation, but it was not until now, when I'm pushing it to public. Notes:

If you like the demo or found a bug there, please let me know about both. Bug's I'll try to fix, improvements process... Thank you for your feedback...
PS: If you're a MSIE 9+ or Firefox 3.5 + user, you can still watch both colibri in flight and car in ride in standalone, tweaked files, with little help of FakeSmile

SVG Banner 2

2011-04-21 | svg | remake

For maybe a week was on one popular Czech website placed quite cool SWF banner and when I saw it for maybe fifth time, I decided, that it would be good to try to do something similar in SVG as well. I downloaded mentioned SWF (which was clever of me, because it disappeared in two days ;-), but it took me more than three more days until I started my work on it. There were three main graphical effects used in this demo whose I liked I wanted to reproduce them all (and my intention never was to copy the banner with its original content or sequence...):

Banner 2 1. Big text with gradient arriving from different directions, some even with reflection
This was the easy part, centered text and gradient were obvious, for reflection I used re-scaling of the text and applied filter with horizontal gradient to it.

2. Todo-paper-sheets with handdrawn text appearing on them
I downloaded free web font BelligerentMadnessRegular, paper as common rectangular with gradient (I added even pin to it ;-), rotated a bit, with drop shadow using filter effect, and for each line of text there is extra animated mask to do the trick of slowly appearing text.

3. Big logo appears with text which changes its color with slow filling from left to right
Logo is very easy scaling effect and for the coloring flash effect I chose to use animated linear gradient which has its begin and end out of visible area/box and beginning and ending colors differ.

Well, it took me me approx. four hours to do it and I was pretty satisfied with my result. Unfortunately, I discovered that it is working properly only in Firefox 4 and Opera 11; all other browsers (and I decided also for FakeSmile compatible version) were looking very very bad. So I started doing ungrateful cross-browser work, which cost me maybe another four hours, but ended with partial success only :-(
Chrome and its masking is something really not working at all (and is even getting worse and worse with new releases! - there is a bunch of bug reports, but they don't mind... :-( ),
Safari does not support filters yet and its masking, although better than that of Chrome, is still not behaving in desired and expectable way.
Many limitations of FakeSmile + Firefox 3.6 (missing support for set method, not supported multiple values for animateTransform etc.) made me to do more compatible version full of compromises and even this shares the same masking flaw with Chrome and Safari.
And this unfortunate masking is most probably also reason why MSIE9 with FakeSmile freezes after first part and is refusing to continue.

Well, and so this is area where Flash is reallly superior to SVG - there is only one (widely spread and popular) implementation and developers can focus on creating desired graphics effects and not solve cross implementation issues (what is nothing pleasant, trust me). But... heads up! dear friends, SVG&SMIL implementations are improving still (with some exceptions, like Chrome's masking capabilities ;-) and there is really logical and comfortable way how to code in SVG and SMIL banners like this... ;-) Just do not stop trying!! :-))))))

SVG and SMIL Rotozoomer effect

2011-04-20 | svg

If you remember very cool PC demo back from year 1993 from Future Crew, there was introduced cool rotozoomer effect,, recently reincarnated to modern web browsers by mr doob and then even improved by HTML5 video version by Erik Dahlström. It is very easy to achieve it using SVG pattern technology and modifying its patternTransform property.
However, it relies on JavaScript to do the motion&zoom effect and external bitmap or video as texture. Here I present to you much simplified version, how to achieve this effect only via SMIL (2 animateTransforms are enough, I added third animate just for fun, rotating ellipses as a texture are there merely as texture placeholder for whatever you wish...) in one very small SVG file (less than 2kB).
However, it works properly only in Firefox 4+ and Opera 11+ browsers...

PacmanDifferent ways how draw and animate Pacman using SVG and SMIL

2011-04-20 | svg | experiment

Couple of days ago I came up with an idea of creating SMIL animated SVG Pacman. But what is the best way how to do it? It was (and still I am) haunted with it, although I was able to solve this issue in many different ways already. Some is very short in code, another best cross-browser compatible, yet another the best looking one... really hard to decide which one is best. So, here is my current work status and question for you: "Can you tell me of another way how to do it?" ;-)

PS: All examples work properly only in Firefox4+ and Opera 11+, Webkit's masking implementation is very sad story... :-(

Rotating redballPresentation: Yet Another SVG Introduction (updated)

2011-04-18 | svg | evangelization

For internal learning purposes of our company I refreshed and updated my one year old presentation about SVG. I made it up to date, reformulated some phrases, removed some examples and added couple of new ones. I think that I can say, that all participants enjoyed the workshop.
It is (still) titled Yet Another SVG Introduction and its purpose is still the same and simple: draw some more attention to this great technology!.
Presentation works best in Firefox 4 and Opera 11, then in Safari 5 followed by Chrome 10 (it is very sad story, how much unstable and buggy is its masking and re-using ability :-( ). Yes, you can see it in Firefox 3.6 or MSIE 9 as well, although you're missing then many nice animations and W3C's slidy not supports MSIE9 properly. To see at least some of them, I separated many embedded examples to individual files and you can see them animated (more or less even in FFX 3.6 and MSIE9 via FakeSmile) here:

PS: I'm not author of all examples and many are from other authors, but simplified a lot. You can also download whole presentation in one archive...
Couple of nice SVG documents on other servers:

Browser ComparisonSVG Browsers Comparison Table

2011-02-28 | svg | browser

This test is another attempt to provide SVG browser support evaluation / comparison table, based on all (well, majority, not all) files hosted on my site.
This is very initial (early) version, imperfect and you can expect more changes to come in the future.
Some demos utilize FakeSMILe to add at least some SMIL support to MSIE9 and you can feel this as a way of cheating, but I feel that it is good to use workarounds whenever available (and are really easy to use...).
Some of the tests are not fair to other browsers (like lmc-org or xhtml test for Batik), but I hope to solve these handicaps in the future.
I decided to add Batik Squiggle to the chart, whose strict error messages are of great value during making SVG demos more cross-compatible (and I've updated/fixed many of the demos during this benchmarking...).
Enjoy the summary / comparison page and stay tuned for more updates in April (not sooner, sorry, because of my vacation on Cuba ;-) Current test results are:

Three Circle Demos: Circles Ying-Yang DemoYing-Yang, Hypnotize and Radiation Sign

2011-02-20 | svg

Sunday's afternoon I've spent playing with script generated circles of different settings, stroke-dasharray and different timing to create several funny results.
Three of them I decided to publish and share with you. They work well in Firefox 4 Beta, Opera 11 and with couple of workarounds in Chrome 9 and Safari 5 too.
They the not work in MSIE 9 because of missing SMIL support.

Big Benchmarking of SVG Particles in Recent Browser Versions

2011-02-17 | svg, benchmark

On year ago published Cameron Adams interesting benchmark comparing different technologies on the simple particles demo. The benchmark had got big popularity and reactions, many of them proposing optimizations and tweaks of the algorithm for different platforms. One of them was Jeff Schiller, offering two logical tweak methods for SVG rendering:

  1. use suspendRedraw() / unsuspendRedraw() methods from SVG specification, however, the only browser implementing these features at that time was Firefox and the result (effect) was not miraculous; it helped, but only a little
  2. use manual detach/attach approach to assure off-screen rendering which helped Opera a bit and Firefox a lot!

Now, a year later, I decided to repeat the benchmarking again with slightly modified local copies, recent browser versions, different particle numbers, enabling and disabling GPU (in browsers supporting HW acceleration) and using, in case of Firefox/Mozilla, new proposed animation scripting model RequestAnimationFrame (RAF) by Robert O'Callahan and Boris Zbarsky. 500 particles is the amount used in original benchmark, 50 and 2500 are my modifications (in 2500 case there is critical not only rendering speed, but computation&DOM binding speed as well). There is what I discovered...

Results of the tests, measured after running for more than 30 seconds, on 32-bit versions of all browsers, running 64-bit Windows 7 with NVidia GPU, 1920×1080 resolution, full screen

50 particlesSafari 5.0.3Opera 11.01Chrome 9.0.597.98MSIE 9 RC + GPUMSIE 9 RCFirefox 3.6.13Firefox 4 Beta12 + GPUFirefox 4 Beta12RAF versionFirefox 4 Beta12 + GPU RAFFirefox 4 Beta12 RAF *
original demo56 FPS / 68% CPU29.7 FPS / 61% CPU123 FPS / 84% CPU242 FPS / 32% CPU148 FPS / 56% CPU39 FPS / 59% CPU83 FPS / 21% CPU42 FPS / 56% CPUoriginal RAF58.2 FPS / 7% CPU42 FPS / 56% CPU
suspend redraw56 FPS / 67% CPU28 FPS / 60% CPU123 FPS / 84% CPU242 FPS / 32% CPU148 FPS / 56% CPU42 FPS / 59% CPU83 FPS / 9% CPU46 FPS / 55% CPUsuspend RAF58.2 FPS / 5% CPU46 FPS / 55% CPU
offscreen rendering50 FPS / 71% CPU29.7 FPS / 58% CPU123 FPS / 84% CPU260 FPS / 32% CPU127 FPS / 60% CPU42 FPS / 58% CPU83 FPS / 6% CPU44 FPS / 54% CPUoffscreen RAF58.2 FPS / 5% CPU44 FPS / 54% CPU
500 particlesSafari 5.0.3Opera 11.01Chrome 9.0.597.98MSIE 9 RC + GPUMSIE 9 RCFirefox 3.6.13Firefox 4 Beta12 + GPUFirefox 4 Beta12RAF versionFirefox 4 Beta12 + GPU RAFFirefox 4 Beta12 RAF *
original demo33 FPS / 69% CPU14.1 FPS / 55% CPU64 FPS / 72% CPU51 FPS / 54% CPU29 FPS / 58% CPU2.4 FPS / 63% CPU3 FPS / 78% CPU2.5 FPS / 64% CPUoriginal RAF3 FPS / 76% CPU2.5 FPS / 68% CPU
suspend redraw33 FPS / 69% CPU11.5 FPS / 57% CPU64 FPS / 72% CPU51 FPS / 54% CPU29 FPS / 58% CPU4 FPS / 61% CPU6 FPS / 77% CPU4.3 FPS / 62% CPUsuspend RAF6 FPS / 71% CPU4.3 FPS / 58% CPU
offscreen rendering30 FPS / 59% CPU18 FPS / 58% CPU41 FPS / 75% CPU40 FPS / 54% CPU27 FPS / 58% CPU12 FPS / 54% CPU34.5 FPS / 54% CPU18.1 FPS / 52% CPUoffscreen RAF31.5 FPS / 27% CPU18 FPS / 52% CPU
2500 particlesSafari 5.0.3Opera 11.01Chrome 9.0.597.98MSIE 9 RC + GPUMSIE 9 RCFirefox 3.6.13Firefox 4 Beta12 + GPUFirefox 4 Beta12RAF versionFirefox 4 Beta12 + GPU RAFFirefox 4 Beta12 RAF *
original demo9 FPS / 58% CPU1.8 FPS / 53% CPU13.2 FPS / 59% CPU9.9 FPS / 53% CPU8 FPS / 58% CPU0.5 FPS / 76% CPU0.5 FPS / 78% CPU0.5 FPS / 76% CPUoriginal RAF0.5 FPS / 78% CPU0.5 FPS / 75% CPU
suspend redraw8.5 FPS / 58% CPU1.8 FPS / 53% CPU13.2 FPS / 59% CPU9.9 FPS / 53% CPU7.9 FPS / 58% CPU0.7 FPS / 72% CPU0.8 FPS / 76% CPU0.7 FPS / 72% CPUsuspend RAF0.7 FPS / 76% CPU0.7 FPS / 74% CPU
offscreen rendering4.3 FPS / 60% CPU6.4 FPS / 53% CPU10.7 FPS / 59% CPU8.5 FPS / 54% CPU7.1 FPS / 58% CPU3 FPS / 51% CPU7 FPS / 52% CPU4.9 FPS / 52% CPUoffscreen RAF7.2 FPS / 52% CPU4.6 FPS / 52% CPU
Color legend more than 30 FPS = OK less than 30 FPS = KO* has no part in graphs below...

Graphical representation of scaling across different browsers / number of particles + Firefox CPU demands

My Conclusions

Drawing On The Net

2011-02-13 | svg

Title clipart/demo from SVG Open 2003 and finetuned to Adobe SVG Viewer 2.0 only, is not rendered properly in any of modern browsers :-( However, after adding units to font sizes, then at least Firefox 4 Nightly is able to repeat ASV feat (on click) from so many years ago perfectly. Great! Chrome has problems with masking and fonts Opera with just fonts...
PS: One more little update for Runners II. banner version for SVG Web...

Runners2Banner II. (experiment update) + other news

2011-02-12 | svg

Original runners banner I've tried to "copy" couple of days ago is UnicreditBank one and is quite easy one. Unfortunately, I'm too lazy to do the bitmap extraction work / clipping again, so I only modified slightly my original experiment to a bit more resemble timing and behavior of original. In practice it meant adding keySplines timing and made it run as one animation with stop and after-fade-out effect again, rather then continuous one. That's all, quite easy, it took me about thirty minutes.
Update 2011-02-13: I gave SVG Web a try with my latest demo and result is quite acceptable; the most annoying incompatibilities are problems with fill:none, stroking and generally with display/visibility properties...
Other news follow:

RunnersBanner experiment + unsorted news

2011-02-08 | svg

Another experiment is out, this time imitating in very free way SWF banner I had been shown week ago (sorry, I've no link/file right now). Once I'll have the link to the original SWF banner I plan to update this one to copy it as closely as possible. It is example of good old parallax scrolling animation technique.
FakeSMILe (for FFX 3.6/MSIE 9) renders this banner correctly for only one run and then some errors appear... :-( and is quite choppy as well)
It took me two hours to gather and prepare three bitmaps (20kB sky + 25kB tree + 24kB runners) and one more to put it all together (rest of the graphics is pure SVG, 4kB). Also...

Firefox 4.0 big finish

2011-01-31 | mozilla

Firefox logo Mozillians, GO, GO!!! I wish you luck and energy (both physical and mental) to solve remaining (and very tough, no doubt) Gecko 2.0 blockers and finish Firefox 4.0 on schedule!!!
Although I'm a bit pessimistic about February, I pray from the deep of my heart for March...
Go on, guys!!!

Gaming Mozilla Labs - Game Gallery

2011-01-13 | svg, game, mozilla

I'm a bit sad that I missed current Mozilla's game competition, but I've had not enough free time in last two months... but now I'm enjoying all subscribed projects and can recommend you to do the same. Many of them are only JS/HTML/CSS based, CANVAS is very popular and only few use SVG or WebGL, but all are great!!
Games whose attracted my attention are for example:

Houses on the horizonSunset Over City SVG Demo

2011-01-09 | svg

My first post in 2011 is about introducing you my new demo. It is based on couple of heavily modified open cliparts, changing sun rays to be the effect created by circle stroke-dasharray and thus animatable in very easy way (and is also much smaller in size of source code). Then I added animation of boat, bird flock, added some background music and Voila' - demo is complete! It took me about four hours to do it and I hope you'll like it. It is non interactive demo and lasts approx. 50 seconds.
It is looking best in Firefox 4 Nightly, then in Opera 11 (but crashing from time to time), Chrome/Safari renders sun rays in not so pretty way and slight opacity and gradient fill changes causes reflections in water to flicker a bit. Using FakeSMILe forced the demo to run somehow in Firefox 3.6 as well, but it was far from perfect, and MSIE9 refused to animate at all, so I removed FakeSMILe completely...

Xmas Tree DemoMerry Xmas!!, dear SVG community...

2010-12-17 | svg

Today is my last opportunity to blog before Christmas Eve, since now on I'll have no access to the internet. Following tradition from last year I'm bringing you gift again - Xmas Tree Demo. It is very simple, but I had no more time than two hours to create it and I hope you'll enjoy it a lot. It has audio part, thanks to the FakeSmile it runs in every modern browser (although best experience is in Opera and FFX4b) and I wish you: MERRY XMAS!!!!!!!!!!!!!!!!!!!!!
PS: I discovered that using SVG file with audio inside as IMAGE on the page, that it incredibly, really and truly plays the music!! I had been amazed... I'm not sure, if it is intention or side effect, but I'm replacing it with mute one, to not shock visitors unexpectedly on title page, but I encourage you, to click the link and enjoy the demo in big size and with the music... ;-)

Firefox 4 Nightly has got support for SVGAnimatedPoints of polygon/polyline elements

2010-12-14 | svg

Great Kevin Lindsey created many years ago bunch of fantastic SVG resources. His site is very inspiring even in these days and I can recommend it to you warmly as a MUST for every SVG interested developer/coder. Many of his demos/tutorials are working pretty well in modern browsers (like mouseRepel), some, however, have some problems.
One of the last missing pieces to SMIL support in Firefox 4 is ability to animate points of polygons/polylines, which is almost done. Kevin has cool example for this, simulating pseudo-3D animation, but because of invalid values (floats) for color numbers I had to modify original demo a bit (only ASV and Opera are able to render it properly), so if you're running very latest build of Firefox 4, Opera, Safari or Chrome, you can try this link.

FakeSmile and MSIE 9/Firefox 3.6

2010-12-12 | svg

I added FakeSmile script to some simple SMIL demos to allow them working even in Microsoft's next browser - MSIE9, or current stable version of Firefox 3.6. Those working (at least partially) are:

If animation does not start, try to reload the page (F5 / Ctrl+R). It happens sometimes...

Unsorted news and demos

2010-12-12 | svg

There are couple of modified demos (I downloaded some years back and cannot find their source again) or direct links to some cool SVG/SMIL stuff (I apologize to all the authors I don't know and so cannot announce there...):

AgroBio Intro and Pasic Intro

2010-12-12 | svg

Back in years 2002 / 2003 I created couple of commercial SVG introduction for small local companies from Opava City. They were for interactive CD ROMs and forced installation of Adobe SVG viewer was no problem. I found source codes for two of them three weeks ago, also original music, but all raster pictures used are lost hopelessly... :-( I played with those demos for a while, making them to be quite well cross-browser compatible. There is "original" bug in interactive Pasic demo demo, but I left it there unfixed... AgroBio demo has no user interaction and is almost perfect. There are small differences/rendering incompatibilities, across different browsers (missing letter-spacing in Firefox in Pasic, not working image shrinking in Webkit in AgroBio), but generally everything is working good enough, don't you think? Pictures in AgroBio are snapshots of Opava City, pictures in Pasic are snapshots of girls related to Starwars theme... :-)))

Short news

2010-12-05 | svg

SVG Matrix Animation

2010-12-04 | svg

Being angry that so many people is playing around with CSS transitions, but those demos working properly in Webkit based browsers only, I prepared new demo, inspired both by the famous movie and GirlieMac's Matrix CSS demo. Current limitations are many, but as a proof-of-concept I consider it good enough (it took me less than three hours).
Best working in Chrome 7+, Opera 10.5+ does not support well animation of fill properties of web fonts and Firefox4 Beta plays sound in very very choppy way (and embedding it to be part of the SVG does not help). If you're experiencing performance issues, just resize browser window to make it smaller and animation should become fluent. Not able to find better font, I'm using the same TTF as GirlieMac, and I'm not happy about it, but...

Google Chrome 8.0 is out

2010-12-03 | svg

My recent Fancy Menu Experiment works even worse in version 8.0 than 7.0, there are some ugly filter-errors :-((, but however in Adobe SVG samples is Chrome doing better than before, gaining extra 27 points (although there are some worse rendering exceptions as well, like fePixels.svg or broken game SVG Submarine Assault :-(((( )


Fancy Menu Experiment

2010-12-02 | svg

Having Acer notebook with W7, I'm forced from time to time see Acer Arcade menu, which is 3Dm glowing and I like it actually... but yesterday I realized, why not try something similar in SVG and SMIL? And so there is result of my doing ... I have it done quickly in 20 minutes or so, but then got stuck for another hour while fighting for better cross-browser compatibility and performance. Current version is neither fully different browsers compatible nor performing very well, but it is close to what I planned to achieve. Problems I've encountered were many: Firefox is able to create gradient color-to-transparent, but other browsers not, so I had to use filtering, which is in FFX performing worse; Firefox does not allow to set filter to empty string while other browsers do; Chrome is not applying of the filter effect after onload for some strange reason.... and this list can continue and continue. But, I've lost my nerves for today, so I'm publishing it as-it-is + some rendering controls (everything is done via SMIL, no scripting used). I hope you will like it and welcome all comments or tips for improvement... (without all effects animation is really smooth.. ;-)
Works pretty well in Firefox 4 Beta, Chrome/Safari 5+ and Opera 10+

Old Adobe SVG samples are back again...

2010-10-28 | svg

I updated my old page again, added many new (but actually old ;-) demos, added thumbnails, better descriptions and re-evaluated recent individual browsers success in rendering them. I still find many of them perfect for showing SVG power to beginners. I worked many incompatibilities around, but still are many missing and I welcome all your tips for improving cross browser compatibilities.
Opera is still best performing SVG browser, followed with Firefox 4beta, Chrome and others...
Update 2010-11-29: Corrected/tweaked two demos and one new introduced... and after several complaints, I added test for latest preview of MSIE9 as well...

Quick bezier animation experiments

2010-11-13 | svg

I spent funny hour playing with good, old, SVG Bezier Animator and there are the results (simple and just playing with the editor):

Some news in short

2010-11-10 | svg

First SVG use on LMC's web

2010-10-09 | svg

Well, first early bird for my company, LMC, we have finally some real SVG in use (map of Czech Republic as search interface per locality) on our job portal. Let us hope, it's first in long queue of implementations... ;-)

Company organizational structure in SVG

2010-10-07 | svg, xslt

I work for Czech company LMC and one case which is our HR dpt. solving on regular basis is graphical representation of organization's structure. Master data are maintained in ERP system (IFS), which offers graphical features equals almost to zero. I bit better approach was visualization using Lotus Notes (IBM), but even there were many limitations, esp. in interactivity and printability. And so I offered to try SVG. My colleague Hynek Musil is very skilled in XSLT and current prototype is already working great!
Current solution is: two manual reports from ERP to CSV files and convert them to UTF-8. Then there it is where browser comes, loading those files, parses them using XSLT/eXSLT to XML tree in memory and then running another transformation to produce visual structure in SVG. There is dedicated CSS for good print and are there onclick events which re-runs XSL Transformation with (according to event parameters) rebuilded XML tree and as a result, there is highly interactive graph in SVG. What do you say? It is temporary, semi-automatic solution, but we're already working on tuning this process up. Data should be on-the-fly retrieved from some web service, graphics improved, compatibility extended from Firefox to other browsers (main limitation are differences in eXSLT implementations, used for tokenization of CSV, but since Firefox is our company browser it is OK for intranet purposes) and who knows what else...?? ;-)
IMHO it is a good use and demonstration of modern technologies and almost everything using "only" web browser...
PS: Firefox only...

No more tweaks for Firefox 4.0+

2010-10-06 | svg

Long time ago I released some demos tweaked to work in Firefox trunk and the tweaks were because of lack of support for some SMIL features primarily. Well, Firefox grew to be much more featureful and thus I can remove some tweaks of the past. So I started with Digging Animation and removed scripting events and replaced and let genuine SMIL events to drive the interactivity, and then moved to the Hourglass demo and removed animateTransform tweaks for animateMotion and replaced them by native animateMotion itself.

PS: Opera and Webkit implementations are of 180 degrees different opinion regarding to rotate attribute implementation of animateMotion, hmm... :-(
Update 2010-10-06: My thanks to Daniel's Holbert for explanation; I applied workaround (avoided transform on source path for animateMotion) and now Hourglass demo works properly in all SVG+SMIL capable browsers... WOW!! ;-)
Update 2010-10-07: Daniel created bug for this, so even this difference in behavior should be fixed soon...good...

SVG Replicator

2010-09-16 | svg

On SVG Open 2010 presented David Dailey excellent tool called "SVG Replicator" and you can use it to create very easily very 3D looking effects. I prepared briefly (in 5 minutes) one experiment, but its potential is much much greater - check David's demos out and do not forget to say WOW .. and start experimenting yourself... ;-)

SVG Puzzle Demo, MSIE9 Beta

2010-09-15 | svg

Great SVG Jigsaw game around by HRJ, don't miss it. And, of course, M$ finally made MSIE9 Beta official. Many demos seems to be working or close-tobe-working, so it seems I'll be forced to consider testing my demos in this one as well. Performance looks fine, in some tests is FFX4 nightly better performing, in some wins MSIE9, but generally I'm satisfied with both of them... ;-)
PS: Some new M$ demos looks fine, especially Pacman SVG remake, well, except of non MSIE9 frame-rate, hmm... ;-)

Second Update of Vacation in Norway Demo (v1.3s)

2010-09-13 | svg

After getting some more feedback I decided to update Norway's vacation demo once more again. Here is list of changes:

MouseOver&Click Toy Demo

2010-09-10 | SVG

Another micro demo landing. It took me less than 40 minutes to prepare it as proof of concept for neat Flash effect which saw in one ad and I'm not able to find (and link) again :-9 It demonstrates SMIL easiness for doing common Flash effects and only DOM Event/JS hack there is for Gecko's current inability to animate string properties.
Works pretty well in Firefox 4 Beta, Chrome/Safari 5+ and Opera 9+. Enjoy...

Bubbles demoSVG-AS-IMAGE landed to Gecko

2010-09-09 | SVG, Gecko

In case you've not noticed, support for SVG-AS-IMAGE finally landed to Gecko's trunk, so now you can use SVG from HTML via common img tag and its src attribute, in CSS via background-image and of course from SVG itself via image element and its xlink:href attribute. GREAT!! Thank you Daniel, Roc and others...

Vacation in Norway Demo Updated

2010-09-07 | svg

Well, I received some improvement tips and tried to implement them, and here is the list of changes (but I'm still more than pleased to receive more, so please, do it ;-):

SVG WOW site updated

2010-09-06 | SVG, Canvas, JavaScript

Erik and Vincent started (after SVG Open 2010) updating their cool site of SVG demos. They added four new demos, promise more to come, and my favourit one is Vincents's Camera demo.

Short but wonderful JavaScript demos

2010-09-06 | JavaScript

Incredible contest of 1kB JS demos contains tens of very very cool demos! Most of them use canvas, SVG only couple of them, but this is in case, where source-code size matters, quite acceptable. Some pieces are really amazing, check them yourselves! ;-)

Vacation in Norway (SVG Demo)

2010-09-06 | svg

So, it happened, and I finished SVG demo/presentation from my this year's second beatiful vacation, this time in Norway. I tried to make it different from Ireland's one and you can judge how much I succeeded ;-)
This time I used scripting as well, because it is much more easy way of doing repetitive tasks and I'm lazy creature, that's for sure... ;-) However, as it happened, Webkit guys are still failing to implement scripting/dynamic API for animateMotion element (1, 2), and thus I was forced to modify this elegant version to more (read Webkit) compatible one. I used Gecko's dynamically generated source code listing and then hacked resulting data to more static, but cross-browser compatible version, except of MSIE9, though. Creating demos for this beast I'm leaving for near future (I feel SMIL absence as very limiting).
Demo uses our photos, SMIL, masking, scripting and some free SVG cliparts. Demo size is 53kB (or 61kB in case of static version) of uncompressed SVG and 707kB in 20 JPEG pictures.
It works well in Firefox 4Beta/Nightly Trunk Builds, Opera 10+, Chrome 6+ and Safari 5+ - so everything except of mentioned MSIE9beta.

Any ideas for some improvements are more than welcome and I thank you for them...

SVG WOW site updated

2010-09-06 | SVG, Canvas, JavaScript

Erik and Vincent started (after SVG Open 2010) updating their cool site of SVG demos. They added four new demos, promise more to come, and my favourit one is Vincents's Camera demo.

Short but wonderful JavaScript demos

2010-09-06 | JavaScript

Incredible contest of 1kB JS demos contains tens of very very cool demos! Most of them use canvas, SVG only couple of them, but this is in case, where source-code size matters, quite acceptable. Some pieces are really amazing, check them yourselves! ;-)

Vacation in Ireland Demo Updated

2010-08-23 | svg

After publishing my last demo I received some feedback on improvements. I've had no time since today to implement them...and because, if you've not noticed, Gecko has got support fo SMIL events/repeats (thank you Brian Birtles, Daniel Holbert and others from Mozilla...), I also involved support for this feature into the demo. So the changes of version 1.2 are:

It works well in Firefox 4 Beta5/Nightly Trunk Builds, Opera 10+, Chrome 5+ and Safari 5+.
Similar and maybe even better presentation from my Norway vacation is on its way, so be patient, please... ;-)
...and in case you do not know it yet, support for SVG-AS-IMAGE is coming to Firefox 4 Beta 5 soon as well... ;-)

Update 2010-08-24: Minor update again - adding one more forever lasting animation to avoid (again) annoying Webkit's bug with stopping all animations/SMIL events, when animateMotion is done...

PS: Since Mozilla is for good reasons not going to implement animateColor, I updated old Adobe's discrete_vs_linear.svg demo to work with standard animate...

Vacation in Ireland (SVG Demo)

2010-07-25 | svg

After my return from vacation in Ireland I came up with idea of its visualization using SVG. Well, it took me some time to get to it, but finally I succeeded and so I'm introducing you brand new demo of SVG's awesome power. I used excellent map of Ireland from Wikipedia and I pretty damn well utilized Doug Shepers Catmull-Rom path prototype to create the route around the island. My girlfriend Jana shot more than 6000 pictures and selecting subset of only 20 pictures for this demo was really tough task, believe me... ;-) So many beatiful places are missing there... hmmm... but space is limited on the map, so there was no other way...
Demo uses 100% SMIL, no scripting and everything except of photos is vector based. Overall capacity of this demo is 213kB of uncompressed SVG (Ireland's map is very detailed!) and 620kB of 20 JPEG pictures.
It works well in Firefox 4Beta/Nightly Trunk Builds, Opera 10+, Chrome 5+ and Safari 5+ - so everything except of MSIE9beta.

Any ideas for improvements are welcome! ;-)

Bitmap Filter Bump-Mapping Experiment

2010-06-1 | svg

When I saw Happy Buddha normal-mapping demo of Canvas (excellent site, by the way), I decided immediately, that I have to write SVG demo doing the same, but in the much more easy and clean way, using SVG filters. But it took me some time to get to it. Finally I succeeded and you can see the result.
I had simplicity on my mind, so I'm luminancing alpha channel from source image rather than producing one additional bitmap with 3rd dimension. Results are maybe not so realistic, but it is much more easy for you to understand and use it, is it not? Only 14 lines of code for whole demo is not much, ehm? ;-)
However, because SVG filter's implementation is not finished in Webkit/Chrome/Safari yet, it is working well in Opera 9+ and Firefox 3.5+ only.

PS: Guys at Mozilla fixed SMIL animationTransform for gradientTransform attribute, so my Drawing Animals demo is now fully working in trunk builds, great! ;-)

Starwars Intro Demo

2010-05-16 | svg

When M$ announced second MSIE9 preview, it had been accompanied with some new demos and one of them based on famous Starwars introductory text scrolling. It is quite simple demo and its resemblance to original is pretty low. It is not my opinion only, many others feel the same, and one of the comments points to another, much better attempt.
Unfortunately, its drawback is that it is based on 3D-perspective proprietary CSS3 transformation, and it works on Safari on OSX only; no other browsers are capable of displaying it properly/at all, hmmmm :-(
But it inspired me, however, to prepare SVG version; the toughest task to solve was how to deal with 3D perspective transformation with SVG's 2D - actually anti-3D concept. Well, I tried some different approaches, but only one happened to be acceptable enough (though not without flaws, of course) and differs from original concept: scrolling emulated perspective is shifted to be not center-based, but is based to be right-to-left, but my feeling about it is, that it is almost as much as can be gained (without some hard scripting in mind). I also tried to be more close to original movie introduction and result you can see and judge...
Some implementation comments:

If you've any comments / improvement suggestions etc., I welcome them, I truly do!! ;-)))

Gecko has support for animateMotion and I present two new demos: Catch The Mouse and Drawing Animals

2010-04-29 | svg

Today landed support for SMIL animateMotion element to Gecko's trunk and support is available in nightlies already (thank you Daniel Holbert. ;-). I watched for some time its progress and that's why I've ready some brand new demos already.

Catch The Mouse is first of them. It combines animateMotion and scripting to create effect of escaping mouse and man with broom trying to catch (hit, actually) escaping rodent. (version without fade-off effect for better Gecko's performance, esp. on Linux systems...)

Drawing Animals is the second one. It is again combination of animateMotion and scripting, trying this time to simulate pen drawing outline of different animals.

Both demos uses free cliparts downloaded from www.clker.com and www.openclipart.org (and modified/simplified a bit).
Technical issues (cross browser implementation differences) I encoutered during creating these demos were:

  1. WebKit does not support DOM method beginElement() on animateMotion element yet, but for this one I had been able to place a workaround.
  2. Gecko and WebKit both suffers from not supporting animateTransform of gradientTransform attribute. No workaround there, but I filled bug report to both projects.
  3. Presto has issue with wrong computation of CurrentTransformationMatrix (CTM) in case when browser's zoom is set to different than 100% value. For this one I developed no workaround either and created bug report issue again.

With exceptions of those last two small buts/flaws, both demos work well enough in Opera 10+, Firefox 3.7+ and Chrome 4+/Safari 4+.

Firefox Static Simplified Logo And Firefox Logo Animation

2010-04-16 | svg

Yesterday I did another small experiment. I took Firefox logo created by Jon Hicks and reduced&modified by Doug Schepers and made even more simplifications. My intention was not to keep precisely the same quality and final look but stick to the very similar look and quality, but with less elements and reduced size. Well, I more or less succeeded and result is there for you, if you'll find some use for it. It is still keeping good internal structure and semantics, of course.
Better performing logo I needed for my animation experiment, 'cause original logo performed quite bad... :-(
There exists also KDE icon of Firefox logo, which has however quite simplified design and differs from original quite a lot (on detailed zoom, but as icon it is good, yes). I tried (hastily) to optimize it as well...
All static versions are flawless everywhere ;-) , animated version runs well in Opera 9+, Firefox 3.7+ and Chrome 3+/Safari 4+ have some slight issues with text fill shift, but is acceptable...
Some comparing data below:

Update on 2010-04-19 - even more variants of Firefox SVG logo added, thx. Jeff for Scour suggestion...

Minified Country Map of Czech Republic and Slovakia

2010-04-15 | svg

Couple of weeks ago I finished minifying of country maps of Czech (size of 6kB) and Slovak (size of 8kB) republics. Goal was to have them really small to be of easy use almost everywhere. Another condition was to have separate paths for every region to be able to highlight / distinguish them.
There are many similar maps on the web, on Wikipedia sites esp., but they are all quite huge (from bytes amount point of view) and almost never 1 region = 1 path based. It could be useful to many other Czech and Slovak web designers, so I'm publishing them freely now...

Clickable SVG Maps of Czech Republic

2010-03-22 | svg

My employer, as a company, offers many times, during customization process for our customers, clickable map of Czech Republic localities (regions).
Traditionally it is implemented as HTML textarea or Flash clip. However, integration with page is in Flash case a bit clumsy and not flexible, in case of changing API and parameters again and again. HTML Clickable map is bad idea because of polygon creation and different sizes of maps. After my presentation about SVG people responsible for customizations asked me, whether it will be possible or not to use SVG for those maps...
"But of course...", was my only logical response ;-) and I started preparing some prototype. And there are my initial outputs, which should serve as inspiration for other guys, primarily... In my mind, during creating these prototypes, I had primarily cross-browser and version functionality and easiness of use. Map is the same in all the examples, 19kB long + some javascript and configuration rules + SVG Web resources.

Follows list of my current attempts:

ZX Spectrum emulator in JavaScript

2010-03-19 | JavaScript

I'm watching this project for some time already, and it's really amazing! It's fast, with sound (beeper emulation), well playable (I mean quite fast) and everything just in your browser.
Really good, who imagined something like this to be possible five years ago? And Cavern Fighter IS on the list of available games, of course... ;-)))

Microsoft is going to support SVG in IE - It's official now

2010-03-16 | svg

Wow, after phenomenal Opera 10.50 filling majority of browser related articles during couple of previous weeks, here comes new exciting event. MSIE will support SVG!! Finally...
Several unsorted notices and thoughts:

Presentation: Yet Another SVG Introduction

2010-03-12 | svg | evangelization

Our company largely supports internal education of employees. I decided to have one about SVG and a little bit evangelize it even more. And because I've spent quite a lot of time with creating it, I'm giving it now freely available to everyone.
It is titled Yet Another SVG Introduction and its purpose was/is simple: draw some more attention to this great technology! It contains a lot of resources taken randomly from web (with references listed down, of course ;-), linked directly and also couple of small demos prepared directly for the sake of this presentation (like propeller or car demo). I hope you will like it as well, yesterday's sixteen attendees did (or I rather hope they did... ;-)
During making presentation I discovered three important facts (for me at least, they are new):

- current Firefox trunk has broken some masking cases, like Adobe's Wonder demo, working properly some weeks back
- Webkit has bug in SMIL timing model; if there are only animate elements in <defs>, they are not triggered to start as long as there is no direct animate element as well; so workaround to trigger them add one and it will start working; practical example is there: Spirit animation not animating in Webkit and spirit animation animating in Webkit (with added one more, direct animation, for smile)
- both latest Opera(Presto) and Webkit have somewhat working implementation of <foreignObject> already, wow...


2010-02-24 | svg

Although there is no official buzz around Gecko SMIL/SVG improvements, gus at Mozilla are not sleeping and working hard. I assume this from the fact that recent Gecko version is able to correctly render and animate many demos failing in the past. For example:

Go on guys, and thank you!! :-)

SVG SMIL Clouds Demo II.

2010-01-17 | svg

Inspired by Daniel Holbert's Clouds Demo I asked him, if can I use it and modify it a bit...
He kindly agreed and, as a result, after effort slightly longer than two hours, I'm coming out with extended version, where major changes are rewritten timeline based animations to sandwich (syncbase) model, improved graphics and added couple of new effects. I hope you'll like it... ;-) Fonts are of different sizes in different SVG browsers; this demo is, however, best viewed in Gecko trunk nightbuilds.

SVG Cowboys Game cross-browser experiment

2010-01-13 | svg | game

Back in the early 2004, I created game called SVG Cowboys for Adobe SVG Viewer (exclusively), depending heavily on SMIL. Today, since SMIL/SVG implementation in common browsers is getting quite mature, I tried what I always wanted: patch the game in a way, to be playable/runnable in Gecko, Presto and Webkit. And this dream comes true! It is not perfect and this version is simplified and not as good as original, but still... decent attempt, I'd say. During compatibility conversion I was forced to face many problems and there is (brief) list of what I did:

I know about many and many issues, in this conversion, but I'll welcome your bug reports, of course!!
PS: For Gecko users - do not forget to use latest trunk nightly build, release from version 20100113 on!

Gecko has SMIL syncbase support now

2010-01-13 | svg

Many and many thanks to Brian, Daniel and others - Gecko in the development trunk has from today patch, enabling one of the hottest SMIL features - support for begin and end attributes of declarative animations based on other animation (named) events state (aka sandwich timing model). Bravo!! guys ... and thank you again!!!

SVG Cavern Fighter 1.03 bugfix release

2010-01-02 | svg | game

Only bugfixes in this minor update + compatibility table extended. Changes are:

Browser / Platform SMIL Animations (2p) Audio Support (1p) Audio Prefetching (1p) Crashes (1p) Number of files / Size to download (1p) Feature Points
Firefox 3.5.6 / Wxp,W7,Linux,MacOsX no yes, perfect (ogg) yes, via data:base64 embedding never 1 / 154kB 4
Firefox 3.6 Beta 5 / Wxp,W7 no yes, perfect (ogg) yes, via data:base64 embedding never 1 / 154kB 4
Firefox 3.7a / Wxp,W7 yes yes, perfect (ogg) yes, via data:base64 embedding never 1 / 154kB 6
Firefox 3.7a / Linux yes, but not fluent yes, with glitches(ogg) yes, via data:base64 embedding never 1 / 154kB 4.5
Opera 10.10 / Wxp,W7 yes yes (wav) partial, via loud preloading (bad solution) never 21 / 1349kB 4.5
Opera 10.10 / Linux,MacOsX yes, but not fluent yes, with glitches (wav) partial, via loud preloading (bad solution) never 21 / 1349kB 3.5
Opera 10.5a1 (2009 build) / Win7 yes yes (wav) partial, via loud preloading (bad solution) a lot 21 / 1349kB 3.5
Opera 10.5a2 (2010 build) / Win7 yes yes (ogg) yes, via data:base64 embedding sometimes 1 / 154kB 5.5
Chrome 4.0.249 / Wxp,W7 yes yes, but with glitches (ogg) yes, via data:base64 embedding sometimes 1 / 154kB 5
Chrome / MacOsX yes yes (ogg) yes, via data:base64 embedding never 1 / 154kB 6
Safari 4.0.4 / Wxp,W7 yes no no never 1 / 154kB 4
Safari 4.0.4 / MacOsX yes yes (ogg) yes, via data:base64 embedding never 1 / 154kB 6

Three perfect browsers are now available for game play - Firefox 3.7 on Windows and Safari/Chrome on MacOsX and latest alpha of Opera browser is almost as good. Sound glitches and not fluent animation in majority cases is due to the out of CPU performance issue, so really really looking forward to HW acceleration of graphics and sound...
Performance tip for fluent gameplay: disable Object's mark and Decorations options (and in the extreme disable also Sound support)

SVG Cavern Fighter 1.02 compatibility and optimization release

2009-12-28 | svg | game

Today I spent part of my sickday by tuning compatibility of the game for other browsers and solving audio prefetching issues. I did quite well and cross-browser compatibility is much better now.
Switching for Firefox from more individual files wav audio to single file and ogg + compression brings many benefits:
* 23 files to download previously versus 1 file now
* 1005kb to download previously versus 154kB now
* audio prefetching working well versus working perfectly now
* 346kB has non-compressed single file versus 154kB with best gzip compression available
and performance drop is minimal (by my amateurish measurements ;-)
Changes are:

Table of current game's compatibility and features

Browser / Platform SMIL Animations (2p) Audio Support (1p) Audio Prefetching (1p) Crashes (1p) Number of files / Size to download (1p) Feature Points
Firefox 3.5.6 / Wxp,W7 no yes, perfect (ogg) yes, via data:base64 embedding never 1 / 154kB 4
Firefox 3.6 Beta 5 / Wxp,W7 no yes, perfect (ogg) yes, via data:base64 embedding never 1 / 154kB 4
Firefox 3.7a / Wxp,W7 yes yes, perfect (ogg) yes, via data:base64 embedding never 1 / 154kB 6
Opera 10.10 / Wxp,W7 yes yes (wav) partial, via loud preloading (bad solution) never 21 / 1349kB 4.5
Opera 10.5a / Win7 yes yes (wav) partial, via loud preloading (bad solution) a lot 21 / 1349kB 3.5
Chrome 4.0.249 / Wxp,W7 yes yes, but with glitches (ogg) yes, via data:base64 embedding sometimes 1 / 154kB 5
Safari 4.0.4 / Wxp,W7 yes no no never 1 / 154kB 4

As you can see, game is best playable with Firefox 3.7, then Chrome and stable Opera, follow Safari, Opera alpha and Firefox 3.5 and 3.6 are the last, because of missing support for SMIL animations.

SVG Cavern Fighter 1.00 Released

2009-12-27 | svg | game

So, doing faster than expected, I'm releasing version 1.0 of my latest game ... right now!! :-) I updated a lot of minor features and hope you'll enjoy all enhancements with pleasure.
Do not forget to upgrade to latest nightly version of Firefox, even day or two elder versions (before 2008-12-27) are crashing! Opera is also performing quite well, except of in-game music playback (lacks support for ogg format) and is a bit slow, but good enough (latest stable version 10.5 alpha is fine). Webkit based browsers still miss support for dynamically created animations :-(
I do not plan to add more features to the game so far, only fix reported bugs (Thank you, Petr Hubacek, for excellent betatesting!). Only feature I've still bad feeling about is audio prefetching - all advices are welcome.
My intention had been to pack all audios using base64 and embed to the single document using "data://" protocol. Unfortunately, audio HTML5 JavaScript API does not support it and Opera does not support foreignObject properly (where data protocol should work in source attribute of <audio> tag), so if I'll discover/know some better way of prefetching, I'll definitely try it! List of changes in this major version is:

Update on 2009-12-28 12:00

Opera 10.5 Alpha

2009-12-25 | svg

Pre-release version of incoming Opera version looks very promising - although stability is not good, performance of both JavaScript and rendering is really really good!

SVG Hourglass demo

2009-12-24 | svg

!!!Happy Christmas to all SVG believers!!! :-) :-) :-) Today I'm announcing my another small demo - SVG Hourglass - as a gift for you ;-)
Has a lot of imperfections, primarily due to the Gecko limitations (missing support for animateMotion, animate begin=event etc.), but it is good enough to be published already, esp. on such occasion ;-)
So, enjoy it, and again, HAPPY CHRISTMAS, EVERYONE!!
It runs great in Firefox 3.7+, Opera 9+, ASV and Chrome 3+/Safari 4+

Minor update of Cavern Fighter 0.88

2009-12-15 | svg | game

Because there's not enough of free time, and probably till the end of year it will go no better, I'm releasing this minor and primarily bugfixing release of my recent game. Betatesters still more than welcome!! ;-) Changes are:

SVG Cavern Fighter 0.87

2009-12-13 | svg | game

So, Christmas shopping and packing almost done (Imagine! Me and my girlfriend bought and packed more than 70 gifts!!). Unfortunately, baking of sweets barely started... :-(
Anyway ... I had been able to spent couple of hours on updating and fine-tuning the game even more as well. Below you can, as usually, found log of changes made. Enjoy it ;-)

SVG Cavern Fighter 0.86

2009-12-07 | svg | game

Thank some of you for feedback. I'm trying to do progress primarily in mentioned areas. Safari on Windows is working strangely, but references from Mac are not so bad... Change log for this version is:

SVG Cavern Fighter 0.85

2009-12-05 | svg | game

Another couple of hours spent and I really feel game is becoming quite good looking and funny. Added above else audio support and changed look a lot.
Firefox 3.7 on Windows is my development and target platform, I do not deny, so I welcome feedback/hints from other platforms. Just now, during this release, I discovered that Opera is terribly slow (even with small window) and sounds are not working in Chrome (is it possible Chrome does not support WAV?) and window.resizeTo() seems to be working only in Firefox...
But, it's still beta version, remember ;-) Now I desperately need beta testers, feature sugestors, code/graphics/sounds contributors - simply, every help is welcome!!
Please, contact me / give me your feedback / via e-mail on marek(dot)raida(at)gmail(dot)com
Changes from last public version are:

Update 2009-12-06: Opera browser performance could be improved a bit by decreasing SVG target frame rate (about:config, SVG fold, Target frame-rate, set value to 15, and optionally also Rendering Quality, set value to 15), followed by browser restart...

SVG Cavern Fighter Update (v0.83)

2009-12-01 | svg | game

Thank you for your feedback. Most requested is better visualization of collision and here comes an update... ;-)
Change log:

Game: SVG Cavern Fighter Public Beta

2009-11-30 | svg | game

I feel that I've spent quite enough time on my latest game to announce it public beta and gather some feedback or obtain even some hints/advices/help on further development ;-) Rough idea is based on good old speccy Scramble like Cavern Fighter game. My game is playable already and although many ideas are not implemented yet (and maybe never will), many features are in place already:

What is not implemented and should be, before can be game considered at least version 1.0 is:

I appreciate any help, especially related to performance tweaking, cross OS/Browser compatibility, audio, but also with graphics, game ideas or bugs. Contact me via e-mail, please, marek(dot)raida(at)gmail(dot)com. My goal is to make game fully working in
Firefox 3.7+ with SMIL turned on (about:config => svg.smil.enabled = true) and Opera 10.x. Chrome 3+/Safari 4+ suffers from current Webkit's issue with dynamic generation of SMIL animations, so elements in cave are static, not movable :-(
Support for ASV is not part of my plans!
..and... thank you for your feedback ;-)

SMIL disabled for Firefox 3.6

2009-11-12 | svg

...and this time finally, so Firefox 3.6 beta 2 is the last official build where could be SMIL turned ON (about:config => svg.smil.enabled = true). So, guys, from now on we should look forward to 3.7 even more eagerly!!

Rotate and Jump with Reflection

2009-11-04 | svg

So, another experiment is out. I started with reflection effect on the water (sea), then added couple of other animations. Result is far from complex animation, but worth of publishing as version 1.0 (my opinion, yes), especially considering fact, that it could, like many and many other experiments, remain hidden and forgotten on some local computer... ;-)
So here comes my animated text with sea water reflection effect during sunset. It is really simple, couple of texts stupidly duplicated to another transformed group to achieve reflection and (almost) nothing else. How do you like it?
I believe it to be only matter of time, before Mozilla guys will tweak the drawing performance a bit more (and I'm really really looking forward to the public release of version 3.7+!)
It runs great in Opera 9+, Firefox 3.6a-b2, 3.7+ with SMIL turned on (about:config => svg.smil.enabled = true) and ASV. Chrome 3+/Safari 4+ have not implemented masking yet and so there is no reflection at all :-( (FFX 3.6 does not animate gradient's stop colors, but 3.7+ does!)

Jack-o'-Lantern in SVG

2009-11-03 | svg

Reminded by Jeff and his Halloween Vomit theme I started thinking about some nice Halloween SVG I saw couple of years back. After googling a while I found the original (by Eric), and it really is nice, despite its origin in year 2001.
However, as expected, it works in ASV only. But I've spent 15 minutes and updated it to be compatible enough to run well in all common SVG browsers. So enjoy this old-but-gold piece!
Runs great in Opera 8+, Chrome 2+/Safari 3+, Firefox 1.5+ and of course ASV. Gecko & Webkit miss hover support on buttons, but this is only minor feature... and old FFX does not support tref nor opacity...

SVG Dance! (Text Effect)

2009-10-28 | svg

Today I've spent three hours of our national holiday by further experimenting with SVG text. I discovered that Firefox does not support direct animation of text element ('cause it is list, not just number), but encapsulation in group element solved the problem. Another known issue with Webkit is that it's not possible to dynamically create SMIL animation, so this demo is the static one, to achieve best cross browser compatibility.
Original idea to generate via script (which is logical approach in this case) o lot of texts with different timing to achieve "tailing effect" had been simplified in the end, but despite it, final effect is roughly what I planned from the beginning...
Runs great in Opera 9+, Chrome 3+/Safari 4+, Firefox 3.7+ with SMIL turned on (about:config => svg.smil.enabled = true) and also ASV (ASV is surprisingly performing worst in case of many text transformations, hmmm...)

SVG Chisel Text Effect

2009-10-25 | svg

Another demo which demonstrates power of SVG - popular chisel effect on text, implemented in SVG. I'm personally not sure, if it is better with or without SMIL animations, but both are nice.
Runs well in Opera 9+, Chrome 3+/Safari 4+, ASV and Firefox (it works good and without animations in version 3.0 or later and could be considered even nicer than animated one).

SVG Image Gallery Firefox Update

2009-10-19 | svg

Firefox has been patched and supports now floating values for SMIL animations. So, as a results, now works properly old wonder Adobe SVG demo and I prepared also different version of my SVG Image Gallery (and yes, also the simplified static version).
Because Firefox does not support <set> yet I used <animate> with calcMode="discrete" instead, to do the trick of semi-transparency, which Gecko has been not supporting previously!)
However, it causes Firefox to crash after some dozen seconds (probably on remove action from DOM of element with SMIL animation using floating values - my guess), but it's surely some temporary bug and I filled in some crash reports already) - Patched - thx Daniel! ;-)
Updated code runs great in Opera 9+, ASV and Firefox 3.7+ with SMIL turned on (about:config => svg.smil.enabled = true); in Chrome 3+/Safari 4+ dynamic insertion (via JavaScript) of SMIL events does not work and it is known bug, so I'm not able to fix it in no way...
Update 2009-10-19, one hour later: I discovered that if SMIL animation finishes before removing from DOM, we're able to avoid the problem ;-) , but it's still there :-(...

SVG Image Gallery (ZX Nostalgy Vol. II)

2009-10-15 | svg

So, I worked a bit on my next idea - animated SVG image gallery - and there comes my first attempt. It is far from complete state, but working already. I used again ZX Spectrum screenshots as presentable images (static gallery of 256! nice speccy titles), but they could be easily reconfigured to something else. Goal is to prepare easily installable and configurable image gallery script.
It uses SMIL and scripting altogether and works great in most of browsers, except of Webkit, but it is just a matter of time to find out what's wrong (I hope).
It runs great in Opera 9+ and ASV. Firefox 3.6a-b2, 3.7+ with SMIL turned on (about:config => svg.smil.enabled = true) runs fine, but without semi-transparencies during flipping image; Chrome 3+/Safari 4+ seems to be not working on dynamic creation of SMIL animations... :-(
However, there is compatible, more simple version of gallery, working in Chrome/Safari as well! ;-)
Animated GIFs with blink effects were converted to static images to avoid problems in Opera etc., so Bruce Lee and Batman are back!

ZX Spectrum SVG Loader 1.0 (with sound)

2009-10-11 | svg

Not satisfied with synchronization issues and really really missing sound support, there is final version of my ZX Loader.
Using good old sound manager (SWF based, for achieving cross browser functionality), and thus also HTML/iframe encapsulation is must. Also synchronization problems were solved; not relying anymore on SMIL & JS sync, animations are chunked and every chunk is started from script always (so SMIL and JS are both still in use, but keeping sync via scripting.)
Also random screenshot picking mechanism had been changed to array shuffle, to achieve better order experience. ;-)
Please, be patient for animation to start for the first time...
No changes to compatibility - it still runs great in Opera 9+, Chrome 3+/Safari 4+ and ASV but not Firefox.

ZX Spectrum SVG Loader 0.75

2009-10-07 | svg

Keeping another of my promises, here comes ZX Spectrum Loader demo. It contains more than one hundred randomly loaded title screens from the most famous Speccy games. SVG and SMIL is in use for for creating loading border stripes and I hope final effect is very close to the real ZX loading effect (you can compare it to for example this video ;-)
It runs great in Opera 9+, Chrome 3+/Safari 4+ and of course ASV. Sadly, no Firefox this time, it freezes hopelessly on used animations and do not support's SMIL event starts... :-(
SMIL timed events and JS timed events are not synchronized and after some time you'll be able to notice it, but never mind... it's juts short demo! ;-)

Update: Removed animated images cousing troubles (batman1, brucelee, swordsofbane) and total number of screenshot finalized to magic number 128!
If you wish to see them all, there is the gallery page (mostly taken from www.worldofspectrum.org ;-)

ZX Spectrum SVG demo 2.0

2009-09-24 | svg

Keeping my promise from couple days back, I got back to ZX Spectrum demo and done massive update.
There are all the buttons text, properly positioned. I have been forced to avoid use of tspan, 'cause it behave "ugly" during scaling and is inconstent between different browsers. So you can scale freely now and it keeps basic formatting sufficiently. Animation is very fluent on small scale, but texts are not legible, se we've to cope with bigger size :-(
And voila! ...here we go! With gradient on buttons, animated gradient rainbow effect and masked text I consider it worth of version 2.0! I have ideas for other effects and improvements and hope to create some other variant after my just starting vacations :-)
It runs great in Opera 9+ and Firefox 3.6a-b2, 3.7+ with SMIL turned on (about:config => svg.smil.enabled = true) and Chrome 3+/Safari 4+, with exception to text masking, too. ASV does traditionally well, but is not able to display some UTF-8 characters, huh :-(

Old Adobe SVG Samples

2009-09-23 | svg

Selected samples from old Adobe SVG samples web and updated to work, at least partially, in modern browsers. Although old, still quite inspirational and showing, which modern web browser is best in SVG implementation. It is, without suprise, Opera, followed by Firefox and Webkit core. Webkit has better SMIL implementation than Firefox but is beaten down in the area of filters. See and compare, yourselves, enjoy them... ;-)

ZX Spectrum SVG Tribute

2009-09-23 | svg

Idea from nowhere appeared to me, to create some tribute to good, old (but gold) Speccy. Drawing Speccy itself is not very creative and entertaining process, but I consider it good enough to publish it already. (Although I plan to enhance it even more, in the near future).
I have more ideas so let's hope to find enough time to turn them to become something real. So, it is initial version and from lack of time I prepared only one more, bouncing version. However, it seems to be quite performance demanding :-( , esp. in Firefox.
It runs great in Opera 9+, Chrome 3+, Safari 4+ and Firefox 3.6a-b2, 3.7+ with SMIL turned on (about:config => svg.smil.enabled = true). I do not test other browsers, but expect all my recent demos to be working properly in ASV and Squiggle as well.

Good Spirit Animation

2009-09-22 | svg

I work for LMC company these days and company has in the sign of its flagship Jobs.cz portal GIF animation of flying "Good spirit", created by company's founder in its early days (more than 10 years ago).
Recently, I saw this animated GIF in presentation, stretched to whole screen and it was really ugly, pixelized and, well, ...raster based!
So I found spare 30 minutes and created vector version and with effort of additional 10 minutes slightly more cheery, enhanced version ;-).
It runs great in Opera 9+, Chrome 3+, Safari 4+ and Firefox 3.6a-b2, 3.7+ with SMIL turned on (about:config => svg.smil.enabled = true).
Update 2009-09-25: Added one more Good Spirit version, this time it is Good Spirit with drop shadow effect...

Famous SVG Digging Animation Resurrected

2009-09-21 | svg

Original demo from Antoine Quint has trouble running in other browsers (plugins) than ASV. I modified original file and result you can see.
Now it runs great in Opera 9+, Chrome 3+, Safari 4+ and even Firefox 3.6a-b2, 3.7+ with SMIL turned on (about:config => svg.smil.enabled = true).
For Firefox very limited support of SMIL events, there is, however, some dirty trick in JS in place... but it is working at least acceptably, if not optimally...

SVG Turtles

2006-10-06 | svg

My first SVG game created, compatible with only ADOBE SVG Viewer 3.x/6a but maybe compatibility with Opera should not be a great trouble. I'll see, if there is some time, I could try. Historical HighScores are lost, so at this new location it's starting from scratch again. :-)
Game controls by cursor keys or both mouse buttons (left and right only).

SVG Cowboys

2006-10-06 | svg

My second SVG game created, compatible again with only ADOBE SVG Viewer 3.x/6a. I tried to make it compatible with Opera but current status is, that there is something strange with applying mask/clippingPath elements to the dynamically created elements :-( Avaiable also as compressed one-file package. Again, as to for Turtles, historical HighScores are lost, so at new location it's starting from scratch... Cowboys was my most popular game, having on the highscores list about two thousand of entries after six months of public availability.
Game controls by mouse + mouse buttons (left and middle) and Space.

SVG Bubbles

2006-10-06 | svg

Not a game nor demo. I was just inspired by O2 banners during massive Telefonica's Czech Republic so I created quickly some SVG clones, to prove simplicity of creating something like oxygen bubbles in water in SVG and SMIL. There are also additional versions available, full-screen with filters and "vodafonized" version ;-)

SVG Basics in Mozilla (Czech only)

2006-10-06 | svg

Short How-To-Start / Learning article I wrote at the time of Firefox 1.0 when SVG was only in the trunk and not in official builds. However, it was never published... until now, and although a bit outdated, perhaps still usable for many SVG newbies ;-)

SVG Submarine Assault

2006-10-02 | svg

Comeback to the SVG gaming arena after a while... My trully first SVG cross-browser's game, and quite good one, I hope. let's try it and you'll see. There is even sound support without Adobe's native audio extension, but through Flash sound bridge, so with far larger compatibility. More details available on the game detail page.
Game controls by cursor keys, Space and Shift.