Friday, 28. March 2008, 15:40:33
SVG, Web Standards, HSLA, Safari
...
We've just released a public build of our testing and development build that shows Opera passing 100/100 in the DOM tests. It also has pixel perfect rendering. The final test which has to be passed is the performance test. This puts Safari and Opera neck and neck in the race to be the first browser to pass Acid 3. I'd like to congratulate the Core Opera team for all the work they've done to pass the first two tests so quickly, and the WebKit team for making this a fun race so far. Both engines getting this far means that we both support important CSS3 properties like HSLA color model and Web Fonts, and pushes support for SVG forward. I'm looking forward to when Gecko and the new IE engine get this far.
Sunday, 16. September 2007, 16:22:43
kestrel, graphics, SVG, APNG
Traditionally if we've wanted to use animated images we've been stuck with one option - the animated gif. There has also been Flash (or movie formats for that matter) if you can get away with using a plug-in. A gif has certainly been the only option if one wants to add a decorative image in CSS. Since the latest weekly of Opera Kestrel, another option has been added - APNG. This was first proposed and implemented by Mozilla and should be available in Firefox 3.
I've got some mixed feelings about this, as the PNG group rejected APNG and it apparently breaks the original intent of the PNG spec. However it does give web developers more options, where gif files are not the best choice or give the best quality, and giving APNg its own MIME type et al would mean that it wouldn't fallback to the first frame of the animation for none-APNG aware browsers.
SVG will eventually be a third option for animation, for suitable vector style images. No browsers currently support animation in CSS, as while Opera is the only browser to support animated SVG and SVG in CSS, it doesn't currently support both combined. It would be nice to get this support in the future, so we can do animated roll overs for example. It does support animated SVG in the img element though.
Check out these demos to see APNG in action. At the time of writing you need Opera Kestrel or Mozilla Minefield.
Tuesday, 11. September 2007, 21:58:11
SVG, kestrel, standards
During the development of Kestrel, I was hearing of the advancements in our SVG support. Not being a SVG person I wasn't familiar with everything that was added, but I was interested in checking out the W3C SVG test suite to see how our progress was doing. Being a W3C test suite, it looked both intimidating and time consuming so I never got time to run through the tests. Fortunately I didn't have to, as Jeff Schiller took the public Alpha through its paces and updated his support graph.
I'm not sure if this includes SVGT 1.1 or just SVG full 1.1 (I suspect the latter), but Kestrel has improved Opera's support to 93.4% of the test suite. That makes it not only the most compliant browser, but also the most compliant user agent full stop, even beating the impressive Batik 1.7. The closest browser is Firefox 3 with 58%. Now we have full CSS3 selector support, I'm looking forwards to the race to full SVG compatibility, and I think Batik will give us a good run for our money. It's a shame Jeff's chart doesn't show the tests that fail for each browser.
I've heard a number of web developers complain about Opera focusing on SVG, but there is a few reasons for this and it doesn't effect our other work, and I certainly agree it shouldn't be our primary focus, but:
- We have different developers that work on different areas, so working on SVG isn't taking people off JavaScript or CSS layout for example
- SVG was often a carrier requirement for inclusion on mobile devices, and is much more useful and widespread in the mobile world, than it is on desktop.
- It is a standard that shows promise once support is widespread, and if we are going to do something, we are going to do it properly
- SVG is very useful on things like device projects where Opera is the interface to the device using WebUI. Think games consoles for instance
- Other browser vendors like Safari and Firefox are adding SVG support and it shouldn't be too long before get good quality cross browser support. IE will be the problem, and in that way it will be similar to the PNG situation pre IE7, but IE is under active development now and they have a great team, so I wouldn't rule them out.
Now Opera has good compatibility with SVG, developers can take it for a spin and start learning the basics of SVG in preparation for the future. I recommend to start looking at using it for background-images in places that degrade well without the image, such as the gradient example two posts ago. Once Safari and Firefox add support for SVG through CSS you can start using this technique across browser, and send a rasterised png/jpeg version to IE through conditional comments. The size and bandwidth savings should be quite substantial, the scaling is much better and it is so easy to edit the file if you want to change the colour, edit the gradient etc. The possibilities of adjusting the image through the DOM should be fascinating too (rotate a arrow bullet on-click in a tree list for example) , but this wont be so easy to do fallbacks for IE.
Wednesday, 5. September 2007, 20:45:03
Dev.Opera, SVG, kestrel, standards
...
You may have downloaded Kestrel by now, and glanced at the change log, but you may not have tested out its new capabilities. I don't profess to be a JavaScript expert, so I'll leave that to those of you who know better, but I've cooked up some demos of the new CSS and SVG capabilities along with an article explaining them. That article is now ready, so please go and check it out.
For those of you who want to go straight to the examples (some modified from previous demos on this blog), here they are:
This article and demos have just scratched the surface. There is a lot to look forward to with our new JavaScript engine, improved DOM support, more HTML5 and canvas, and a more complete SVG implementation including partial SVG 1.2 Tiny support, and more. If you've been experimenting with Kestrel and have tried out some of the new features, share your examples and experiences in the comments. Hope you enjoy the article.
Tuesday, 4. September 2007, 13:43:30
SVG, kestrel, JavaScript, CSS
...
Earlier today Opera Kestrel finally took its first test flight outside the Opera offices. There have been a number of new features added, but the big news for developers is the updates to the engine that went into making Core-2.
As Kestrel is just in Alpha, Core-2 isn't quite finished yet. There will be further bug fixes, and possibly feature enhancements before it goes golden. Now is the time to give feedback if there are any major bugs that are affecting you, or engine features that you can't live without. Regressions are particularly important to fix.
I'll leave you to play with the Alpha, while I finish up the article and demos of some of the new features that I've been playing around with. There is a lot to test out, such as JavaScript getter and setters, SVG through CSS, getElementsByClassName, CSS3 Selectors, overflow improvements, text shadows, background-size, HTML5 enhancements and many more.
You can download Kestrel here and also check out the latest beta relese of Opera Mini while you're at at.
Sunday, 24. June 2007, 23:50:45
kestrel, SVG, css3, standards
On this blog I've mentioned quite a lot about CSS3 selectors. You might have noticed that the official Opera desktop team blog recently announced that Opera Kestrel has completed and enabled full selectors support. This also means that Opera Mini 4 should have full support by launch and the Wii browser will likely also benefit from this. Now I ca put to bed talking about selectors, what else is on the horizon? Well, there is certainly a lot more CSS3 that we can work on, including some very interesting things like multiple background images, border-radius, multi column layout, web fonts (a particular favourite of Håkon, our CTO and father of CSS) etc. I can't promise support for any of this, but we are listening to designers and developers, so it'd be interesting to see which CSS3 properties are most wanted.
Away from CSS, our SVG continues to improve, cementing Opera's place as the most compatible browser for SVG rendering. I believe we are still the only browser that supports SVG animation. Being able to use SVG from the img element and from CSS is a particular favourite of mine as it leads to some interesting scaleable design techniques, such as using SVG as a background gradient, or bullet point icons that don't go jagged when zooming into the content. Because SVG isn't as widely implemented as CSS (read no IE support and no official Safari release until Safari 3 comes out ), there isn't as much talk about it as CSS, and I don't think that Opera perhaps gets as much publicity as it deserves for our stellar support (do a Google search for SVG). Maybe it is time we made a svg.info site.
As a Mac user, what really excites me is the news that Kestrel will get an improved theme and interface for Mac. I'm not a big fan of the current look, so the improvements will be welcome. Even as an insider, I've not seen these changes yet, so i guess I should start digging into the internal builds.
Monday, 7. May 2007, 22:27:08
Wii, SVG, Opera, css3
While it is probably well known within the SVG community (or not judging by the number of SVG sites that block Opera, and tell the user to download Firefox), there is maybe a lack of awareness in the web design community at large about just how many strides Opera has made in its SVG 1.1 support. As this test from Jeff Schiller states:
In roughly a year, the Opera browser went from being one of the least usable SVG implementations (no scripting/DOM support) to the best native implementation and achieved a higher score than the famed Adobe SVG Viewer
Opera has the best native SVG support of any browser on the market, and is only beat out by Batik 1.7 (great work guys) for the most compliant engine. Things don't stand still however, and I've already blogged previous about support for using SVG as a background image and list image in CSS in internal builds of Opera Kestrel. This is not the only improvements however. Kestrel will also support:
- Support for using SVG files in the image element
- SVG Tiny 1.2 vector-effect [Spec]
- SVG Tiny 1.2 navigation [Spec]
- SVG Tiny 1.2 handler [Spec]
- Speed improvements and optimisations
- Many general bug fixes of our support of animations, text, SVG DOM methods and filters
Not only that, but Kestrel is still in active development, and there will be further support for SVG added before it goes final. But for much of this one doesn't have to wait until Kestrel goes into public beta. This is because The Internet Channel for Wii includes some of the modules from the Kestrel branch of our core rendering engine. This means that some of our improvements, both to CSS3 selectors and SVG 1.1 are already out there, sitting next to your TV, ready to be checked out. Bare in mind that the Wii is limited to two fonts, so visual results may vary. Go check it out and see what you think…
New to SVG, or want to check out some techniques? Go check out our tutorials on Dev.Opera.
Thursday, 1. February 2007, 11:58:42
Web Standards, SVG
While SVG shows at lot of promise, it hasn't yet taken off in the mainstream market. Support is still spotty, and the development tools are not quite there yet. Creating complex images using SVG by hand is beyond what most people would be willing to attempt. However there is one great use for SVG that has just been made possible in the very latest internal builds of Opera.
Internally, Opera now supports SVG as a background image in CSS through the usual background-image: url(filename.svg);
. Why is this great? Well, it is now possible to create things like gradients and hi-lights as a svg file, which are fairly easy to do even by hand, and add them as a background image to add that extra bit of refinement to your design. You could have done that previously with any image format, but SVG is scaleable at any zoom level, can cope very well with liquid layouts, can be manipulated through the DOM and doesn't require the use of an image editing application to create. One can imaging adding SVG to the CSS3 buttons I created for this blog post to remove the solidness of the background colour or make them stand out more.
Of course, it can be used for more than just gradients and patterns. It is a common technique to use extra padding and a background image to add thing like custom bullet points and presentational images that shouldn't be in the HTML markup. SVG is also perfect for creating simple images like these without too much effort, and again they'll be fully scaleable instead of becoming blocky with increased page zoom. It is not something people can jump straight into, as we must wait for both a version of Opera to be released with this functionality and other browsers to catch up, but it is something that we can look forward to and start experimenting with.
