Skip navigation.

Slightly ajar

Posts tagged with "SVG"

Updated SVG map

Tuesday, 21. April 2009, 15:04:02

, ,

Since the previous post, I've updated the Opera market share map somewhat. Now instead of having an automatically playing list of data, you can access the data by hovering over the specific country, and the country in question will also highlight.

For the country highlight I used mouse events on the country’s path element. I added a set element as a child of the path element which changes the class attribute to active. To add the mouse events, I added the code begin="mouseover" end="mouseout", which is fairly self-explanatory. For displaying the market share data it is slightly more complicated, as I wanted the action to happen on a different element to the active element – in this case the text elements. This also isn't too difficult when you know how. On the set and animate elements used by the text elements, I also used mouse events, but had to say which element triggers the animation. In the case of Belarus, I used code such as begin="by.mouseover" end="by.mouseout" which says to begin the animation when the element with the ID by has a mouse over event and ends when the same element has a mouse out event. I chain a number of animations. The first (where the code sample is from) is a set element to set the visibility of the text element, and the next two are animate elements to fade in and fade out the text element by changing the opacity value. You can chain as many of the different animation elements as you'd like. If you are wondering what the difference is between set and animate, set only changes the value once and happens without interpolation (i.e. is on or off, black or white), while with animate, there can be a series of value changes and it animates between the values (so opacity 0 to 1 will animate through each step from 0 to 1, instead of fully transparent to fully opaque).

As well as changing the interaction, I also compressed the file using GZip and changed the extension to svgz. This reduces the file size and tells the browser to decompress the file before passing it to the SVG engine for rendering. Many web servers may not be set up to handle svgz files (so the browser will get confused), so you may have to add the HTTP Header to your configuration file. In Apache I did this using the following instructions. This allows Opera and Safari to know the data is GZip compressed, but doesn't seem to work for Firefox at the moment. I'm not 100% sure why yet.

[DEMO] Opera Eastern/Central Europe market share map in SVG.

15 comments

Opera market share map

Saturday, 18. April 2009, 11:30:27

, ,

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.

13 comments

Using SVG masks for cut out text effects

Friday, 13. March 2009, 16:35:20

,

Have you ever wanted to use those cut out text effects, such as those that can be seen on postcards and posters, where the text is filed with an image, and the background outside the text is a solid colour or a different image or pattern? This is difficult to do in HTML without using an image or something like Flash, but with SVG it is trivially easy, especially when you know how.

first of all you need a image, that the text will be applied over. For this example I used a Creative Commons licenced image of the New York Skyline found on Flickr, by Ingo Meironke. This is included in a SVG file using the regular image element. Most of the magic happens in the defs section, where we define a mask out of the text. First we make a mask element as a child of defs, and set up the size of the mask, and its ID. Next, we add a child text element, containing the text we want to use as the mask — in this case, New York City — and position the text within the mask. Finally in the CSS file, the mask property is applied to the image, with the URL of the mask element (which is the path of the SVG file with the ID of the mask element as the fragment identifier). It then applies the text as a mask over the image, blocking out the image outside the bounderies of the text glyphs. In the example below, I also used a test outline. Including the stroke property on the mask text actually makes the stroke semi transparent, due to the mask, so I had to create a duplicate text element, with a stroke applied, and add it before the image element, so it shows behind the masked text (alternatively a z-index could be used to position it behind the masked text). For some reason, that I haven't worked out yet, Firefox shows this outline as offset to the right, making it look more like a solid shadow than a outline. Safari doesn't seem to support masking yet, so just displays the text with no fill. The final result can be seen below if you have a compatible browser:

SVG example of masked text

The image above is reduced in size to fit in this blog post, and embedding with the img element doesn’t work well in all browsers, so to see it at the intended size go directly to my SVG mask example file.

One of the good points about using SVG for this technique (one all browsers support it), is that the text applied is plain text in a text element. It is in theory accessible to screen readers and search engine spiders, and is fully localisable, translatable and the text can be dynamically changed, all without generating new images.

4 comments

SVG Animation experiment

Thursday, 12. March 2009, 12:58:18

, , ,

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):

An SVG experiment using animation and filters

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.

9 comments

Opera passes two out of three Acid 3 tests in public build

Friday, 28. March 2008, 15:40:33

, , , ...

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.

No comments

Another option for animation

Sunday, 16. September 2007, 16:22:43

, , ,

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.

25 comments

SVG: The race to 100% compliance

Tuesday, 11. September 2007, 21:58:11

, ,

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.

8 comments

Some demos to check out Kestrel's new capabilities

Wednesday, 5. September 2007, 20:45:03

, , , ...

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.

17 comments

Kestrel spreads its wings on test flight

Tuesday, 4. September 2007, 13:43:30

, , , ...

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.

4 comments

Selectors complete, what next?

Sunday, 24. June 2007, 23:50:45

, , ,

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.

20 comments

1 2 Next »

Showing posts 1 - 10 of 12.