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 ;-):
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.
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! ;-)
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...
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.
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! ;-)
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-8-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...
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! ;-)
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! ;-)
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!! ;-)))
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:
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+.
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-4-19 - even more variants of Firefox SVG logo added, thx. Jeff for Scour suggestion...
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...
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:
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... ;-)))
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:
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...
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!! :-)
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.
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!
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!!!
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 4.0.249.43 / 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)
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:
| 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.
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
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!
!!!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+
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:
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 ;-)
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:
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-6: Opera browser performance could be improved a bit by decreasing SVG target frame rate (about:config, SVG fold, Target Framerate, set value to 15, and optionally also Rendering Quality, set value to 15), followed by browser restart...
Thank you for your feedback. Most requested is better visualization of collision and here comes an update... ;-)
Change log:
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 ;-)
...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!!
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?
As you may notice, animations are not so fluent in Firefox, but this a bit simplified version
works very fluently even in Firefox (with dropped gradient animations, transparencies and cloud movements). 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!)
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...
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...)
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).
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 :-(...
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!
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.
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 ;-)
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 :-(
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... ;-)
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.
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...
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...
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).
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.
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 three additional versions available, for Firefox with SMIL script, full-screen with filters and one "vodafonized" version ;-)
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 ;-)
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.v 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.
