Slightly ajar

While messing around with SVG I created a map of Opera market share in Eastern and Central Europe. This is much heavier than the previous SVG files I've made as I started with an existing SVG map from Wikipedia, that was originally produced using Inkscape. This adds a lot of extra things that machine generated markup usually produces, but making a map by hand would be bordering on insanity. I've cleaned up some of the markup, but I should be able to trim the file size a lot more by removing some of the inline and redundant styles and extra elements and attributes that are not needed.

I added all the extra information, such as the labels, colouring and animations by hand, which isn't too difficult to do once I worked out that the map was using a viewBox that changes the co-ordinate system (everything I was trying to include was too small to be seen because of this). I'm using the alpha channel of the HSLA colour model to show the different levels of marketshare (offset by 0.2 to make the colours easier to spot), which gave a easy 100% scale to work with. This is easy to do, but have performance penalties and opacity is expensive. It also means that it requires Opera 10 or greater to get the full effect. I'll probably end up mapping the colours to RGB values and use that instead, although that would make it more expensive. The colouring scheme chosen also makes it slightly difficult to see the difference between the colours less than 10% and those around 10 to 20%, so i reduced the opacity of the country borders for those less than 10%. I'd eventually like to show the market share data when clicking on the country rather than a predefined animation that loops through each county. In theory you can zoom in on each country (for those I added - Czech Republic, Slovakia, and Poland), due to the use of the view element and fragment identifiers on the a element, but support for this seems to break when animations are included. I'm not sure if this is a bug or something I'm doing wrong. You can still directly go to the county using a direct link outside of the document. There is also an issue with Safari where HSLA colour model doesn't seem to be supported in SVG, or at least not on the fill property, so the map just displays as black.

As far as the data is concerned, I took the market share values from the StatCounter results for April (at the time of writing). All figures are rounded so 2.49% becomes 2% and 2.51% would become 3%. You'll notice some patterns on the map, with 3 main groups. Those countries that are in the CIS are all post 20% market share. The Visgrád_Group and Baltic nations are around 10% to 15%. Latvia is slightly lower with 9%, and Estonia drops off at the edge of the group with 7%. The major exception is Hungary with only 4%, but we have identified a number of compatibility issues in Hungary (see comments in my previous pot) which may be causing this. The third group is the Balkan and other South-Eastern countries, that are around 4, 5 or 6% market share. This again has exceptions with Serbia and Montenegro both being ahead with around 10% market share, and Slovenia and Albania around 2% market share. I wouldn't be surprised if by the end of the year Hungary has caught up to the 10% mark and the third group of countries also start working their way to that level.

[UPDATE 1] HSL and HSLA are apparently not suppose to be supported by SVG, although they are both supported by Opera and Firefox. I've switched the fill value to red and added the appropriate alpha channel value with the appropriate fill-opacity value. Next up is the issue with Firefox. after talking to Jeff Schiller, its been narrowed down to the lines used to draw the grid. Firefox treats these differently, but I have to work out why. That is something for another day though.

The Baltic states are made up of Estonia, Latvia and Lithuania in the UN region of Northern Europe (along with the Nordic nations and the British Isles). These three nations are unique in that they are the only former Soviet republics who are not part of the modern day CIS. They are also the only former Soviet states that are members of the European Union.

When looking at Opera market share in the Baltics, we have two sources we can compare, StatCounter and Gemius, which I also included for Ukraine in the CIS edition of this series. With two sources, if the results are comparable, I can be more confident of the accuracy than the previous post on the former Yugoslavia. As Gemius focuses on Eastern and Central Europe, they should have a decent sample rate for these countries. Lets see how Opera fares in the third region in this study.

Lithuania

The largest nation in the Baltic region by Internet population is Lithuania, with 1,333,000 Internet users in 2007 according to the CIA. If we take a look at StatCounter figures, Opera had 11.92% market share in Lithuania in February. As is common with the results in the previous study, this puts Opera in third behind IE and Firefox and more market share than Safari and Chrome combined. Over at Gemius, Opera had 7.9% market share in February, and is also in third place ahead of Chrome and Safari.

Latvia

Latvia is closely behind Lithuania with 1,177,000 Internet users in 2007 according to the CIA. By StatCounter figures, Opera had 8.81% of the Latvian market share in February. As with Lithuania, Opera was in third place overall, this time with Firefox in first place. Opera again was bigger than Safari and Chrome combined. The Gemius figures show that Opera had a 4.8% market share in Latvia in February. Opera was also in third place by Gemius figures.

Estonia

With 780,000 Internet users in 2007 by CIA stats, Estonia is the smallest of the Batlic states. If we look at StatCounter figures we will see a common trend from the other two nations, with Opera in third place behind IE and Firefox and more than Safari and Chrome combined, with 6.02% market share in February. Opera doesn’t fare so well in Gemius figures with only 2.4% market share in February, but again it is in third position.

Overall

While Opera doesn't reach the heights of its CIS market share or rankings, Opera has a solid following in the Baltics, with similar figures to the former Yugoslavia. Opera is again constantly bigger than Safari and Chrome combined, and is constantly growing. By StatCounter figures, Opera already has double digit market share in Lithuania, and is pushing towards the 10% mark in Latvia. Estonia is the weakest of the group, but Estonian localisation of Opera only came in Opera 9.6. It will be interesting to see if this will make a difference throughout 2009.

Often web developers will say something like Opera is a great browser, but we don’t care about it, as it has less than 1% market share. The stat that is often pointed to is the one from Net Applications. Net Applications of course are primarily US and English language focused (indeed their web site seems to only be available in English), and in the past they have retroactively reduced Opera’s market share in their statistics. Market share stats should always be taken with a grain of salt, as there are many variables to take into account, from sample size, geographical bias, detection techniques, spoofing, et criteria.

There is now a new player in town in the market share stats game, StatCounter, the popular visitor stats tool. In this post I will look at how StatsCounter and other free market share sites rank Opera in the CIS, which is one of Opera’s strongest markets, and a big chunk of what was the Soviet Union. I’ve started with this region, as it is a strong market for Opera, but in further posts I’ll look into further markets. I will however state up front that StatCounter ranks Opera as third browser overall globally ahead of both Safari and Chrome on almost 3% market share. I believe that Stat Counter is still more anglophone centric, so that figure could be a little low, but Stat Counter are working hard on localisation, with the Hungarian version already released, so I expect the bias in favour of US market share to even out over time.

There are three sites I’m using for this comparison, the aforementioned StatCounter, Gemius, which has free stats for a few Eastern European countries, and LiveInternet.ru which is a popular Russian language based stats site. Not all of these sites cover all markets unfortunately, but using multiple sources gives a fairer picture. I’ve not included Net Applications, as the free stats don’t include country by country breakdown. It is the same case for XiTi, which was last updated in November, but ranks Opera fairly strongly as 5.1% for the countries in Europe it monitors.

Russia

The biggest market in the CIS is of course Russia. It has one of the fastest growing internet population in the world. It had a Internet population of around 30 million in 2007, according to the CIA World Factbook. So how is Opera doing in Russia? According to StatCounter, Opera has almost 38% market share in Russia, in February, making it the number 1 browser ahead of Internet Explorer. LiveInternet on the other hand ranks Opera desktop as 21.5% market share, second behind IE. Gemius doesn’t track Russia. Overall Opera has a strong showing in Russia, placed first and second respectively. You’ll also notice the strong showing of Opera Mini in the LiveInternet stats.

Ukraine

Ukraine is perhaps the second biggest market in the CIS, with a Internet population of 10 million in 2007. Opera is doing even better in Ukraine than in Russia. By StatCounter stats, Opera has almost 44% market share in Ukraine, in February, again making it the most used browser ahead of IE. According to LiveInternet, Opera has almost 30% market share in February, second placed overall behind IE, but Opera 9 is the most used browser version, ahead of IE7. Ukraine is the only country in the CIS that Gemius covers. On this site Opera has 29% market share in February, second behind IE, but again Opera 9 is the most used browser version in Ukraine. Again, overall, Opera is very strong in Ukraine.

Belarus

Belarus is the other major CIS state in Europe, with a Internet population of 6 million in 2007. Again, Belarus is a very strong market for Opera. According to StatCounter, Opera has just over 50% market share in Belarus in February, making it again the top browser in the country. With LiveInternet stats Opera has 36.4% market share in Belarus in February, again putting Opera in second place, and again Opera 9 is the most used browser version in the country. Opera is certainly very popular in Belarus.

Moldova

Moldova is the last of the CIS nations in Europe, with a Internet population of 700,000 in 2007. StatCounter is the only site that tracks Moldova, and unfortunately Opera doesn’t come out on top, with only 23% market share in February. Opera was beaten off the top spot for the first time, slipping to third behind IE and Firefox.

Kazakhstan

Kazakhstan is perhaps the biggest market in Asian CIS with 1,901,000 internet users in 2006 (if you count Russia as being European). By StatCounter statistics, Opera has just over 39% in Kazakhstan in February, making it the most used browser for the 4^th time, ahead of IE yet again. LiveInternet follows the pattern again, making Opera the second most used desktop browser in Kazakhstan with 23.2% market share in February, but this time Opera 9 is third behind both IE 7 and IE 6.

Uzbekistan

By CIA numbers Uzbekistan has a larger Internet population than Kazakhstan with 2,100,000 connected to the Internet, but the figure is from 2008 instead of 2006. Opera again does well in Uzbekistan by StatCounter numbers with just over 43% market share in February, beating out IE to first place for the 5^th time in this post.

Azerbaijan

Azerbaijan sneaks in over the million mark with 1,036,000 Internet users according to the CIA in 2007. According to StatCounter, Opera fails for the second time to reach pole position, behind IE in second place with 29.14% market share in Feburary.

Kyrgyzstan

Kyrgyzstan has 750,000 Internet users in 2007 according to the CIA. Opera again finishes in second place by StatCounter stats, with 24.5% market share in February, again behind IE.

Georgia

Georgia is perhaps most famous recently for being the centre of news coverage over the last year or so. Georgia had 360,000 Internet users in 2007. Opera again finishes in second place behind IE with 39.37% market share in February. Georgia had large growth in Opera users last year, so I expect that the 360,000 Internet population is well out of date now - I suspect it is much higher.

Armenia

Armenia is a relatively small country with 172,800 Internet users in 2006. Like Georgia, this figure is likely well out of date now. Like Moldova, Opera slips to 3^rd for the second time, again behind IE in first and Firefox in second in statCounter statistics. By StatCounter figures Opera had 27.36% market share in February, closing in on Firefox for second position.

Turkmenistan

Turkmenistan has a small Internet population of 70,000 in 2007, making it the second smallest of the former Soviet republics. Opera finishes second in StatCounter stats, behind IE with 28.43% market share in Feburary.

Tajikistan

Tajikistan is the smallest of the CIS nations with 19,500 Internet users in 2005, but due to the age of this statistic, it is likely larger now. In Tajikistan StatCounter ranks Opera as second behind IE with 34.76% market share in February, rounding off a successful region for Opera in terms of users and market share.

Overall

It is clear to see, using multiple sources where possible, that Opera is very successful in the CIS region. It regularly ranks first or second in terms of desktop browser market share in StatCounter stats and first or second in terms of browser version in LiveInternet stats. LiveInternet stats are probably more accurate at present as they focus on the Russian Language market, and StatCounter probably has a smaller sample size for each of the countries in this study. As StatCounter localises, I’d expect the sample sizes to go up, which may lower the Opera market share slightly, but it will make the CIS and other none US samples to be more representative and thus push up Opera’s global market share. Another reason why StatCounter’s stats are higher than LiveInternet may be that StatCounter could include Opera Mini in the Opera stats. If this is the case then the two sets of figures would be closer together.

Recently I joined the SVG-IG Working Group at the W3C. Unlike the regular SVG WG, the Interest Group’s main task is not making specs, but to foster interest in the developer/designer community and to provide feedback to the SVG WG on the needs of those designers and developers. It is fairly inline with the work I already do for Opera in promoting web standards and the Open Web, and providing feedback to our own developers. SVG is one of those technologies that shows a lot of promise, but hasn’t taken off in the mainstream like its brothers and sisters, HTML, CSS and JavaScript. There are numerous reasons for this, not least not support in IE (as of yet), but they are issues that are solvable. Plus if SVG doesn’t become viable this year, we get to punch Mike (TM) Smith in the face. I guess I have to help an ex-colleague from getting a battering.

I'd admit to not being anywhere close to being a worlds expert at SVG. I’m only just learning myself—which is a good thing, as I can see and remember the difficulties in using and learning SVG as I interact with the community. As part of my studying of the SVG spec, I've been teaching myself about alpha transparent gradients, animations, filters and XLink in SVG. The product of that will be a couple of in depth articles on how to use the techniques, but I'd first like to show you a demo I’ve made combining some of these aspects of SVG. You of course need a decent browser to view the demo, so if your browser sucks, you'll need to upgrade (sorry. This actually includes the latest release version of Firefox, as I used CSS 3 selectors to make my life easier):

Unless you are a lighting fast reader, the animation will probably have already run by the time you've scrolled to the point where you can see the image, so you can see it in all its unscaled glory by going to my SVG animations and filters experiment file directly. You'll also have to use this link if you are using Opera 9.6 or below, or Safari, as embedding with the img element is not supported. Opera 10 and above work as expected. With the file being a vector graphic (apart from the referenced JPEG image), all the elements scale and stay in proportion, whether you see it at its native size in the link or in the 50% shrank version embedded in the page with the img element.

While the effect I used isn't particularly useful—you probably don't want your image caption and link to scroll off the screen—it is fairly trivial to achieve:

• The gradient is set with the linearGradient element, and CSS to set the stop-color and stop-opacity. I used CSS 3 nth-of-type here to avoid adding lots of IDs, so it currently doesn't work in Firefox. In a production environment it would be simple to use the more basic selectors that Firefox 3 supports.
• The fade in and fade out effect is done with the animate element, which is applied to the CSS opacity property using attributeType="css" and attributeName="opacity". You can simply set the starting and ending values of the animation, how long it should take, and when it should begin.
• The scrolling of the caption is done also with the animate element, but this time by using attributeType="XML" and attributeName="width". You'll notice a attribute fill="freeze", which basically tells the browser to keep the element in the state it was at the last frame of the animation, instead of resetting back to the default value after the animation has ended. Otherwise the caption would appear again after it scrolls off the screen.
• The shadow behind the One Web text is applied using the filter element, which seems quite complex, but it creates a blurred version of the alpha channel of the text using feGaussianBlur, offsets the result of that filter by 2px using feOffset, and then blends the result of that filter with the original text using feBlend. This is a bit more complex than the CSS text-shadow but isn't so hard when you know how. Safari 4 doesn't seem capable of using these filters, so you'll just get flat text in that browser.

As I mentioned previously, I'll explain these concepts in more detail at a later date, and will attempt to make the results more cross browser accessible.

Now that my team at Opera is growing bigger, and includes active bloggers, we’ve decided to create a team blog, where we can have a unified team voice, instead of developers have to follow a multitude of different blogs at different corners of the Web. This is one of the first public parts of our planned Opera Developers Network, or ODIN as we affectionately call it for short. As well as the team blog, we will have our own corner of Opera.com, to tie together developer related products and activities.

I’ll continue to blog here, but haven’t fully decided how to split between blogging here and on the team blog. As our efforts in the Developer Relations team ramps up, we have a number of things to cover already. Dev Opera and Opera Labs have been up and running for a while now, Open the Web is going from strength to strength, and the Web Standards Curriculum and our flagship developer tool Opera Dragonfly are just getting started. ODIN will bring together all these products and services along with covering developer focused events, relevant news coverage in the blog, and all the information you as developers need on our Core rendering engine, Opera technologies and industry standards. We hope the resources we provide will make it easier than ever to support Opera in your web sites and applications, and we can be as helpful as possible when you have issues you can’t work out how to fix.