Thanks everyone for coming. Antoine and I are really very excited to present some of this stuff to you. Hopefully you'll see things that you didn't know were in Safari and you can start using them both on the web and in your apps if you're embedding WebKit in your apps.

This session, basically, is building on the features that have been added to Safari since it, since it became open source. We're focusing on the graphics related features. While the topic of this session is vector graphics, we're actually starting with a little bit of CSS. And the reason for this is if you look at the majority of web pages today, the really rich graphical web pages are using CSS to provide the look and feel.

Now, Safari 3 is that adds some new CSS features based on standards that were defined a few years ago that allow people to effectively make their pages or their layout easier because they're using these new features. After that I'll give an introduction to Canvas, which is a way to use JavaScript to draw graphics in the browser. And then Antoine will finish it up by giving an introduction to SVG and show some nice demos.

So, I just want to start with the, something that I don't think is being, I haven't seen highlighted too much in this conference, is this fantastic new redesign for Apple.com. And if you're a web developer or even if you're not you should really take a look at the site and, in fact, not just look at the site as it is in the browser, view the source and have a look at the way that they've implemented it. While, as this session is actually building on all the hard work that has been done by the WebKit team and the WebKit community, this site is just some amazing work done by the, by the design team. Now, show this next one.

I assume that everyone knows like when Steve gets up and gives a key note that afterwards the press and the media and the whole world and the blogging community got to examine nearly every word he goes over and really look at what happened in detail. Well, the sort of web nerd design community have the same expectations for a company like Apple when they redesign their site.

If Apple did such a sort of major redesign as this and still used technologies from 2001 that'd probably get lots of negative press. But this is just, this is just fantastic. Now, you can see sort of how the look and feel is sort of similar to the, the previous design.

But what's interesting is they've used much more semantic mark-up to get the effects, and this is one of the benefits of CSS. So the toolbar across the top is, in fact, a list, an HML list and CSS renders it as a toolbar and assigns the background, images of the nice gradient fade and works out which images, which tab has been selected as the main tab and colors that a different, a different background.

The other things you notice is the current trend today of, what I sort of think, is like child safe kitchens where every corner's been rounded off so no one's going to hurt themselves. I actually looked through the site and I only found two sharp edges, and they're actually on this slide if you look closely. But I don't know whether that was just something that didn't happen or it was intentionally, but I can't, I can't complain about the design in anyway.

Not only is it just doing layout it's actually got some great interactive features. And it's really giving the look and feel of Apple to the people that are visiting the website, and this is really important. Here we've got very rich media, lots of content, lots of graphics. We've got some interactivity where you can slide across and the see the products that Apple make.

Also with this, is the second half of that page, they've got QuickTime embedded that has some interactivity to it. This section on the left here, if you mouse over it you get these animated effects. Now, people have probably seen animation on the web for a long while but they, what's new about these websites that are coming out now is the animation is done as a core part of the browser, using the features that the browser implemented. In this case it's using JavaScript.

And the other important thing is that because it's just using JavaScript the content, the semantically rich content is being sent to the browser so if you don't have JavaScript or you're running on another device or for example, you're not even running on something that has a screen, you're just having it read to you, all the content's available. A richer experience gets, oh sorry, if you're on a more powerful browser you get a richer experience.

This is effectively making the web or video and all these effects a core piece of the web browser technology. Now, unfortunately as they made this beautiful site they, as Apple.com has to be visible to everyone including browsers, including users on a popular operating system that use a very popular browser, they can't necessarily use all the features of CSS that have been implemented in WebKit. So the new features I'm going to talk about now could have been used by they weren't used.

And this is actually an important thing to know about web standards, CSS has passed its tenth birthday. But what happens with web technologies is you, hopefully you'd standardize them in some way rather than to start to implement them. They get some level of interoperability and once it reaches a level of market penetration then people can start using it as, as, in their content.

So here's an example of how they could have, how it could have been a little bit easier in the Apple redesign. So, one of the most common features that people use is these rounded borders and often you see a sort of nice gradient fade on the, on the rectangular area.

Now, the problem with that is sometimes you have to, that means you have to wrap your mark-up in, in sort of empty elements to provide sort of extra boxes that you can attach the graphics to. Well, the background image tag has been, is being extended here to be able to take more than one, one image. So instead of just saying background image and give it one pink file, I've given five in this case.

Now, another great thing to, to mention about this, this approach is that it's it's actually great for backwards compatibility. We're not breaking any existing content here. If an old browser hits this, this, it's not going to, your page isn't going to be unrenderable or whatever. It's actually using the features in CSS to add functionality to new versions of CSS.

Underneath here I, I set a position, background position for every one of the images and, it's a pretty ugly graphic, but it's that, what'll happen is that paragraph would resize to whatever text is, is placed in it and the graphics would align themselves with the way I, I, the way I position them.

Another similar property is the ability to set one border image and have it resize to fit the entire content. This is, again, implemented in Safari 3 and been in WebKit now, at least for a while now. So, here again, very similar to the way it's actually done at the moment, you set a border image property, which takes a parameter, the URL to a, to a PNG file. And here's the extra bit, was where I set some four parameters after the image the image to specify how it's sliced up, and I'll show you that in the next slide.

In this case I did add another, some anti-element here a div around the paragraph. What that means is that no matter what content I put, I had placed into that div the border is going to resize to whatever size the content has taken. So let's have a look at how it's done.

The actual border image can be any size you want. So, I mean, here the actual image that's used to render that, that border is a square. But if I go back one you see it's been resized to, to get the shape of the content. Now, with the four parameters here are specifying basically two, four slices that will generate nine individual pieces of the image. And you've got the, the four corners will go to the four corners of the rectangular area in CSS and, you know, the middle pieces, or sorry, middle edges and the middle of the element itself get resized to fill the space.

Now, that's all I was going to talk about in CSS. Now I'm going to go on to doing Canvas. Just before I leave CSS, you know, I didn't want to talk about the thousands of features that use CSS. I'm, instead, going to do the web way and say go to Apple.com and view source and you can get all the, all the tricky ways that I've implemented things so far. So, now let's talk about Canvas. This is something that is quite cool.

Of course, again, people have seen graphics in the browser and animations in the browser but in this case this, this functionality is exposed directly to the, to the engine itself. You don't have to call any external plugins or whatever. So, Canvas is an HTML element. And the HTML element defines the rectangular region of the page and then also a JavaScript API that allows you to do whatever you want with that rectangular image. It's been available since Safari 2.0, which means you can already use today on Tiger.

It's, there has been some slight updates to the interface since then. It's, you know, been documented in a standards process and has made some slight tweaks. So you should, if you're using Canvas you should check your Dashboard widget or whatever it is on Safari 3. Another interesting thing about it is, what I saw is draw and forget, is that Canvas just updates pixels in the page. If I draw something on it I don't actually have any memory of the fact that I've drawn it. What's happened is that the actual page has been updated to whatever I've actually sent to the screen.

This is kind of different to the way typical people, typical web programming happens, where you have the object model of the document there and you use the JavaScript to examine the document and provide some kind of effect based on what the content is. In this case it's purely for just rendering images, or rendering pixels on the screen.

The advantage of this is it has a very low memory footprint. If you're going to display thousands and thousands of objects you don't want to have to have a DOM element for every one of those. You just draw, draw to the screen using, you know, JavaScript or generate the graphics using a program.

This means it's quite high performance and, furthermore, it's actually a very simple API. Now, I'm a pretty simple person so I like simple API's. Web, again, it's the way the web works, is you don't necessarily have to deliver something, everything to the user straight away. You give something easy and you can build on that as, as interoperability arrives.

Actually just before that, of course, you may know Canvas from such Dashboard widgets as the clock, where it's use to rotate the hands and the fantastic flight path widget where it, it animates the path of the plane, which, of course, would be sort of impractical to a store on, on the data store on the server, you know, the thousands of images that you're required to show every path. So where is it available? Well, it was, again, invented by Safari and shipped with Dashboard and, sorry, Safari 2.0 and Dashboard. And since then Firefox and Opera have implemented it interoperably.

It's also available in IE because people have used a JavaScript library that effectively mirrors the API and then calls some features that are only implemented on Windows IE to draw the same graphics. So it's, it is something you can use every where with a little bit of work.

From now on its development has been sent to the standards bodies, first to the WHATWG, which included in HTML file specification and that specification now is part of the W3C HTML working group. So, hopefully what we'll see is, again, complete interoperability as well as some new features coming to later versions of HTML.

For the core graphics programs out there the API will be very, very familiar. It's got paths, strokes, fills, gradients. I'll just mention a few things that maybe web developers are more or interested in other than that is, you know, can do the shawdows automatically. Drop shawdows, they're so 2006 now but, maybe they're still used. Patents. For the core graphics programmers there's one major difference, is where in core graphics you get a drawing context and you pass it into the functions you call. In this case you get the context and call methods on the context and set attributes.

It's the same idea but just a slightly different of approach. So, how do I include it in a web page? Here's a typical web page. I just have a Canvas element. I give it a width and height. And that basically reserves this part of the screen, the blue section in the page, that reserves that part of the screen and allows me to draw into it using JavaScript.

How do you actually draw? Well, like regular DOM programming you use get element by ID to, in this case I've used, I've given the Canvas object, sorry, the Canvas element an ID Canvas. That gives me a reference to the DOM object that implements the Canvas. And then I ask the Canvas for the drawing context. The drawing context is a thing that's actually associated with each individual Canvas on the page and allows you to render graphics into the Canvas.

Now, it's probably worth noting that you can see a passive parameter into the context, to get context call, which is 2D. The reason for this is it's designed to be extensible. You're just given basically a blank region of screen or blank canvas. There's no reason why you couldn't have 3D graphics in there or any other type of graphics you could possibly imagine or even simpler or harder.

The idea is that whatever is returned from the get context call is going to give you something that renders into that region of the screen. Now, in this case, finally, are calling 2D because that's the only one that's implemented. But you could, hopefully, imagine that maybe later down the track you'll be able to call, ask for a 3D, 3D context and, again, render 3D graphics. = Once you've got a context you set attributes on that object. And those attributes control the, the method of drawing, whether it's, you know, stroked with a particular color or it's width or height or opacity. And then you call methods on the context objects actually render shapes onto the, onto the page.

A quick mention here about what it means to have vectors. Because the vectors are described by a mathematical function here, it gives you an easy way to have resolution independence. The Canvas, while it's given, it's given its width and height in terms of the page dimensions, that doesn't necessarily mean you can't use a coordinate system and basically map the model of the graphics that you're using into the canvas system by setting transforms. So the Quartz 2D people should- be aware here that Canvas uses a Y down coordinate system which is probably the opposite to the way most people learn geometry.

The reason for this is that, the reason it's different from the typical paid Y up coordinate system is that, unfortunately, that's the way that HTML sort of works. As you add elements to the page the content moves down the page and this sort of effectively makes it easier for people that are familiar with CSS to use this similar approach to move into using Canvas. And, of course, once I have a coordinate system I can do whatever I want with it.

I can translate it. And it's not just moving it around, again, I could also cay rotate the canvas. I'm not rotating the canvas, it'll rotate the graphics that I've got to draw on the canvas. In this case squish them in an X direction and stretch them in height, a Y direction.

So let's just do a very simple flow through of what happens. So imagine this is the Canvas. You're actually given a blank canvas to start off with so, I mean, I'm just using the grid to show what's going on. Now, I call this very simple function, fillRect, which is saying use an X position and a Y position of 100 and a width and height of 200 and 300 and its just got to draw a rectangle on the screen. We'll go into this in a little bit more detail later, actually what's happening here. And you can see, again, the Y coordinate system goes down the, down the, down the page.

So, once, again, once you, once you've drawn on the Canvas you've got no knowledge, I mean you can't, you can't look, examine it to see what's actually on there as such yet. So, if you've got to draw multiple things on there they're just going to start piling on top of each other and obscuring it.

So, usually the first thing you do is say I want to clear the Canvas, which is basically just got to wipe the graphics out and give you a fully transparent bitmap. So, if I'd call the clearRect function, in this case I'm calling it on the entire Canvas, to remove everything and I'm starting back with a, with a completely empty screen.

Now the way that fillrect actually was implemented or, I don't know if implemented to say the way you should understand that it's behaving in the context of paths, again, similar to, same to way that even Quartz 2D has paths and also the Cocoa layer has paths. You start by saying a begin path and then you give it a set of functions. You have this knowledge of what the current point is. So I begin a path and the first thing I'm going to do is say move the current point to 100, 100.

Then I say to it, move the current point to, draw a line to this particular point and I'm going to go down a bit, then I'm going to go along a bit and finally I'm going to say, now from wherever you are go back to the where we started from, and that's going to give you a complete filled path, sorry, a complete object. And then the next thing I do is actually call a drawing operation on that, which is fill and it uses the path and renders, in this case, whatever the current color is into the, into the path.

Now, of course, I don't have to have just rectangles. I can here dazzle you with my artistic ability and show you that any curve or shape that can be represented by beziers or arcs or whatever can be added to the path. And, again, you just close the path and fill it and it's going to use whatever the current path is.

So, how do you set the, the actual attributes of drawing? In this case I set the fill color to, the fill style to be red. You can pass in a color value in CSS. And I select build a rectangle. Now, once that's done I have to update the fill style here to green and I draw the rectangle in, rectangle in a slightly different position. You can see that it's obscured the red one.

In this case I'm setting the color to blue and I give the, what I say here is the global alpha, which means that every drawing operation that happens now has got to be 50 percent transparent So you can see how this blue rectangle has parts of the green rectangle showing through it because it's semi-transparent.

Stroking, again, very simple. You set the stroke style. I've set the color to be red. I give it a line width. And what it's done is traced the path with a line that's five units wide and you've got a stroke. Now, you can control the order in which this happens. If you wanted to draw a stroked rectangle, for example, you can decide, in this case, to set the color to blue and fill it.

Then you'd set the color to be green and stroke the same rectangle. Now, this is sort of the typical way things work. You expect the stroke, the stroke actually is aligned on the middle of the path. So you've got half of the stroke is on one side and half the stroke is on the other side. So the order matters here. You'd get a different effect if you did the fill the other way around.

Draw images, and they're very, very simple here. I just set an X and Y point. Well, I should actually say the way you actually reference an image is kind of interesting. In this case my, the, the HTML document itself I've put in an IMG, an image tag and I've referenced a particular URL.

And then in my JavaScript I use get element by ID to get a reference to that image object and then I can draw it in the, in the Canvas. You can also use JavaScript to create a new image object and you pass in a URL and it'll fetch the image for you. Then I tell it to draw on the screen at an XY location and it's going to use the default resolution of the image to draw the screen.

Now, it's also interesting to note that the image here appears the right way up. So you, There's some things like text where you don't count your text but you have to realize that the coordinate system doesn't always necessarily work the way you want it to work. I can also pass a width and a height to draw the image in. In this case it's stretched the rectangle in the horizontal direction and squished it. Now, that's one way to squish and stretch an image. But we could have also done it through transformation. So in this case I'm going to draw the same rectangle a few times.

The first thing I've done is translated the coordinate system down by 100 units in the X direction and by 100 units in the Y direction and then drawn in a rectangle. And as far as the context knows, at that point where I'm drawing the rectangle, the whole coordinate system has shifted and I've just got to use whatever I'm in at the time to draw the, the rectangle. So now if I, again, translate the coordinate system a bit further down I'm also going to apply scale, which means that from now as, while I'm using my same model coordinate system when I render the screen all the X values have been stretched by two.

So what was a square is now, a 100 by 100 square is now rectangle. You can go further that, in fact, you can then rotate the coordinate system. And these transformations, every one that you apply, it sort of adds the transformation to a stack and you get a new coordinate system, and you can reset the transforms to go back to usual.

And what I like to do is, or one good approach is the, the context of the notion of a stack of states. So, for example, you want to, you're in a function you want to call another function that may do some transforms but you want to, when the function exits you want to get back to the state you were before.

What you do is, in fact, save the state on a stack, call the function and everything you do to the fill style, the stroking and all the drawing attributes apply to the current context. But once I call the restore state I pop whatever the save, sorry, the save context is off the stack and I'm back to, back to where I was. Actually, at this point I'll go do a demo. I thought there was a slide that says demo here.

Just give you an example of what can be done. So, in the graphics and media state of the union, Darin Adler from the WebKit team and Safari team got up and said Canvas is a way to do Canvas to do the current trend of reflected images. Let's just have a quick look at how this was done.

So here I've got a reference to the Canvas object, got a reference to the context and I basically just draw an image. Grass in the name of the image I've got from the document. That's going to put the main image on the screen. And now I do some transformations on that. I'm going to flip the coordinate system so that the reflection actually happens as if, it looks like the physical world would. And I also decide to set a bit of alpha so it's not completely opaque.

And then I draw a gradient color over the top of it so that it fades into the background. So you can see, basically, here's a rectangle and by the time it gets to there it's being, it's being drawn as if it's the background color. Now, what are the type of uses of Canvas? This, the thing is because you're actually just rendering to the Canvas you're not necessarily putting any content in the, in the, in the document, means while Canvas is incredibly useful you've got to be careful in the way that you actually use it on a page.

So, I mean, I was just sort of thinking, well, what happens if you had a surf shop and you wanted to, say, represent the, you know, the current swell or whatever to the customers that were viewing the page? And what's, what's kind of interesting about this is that it's an effect that people will see, but if, if they didn't have support for Canvas or they're running on a device that doesn't, doesn't have the interactivity they're not going to actually necessarily lose any content. They're still getting the same, same data that, some people are just getting possibly a better experience. Although I, this demo isn't so fantastic that I'd call it a better experience.

Now, Canvas can be interactive in the same way that every regular HTML element is. I can attach event listeners to it. So, I mean, here I'll click on it. You know, I'm a demolition company and I'm going old school and I wanted a splash screen that, that enters into my site and is some cool bricks that manage to hover in the air for a long time.

But again, that just gives you an example of the kind of, you know, it's a, quite a fast and well performed API you can use. In fact, people have implemented 3D renderers,= sorry ray traces or fake sort of 3D engines using Canvas, or even games. I've seen lemmings replicated in Canvas. And again, you can have these interactive elements that do things. You see opacity there. I can click and, and again just getting the current position on the screen where the mouse is over and drawing a, drawing a circle and moving the mouse around.

I'll go back to the slide. So, what you should keep in mind when using something like Canvas is that you have to make sure the content is accessible. So, as I was mentioning, you shouldn't, you shouldn't rely on the fact that people have got to see whatever you draw on the Canvas to effectively get to the content or interact with your site. It's purely for giving effects or, or adding something more to the page.

Also, this is something that the web accessibility guidelines say is that you should always use animations wisely. And there's a number of reasons for that, is some people, it can actually be very distracting to them to have lots of movement on a page. Another good reason is that if you've got an animation running that's just for the sake of making your page look cool you realize that, you know, that's, that thing's hitting the CPU. It might not be doing much but if it's animating fast enough it's, you know, something the CPU has to wake up for every time and if you're on a resource limited device, for example, that might mean that the battery can't, I mean, sorry.

they can't go into low power mode quickly. So it's important for sort of mobile devices. So that's all I had on, oh, there's the demo slide. There we go. That's all I had on Canvas. So now I'm pleased to invite my BFF, which is Best French Friend, Antoine Quint on the stage. He's going to talk about SVG. ( Applause ) I'm sorry.

Thanks, thanks Dean. So we're going to continue into transoff exploring the various capabilities that are available to you in Safari 3. And here we're really entering a world of features that is completely new to Safari 3 that were never supported before in Safari 2 or previous versions. Of course, they've been available to eager developers for a little while. We're downloading nightly bills of WebKit and etcetera, but these are, this is the first time that Safari users will be able to leverage these features when creating content and hosting WebKit within their application.

A quick introduction to SVG. SVG just like HTML and CSS and a host of web standards that people have grown to love or despise, but yet use on the web, is the W3C specification. It is fully, It is a full web standard designed as such. Currently the version of SVG that we will find implemented in browsers is SVG 1.1, which really defines a set of features for creating rich graphics specifically designed for the world wide web.

Looking forward in a couple of years, as Dean highlighted, it takes a while for technology as web standards to really get properly supported in web browsers in reach a mass market. The next version of SVG is already under way. It's called SVG 1.2 and it will go more deeply in the world of rich media and animations and interactivity.

So the design goals of SVG when it was developed within the W3C was to really provide flexible technology for creating graphics that would be scalable, which is very important when you're dealing with various sizes for screens and resolutions and etcetera, but would also be rich graphics, interactive and animated. And, of course, we're only dealing here with the two dimensional graphics. There is nothing in SVG that will really help you towards creating 3D worlds or anything like that.

Another great design goal is that were SVG to succeed on the web it would have to integrate properly with other web technologies. And integrating with XML, HTML, CSS, the DOM, JavaScript, PNG and all other web standards they're using every day when designing web applications and web sites have to be adequate, SVG has to be adequate and integrate nicely with those features.

And Dean highlighted how important view source is when you're a web developer and you want to learn new techniques and etcetera, and certainly SVG is no different to that. You're dealing the mark-up language and you can open any SVG graphics on the web and view the source and learn how it was created directly, which I think, personally, is something is a way I learned a lot of my web design skills.

Currently, So Safari 3 supports SVG as a new feature. Other browsers on the market support SVG as well. Firefox and Opera do support SVG and a similar set of features such as shapes and paths, support for text, solid colors and gradients, stroke out lines, opacity, fine transforms and etcetera, but also scripting and scripted animations.

But we will get into that later when we get into the more technical part of the presentation. The way SVG is being used today on the web, it's still a very up and coming technology and this is due to browsers only starting to support this technology recently. But, I think there are already good interesting signs on the web of people picking this technology up and certainly the whole mindset currently around web 2.0, which is very pragmatic and a, you know, whatever means I'll have to import to meet my end is what, doesn't really matter.

I just need to do what I need to do and SVG can be leveraged very well for the people who just want to get things done directly. So, of course, as an open standard it was directly picked up in the open source world and as a documented format it's really well suited for dynamic generation on the server, just like you would generate HTML dynamically. So you will find a few graphics packaging and matting systems built around PHP, Perl or Java.

But it also, SVG is also, of course, a client's side technology. And JavaScript libraries are getting more popular every day. There's a few mentioned in this very track at WWDC. And a few of those libraries, such as dojo, TIBCO and Google Web Tool Kit, also using SVG as an abstraction, as a backend rendering for their java script API's to do 2D graphics. So this is also a way that you can actually start using SVG even though you might not use the language yourself, it is powered, everything that you'll do with the API's will be powered by SVG.

And actually to look at some well known applications that have already started to use SVG, just to note a few. Google Maps and Windows Live Local both support SVG to draw overlays, your little routes over the map of mostly restored data. And an interesting product that's just been acquired by Google, it's called Tonicpoint, is really sort of a Power Point kind of authoring tool on the web, web 2.0 application. But SVG goes beyond the web.

As a standard it can be applied to, it can be applied to any sort of space that people are interested to, in applying it and certainly as a graphics technology. And as a document format it is important that there's graphics authoring tools out there for you to use and especially for designers who are not really expected to code mark-up inscripting.

And a few tools I'd like to mention here is, of course, Adobe Illustrator, which is the industry standard tool that has been SVG for years now. Lineform, which is Mac OS end tool that won the Apple Design Award last year, is another tool that supports SVG. And in the open source world Inkscape is a tool, a cross platform tool, that supports SVG. It's a vector drawing packet. There are many, many more tools from the CAD world to the mapping world and etcetera. These are mostly creative graphics tools but lots of industries have already started to run SVG for content creation.

But in terms of the web desktop, sorry. In terms of desktop usage SVG is already used also within the KDE and Gnome user interfaces to render all the icons that will be rendered on screen. Of course, SVG being a vector graphics format it is really handy, it is very handy to define your icons using that format because that means your icon will be able to scale to whatever the user preference would be set to, so if you want small or great big icons you will still get the same level of details all rendered by SVG.

And moving into the web, web/ desktop application space, hybrid apps, which is another topic that's covered at the WWDC this year. A TV application that's launching, currently called Joost, actually chose to use web technologies and more specifically SVG to create it's whole user interface. And what's interesting Joost is that the whole user interface is scalable so that when you use it on the TV, which might be 69 and HD, fulli HD, etcetera or a computer or any kind of resolution and screen aspect ratio, the UI will scale and behave nicely regardless of your display settings. So this is a few of the things, a couple of screen shots of the application. And you can see everything here is basically rendered using SVG.

So put back SVG into a context of web development. First of all, I think what is really tremendously great about SVG is that when you use SVG, even though it might be a new technology, you are not entering a foreign territory. You are likely going to have a whole lot of skills that would be directly, that you will be able to directly apply to SVG.

So a few of the main points about SVG and to meet those design goals I mentioned early. SVG uses an XML grammar. Everything is basically mark-up. So when you draw things you basically have elements in your document that define how things need to be rendered on the screen.

And just like in HTML when you can use java script and the DOM to manipulate your content, the same concept can be applied directly to SVG. CSS, of course, is also useable on SVG. And finally, what I think is very important about SVG is that it can be, as a web standard it can be and is, of course, implemented natively by browsers.

So what it really means in practice is that now you can author content is the same principle like HTML and CSS. You know about mark-up, you know about structuring your mark-up, you know about semantics around mark-up, you know how to apply CSS and selectors and etcetera, and these exact same things you will be able to apply when creating SVG content and developing with SVG content.

What's really interesting, of course, because of the mark-up and the fact that it's an open standard is that it is integrated right into your web page. You're not using a plugin architecture and just rendering something on the side in a black box. You're really, it is a first class citizen within your web page or in your web application. And when it comes to scripting, well, then all the skill set you've, you've starting to build up around AJAX is going to be applied directly also to SVG. You'll be using the same programming language, which is JavaScript, and the same programming API's, which is the DOM.

So all you really need to know, if I may say so, is to know about SVG specifics and to learn about how you can create graphics using SVG. But before we delve into that I just wanted to say a few things more related to the Mac. SVG was not designed for the Mac or for any platform in particular for that matter. But I think it's worth understanding that SVG really feels like a Mac type technology. The way SVG is implemented, for example, in the WebKit rendering engine in Safari is using the Quartz 2D graphics comm-and.

So Dean showed in Canvas how commands would be mapped very acute between Quartz 2D and Canvas, while SVG, in a way, is a very higher level of abstraction across those very rich drawing API's. And, of course, since everything in SVG is based on vectors you get by default resolution independence as a feature. So when you're dealing with new types of user interfaces, this is really something that will be tremendously useful. All you need to do is change some of the properties of your SVG document but the scaling will be done automatically.

So comparing SVG to some other proprietary type of technologies that are cropping up today or have been around the web for a long time now, well, the core difference, of course, is that SVG is a royalty free standard developed by the W3C and is open. You can participate as a developer if you're interested. And, of course, it lends itself very well to open source implementations.

And a direct benefit of the fact that it's an open royalty free standard is that standard does not belong to anyone. It is vendor neutral and it's not up to a single company to define where this technology will be going. So as a user or as a member of a corporation you can join the W3C, for example, and join the effort of defining the next, the next steps of the SVG standard.

But another great benefit is that instead of dealing with single implementation and possibly a company that would rest on its laurels or stop listening its customers because they have the strategy they want to impose on their users, but we're dealing here with the technology that will be implemented by many implementations and certainly Safari, Firefox and Opera are a great example of this. And these people will be competing to provide the best experience.

So we saw great, that on the web when Internet Explorer was a great dominant force on the web and slowed development for years, it's really slowed down the innovation on the web. And only when new wave browsers such as Safari cropped up, then the web 2.0 wave happened and it opened up a great new world of possibilities. So I think this is a tremendous advantage of SVG.

But, of course, like I said SVG is standards based. It's based on mark-up, CSS and JavaScript and so you will be able to use it at the same level as a first class citizen as this technology is. You're not dealing with a plugin. And not dealing with a plugin means that instead of dealing with a black box that's rendered on your screen, you're dealing with something that shares the same rendering model as HTML and CSS. So if you really want to do precise intricate compositions, you will have all the flexibility that you will need using SVG and other web standards.

Directly related to this, having a mark-up and a shared tree means that the same inventing models will be used across your HTML and SVG content, whereas if you're dealing with a proprietary technology they will probably have a different inventing model and certainly something that would be more local to the little black box in which you render inside the plugin. And another aspect of this shared DOM tree is that you will be using the same API's and the same scripting environment to double up your SVG content and implement interactivity and animation and we'll see some example of that later on.

But when you're dealing with plugins and proprietary technologies then you will certainly have to use either a different language or a different iteration of a language and certainly a different set of API's. So, I guess what I really mean to say here is that SVG really belongs on the web just like HTML and CSS's have been developed, this is really something that should be familiar to anyone who has skills in this area.

So Dean went through the Canvas features earlier. And, of course, these are two technologies that share some, that have things in common. So it is, well, mostly that they are used to create 2D rich graphics, but they are, however, quite different. So it's worth trying to isolate some use cases in which technology might be more appropriate. Of course, your mileage may vary and depending on your skill set, if you are more interested in direct programming using lower level API's or higher level mark-up then you will definitely make your own choice.

But for those few use cases, for example, if you're dealing with a static image, basically a static graphics asset that you would want to use to load dynamically in your document or you want to save an image in SVG. Well, SVG is a documented format so it is really meant to be used in that way, whereas Canvas is a series of programatic operations so it does not really, is not really contained inside a format or anything. So if you're creating two static images, then SVG is probably a better choice.

When you're dealing with huge number of objects, Dean highlighted how Canvas is a way to just draw and forget. So there's no huge memory footprints attached to using Canvas. So in this case, if you need reperformance and don't really care about preserving state of objects and etcetera, then Canvas is probably a safer bet.

But when we're dealing with interactivity then SVG really shines because, exactly because Canvas draws and forgets, you do not have the concept of objects or structure that you will be dealing with. Whereas SVG always has anything that's drawn on screen has a direct live representation in your DOM tree. So when you need to do interactivity you can simply get a handle to one object and update that object, whereas in Canvas you would have to rerender the whole Canvas to change the state of your graphics. Same goes for animation basically.

Since, if you want to do a discreet animation on one object of your tree, well, in SVG this is simple, you can just get a handle to that rectangle, change its width over time. Whereas in Canvas, once again you would have to compute the animation and the rest of the graphics to rerender every time.

And, of course, if you don't really care about a data model and just want to draw something and forget about it and just display it and let it sit there, then Canvas is probably also going to be, in that case, a better choice because, well, what's the point of having too many bells and whistles when all you want is to display a bunch of pixels on the screen? And finally, when you're dealing with server generated content then, obviously, SVG is the smarter choice because it is XML, there are millions of tools out there on the server sites to deal with XML content or even graphic packages, mapping, etcetera, like I mentioned earlier.

So basically document format is always going to be more appropriate for creating content on the server. So let's get started into more technical part of SVG. We won't get in depth because God knows SVG is feature rich and it takes a little while to really work out its little intricate details. But we'll still, however, try to cover the main bases.

First of all, before drawing anything with SVG you need to understand how you can integrate SVG in your web page. You have severate, several, sorry. You have several scenarios as to how you want to go around doing it. First scenario is by using a reference to SVG document. So just like in HTML you can use an IFrame to load an external HTML document, you can use object embed or IFrame to point to an external SVG document.

However, if you're dealing with more of a scripted environments or you want the optimal flexibility then you will probably want to mix the mark-up, HTML and SVG into a single document. So in that case you will have to contain all your SVG graphics within an SVG element within the SVG name space. Of course, you don't even have to have any mark-up already sitting there to create SVG graphics on fly. Using script you can directly use the DOM to add any new SVG assets to your document using the DOM.

So just to look at pros and cons of either techniques reference and inclusion. Using a reference inclusion will mean that if you're dealing with maybe a widget, like a stock widget, that you would just want to display on your web page but it's not really part of the contents, it's just something you want to have sitting there as an add on, then you're dealing with an external asset and it's probably better to just point to a URI and let it be and not bother your, the rest of your document to deal with this.

But however, using that technique if you want to get inside the content and update it, integrate it with the rest of your web page then you will have to use specific DOM accessors to get to the SVG document. In that case it is the content document property that you'll be able to access on the object rendered element. Whereas when you're using inclusion you're dealing with a mixed name space DOM tree, which is also a single DOM tree.

And that means that you have complete flexibility as to how you want to structure your contents. This also means that you have assured DOM and CSS trees. So you can apply styling with a unique style trees to both SVG and HTML content, which is really, really practical. So it's really about if you're dealing with external assets or you just want to bring in there or if you want something very flexible and to have a unique document to represent both your textual data and, and etcetera and HTML and more graphics in SVG.

So, obviously at that point using a mixed document it'll be tougher to manage external graphic resources. So SVG is, has pretty much all the graphics features that you would expect from a modern graphics language. Vector shapes, obviously it's a vector language so these are the core basic curves and etcetera.

Of course, you can also have solid colors but also gradients and patterns, fill opacity, etcetera. These are all features that we're going to go through by example right now. And a second set of features that we'll go around later on is how you can use the DOM to add interactivity to SVG. And this is really where SVG shines and is unique is leveraging the concept of mark-up and scripting together to create really interactive graphics and even animated graphics.

So to start things softly the first thing, the equivalent of hello world in the graphics world is to draw a rectangle. So, whereas in Canvas, of course, you would use a set of API's to basically do the same thing, in here you're just using a declarative mark-up approach. So you have a rectangle drawn witha rect element, set its graphic properties using the XML attributes XY in width and height and it doesn't really take a genius to work out what is going to happen here.

Of course, rounded rectangle are also supported. You just have to use the RX and RY attributes to define the corner radius and the X and Y axis for your rectangle. Circles are represented by their own elements as well. The CX and CY will define the center of the elements and the R attribute will define the radius. Ellipse are pretty similar except you will have both an RX and RY instead of radiuses to deal with the X axis and Y axis radius.

Polygon is another element where you can give it a set of points. And I think something that's worth mentioning here is that even though SVG is an XML language all of its features are not directly exposed as XML. So, in that case, the list of points, which is a flat structure, is, is just a micro syntax within an attribute.

So you could have thought that we would have a set of elements as child of polygon to specify points but that's not the way SVG is designed. I actually don't think it makes a lot of sense because XML is very good for a hierarchy, something that has order that you might want to reorder, whereas this is really a flat list of coordinates.

Path, of course, you need to have optimal flexibility when dealing with graphics on the web. And here again we have micro syntax with different comments such as, M for move to, C for curves and they're lots of other sets of comments. You can use a path, for example, to draw the Apple logo.

And, of course, when you draw things you need to bring color into the equation to have something render on the screen. And so instead of having, like in Canvas, a context of here's what I'm doing now, I'm using red color to fill in stroke and etcetera. Here we just have per object properties to define what color they are. So you can use the fill attributes to define what the fill color is, the stroke attribute to define the stroking.

Fill and stroke out all on the same object, which is actually quite handy, you don't have to use two separate things to draw a fill and a stroke. And you can use all sorts of values for these, for these fill and stroke attributes. So you can use key words such as blue, an RGB combination, RGBA actually also if you want to have transparency directly expressed in your fields stroke color, decimal, etcetera. All this, the same data types that you would use in HTML and CSS. You can also control fill and stroke capacity separately from one another or use an opacity attribute to compose the whole graphics together against the background.

Of course, we can get into more advanced paint service such as, linear gradients, once again, nothing very surprising here. We define the linear gradient elements, give it an ID so we can use it later on to define an object that will use that as a fill and you use XY, Y1, X2, Y2 attributes to define the direction of the gradient. In that case we have a gradient that's going to go from the top, well, anyway, you figure it out. And to use that linear gradient you just use URL construct within your fill.

So that means you can create a set of resources of (unclear) that can be used by different assets in your document. So you can have five different rectangles using the same gradient and if that gradient changes or is animated then the different objects that use that gradient will automatically be kept in sync, which is really handy.

Radial gradients, of course, pretty much the same way. You also define a center for the gradients and a radius. You can have, of course, multiple stops. Here there's only a first and a last stop, go from zero to one but you can have as many stops as you want with how many colors as you want, and, of course, you can also set up, even though it is not illustrated here, a stop opacity for each stop. So you can have nice little drop shadows that will fade in gradually.

Clipping, another very important feature in graphics. So a clip path is a shared resource. You can use any SVG element as a child to define your clip pass. So it doesn't have to be a rectangle or rounded rectangle, it can be anything. It could be very free form. It could be a path, for example.

In this case we're using an ellipse and we applied a clip path of the ellipse to a rectangle by using, once again, the URL construct applied to the clip path attribute. And you can see the rendered area here in between the stroke lines with the solid fills of blue and the stroke of red.

And there are, of course, way more features. I mentioned here we haven't used any CSS. We have only used direct text and attributes but in this case we're just demonstrating how we can use the same attributes as properties so we have fill, stroke and stroke width properties, which are new to CSS for SVG usage. And you can create a class, for example, the mr-f class here, which we'll be able to reuse across different graphics later on by using the class attributes.

You can also define styles inline on your elements using the style elements if that's what you're in to, just like you would in HTML. You can draw text very easily by giving it an anchor. The baseline will be the lower part of the text that will be aligned with this position and just have you text right here. So this is really handy because not only you can draw text but you can transform text just like any other part of SVG. So in this case we rotate the R text by 45 degrees.

Like I said earlier, we can use class attribute to define the look and feel of our rectangles. In this case we're using the mr-f class that we used earlier. And another great feature of SVG is that as long as you define an element with an ID you will be able to reuse that element in any other part of your document without having to replicate it in the DOM tree just by using the use element.

So in this case we have the Apple logo as a path, which shows in white at the lower end of the screen, and we're going to use it once more with a transform to scale it and rotate it a little bit, apply a class using CSS and, in this case, we're using the xlink:href attribute to point to that logo. So this is really handy when you're dealing with symbols and etcetera in your, in your, in your content.

So what, It's really interesting, and I'm not going to spend a lot of time here because, well, first of all I'm, time's running out, but also because as developers I think this type of things will be very handy for you to pick up. And, like I said, SVG is only using the DOM so all the knowledge you know about HTML, scripting HTML is directly applied to SVG. So if you need a handle to an SVG element you just use the getElementById method and pass an ID that you will have set in your mark-up as well and you will get a DOM object pointing to that piece of mark-up.

You can get elements by tag names, of course, so if you want to get the list of rectangles in your document set the name space to the SVG name space and rect to be the name of their elements and you will get a list of all the rectangles in your document. Of course, you can create SVG document, SVG content on on the fly just like you can create HTML content on the fly.

You will use the create element method in that case. Just give it the SVG name space, the name of the element you're going to create, and once you have done that you will want to set its coattributes. So if you want to draw rectangle, for example, create element NS and SVG name space and the rect string to create the rect element.

And once you have a handle to that element use the set attribute method you set the XY width and height and etcetera. So you can do all this dynamically on the fly within the client. And you will use the appendChild and removeChild methods to move content around and put it in the right place in your document.

So I won't go in great detail about this because this is all sorts of things you will find greatly documented out there and everyone uses it to, to program the web content. But what's interesting about SVG is that because it's a graphics technology and all of these preceding methods I've mentioned were all about dealing with an XML structure, SVG really needed something to be able to deal with graphics directly. So the first few things that you will have in SVG and the SVG DOM is you will have a set of data types that you can use in the graphic context. So SVG point to represent a point, SVG rect or rectangle SVG matrix for metrics, etcetera.

Those data types are used, you will encounter them when you start using methods such as, get (unclear) box, you query the getBBox of an element, which might be complex and not directly replicated in the mark-up. So if you're dealing with a path, essentially if you want to have the bounding box and only had the XML data to figure that out you would essentially have to redraw the path yourself logically. So the DOM in SVG will allow special methods to do that directly. So getBBox will return SVG rect object with the metrics wherever the element is in your tree, if it's a group of elements and etcetera.

You can also query the transformation matrix applied to an element in, in respect to another element using the getTransformToElement and get the screen, the complete transformation matrix all the way up to the client user space using the getScreenCTM method. This method will return a matrix and you can use this matrix, for example, to take the client X and client Y properties of an event and transform them to get into the user space of the current SVG object that you're dealing with.

So this is really handy and, of course, SVG DOM also has a set of API's to deal with those micro syntaxes that I talked about so path structure, a list of points and etcetera. So you can expect that as an essential tool kit. So like I said SVG is really great for interactive content.

Interactivity is all about reacting to user interface events. And in HTML you will use all of the same types of techniques and in SVG you can directly use them as well. So if you want to, it's not scripting per se, but if you want to apply a behavioral change, for example, mouse over when an element is focused, you can use the CSS pseudo classes :hover and :focus to change the styling properties of an SVG element.

Of course, you can also use mark-up based handler onclick and onmousemove to call a special piece of JavaScript, which is really good if you're dealing with pre-defined event handlers. And you can add event handlers programmatically as you are creating your content. You can also add listeners directly from JavaScript using the addEventListener methods, which is great for dynamically adding event handlers.

And animation is basically performed by using the same methods in the DOM recursively. So in this case, for example, I'm using the set interval function from JavaScript that will call another function repeatedly given a specific interval, and in this case I will want to fade an element from opacity one to opacity zero.

I check the first, the start, the start time by getting the time from a new data object, set the duration to be two seconds 2000 milliseconds, iterate through that time figure out the offsets and apply basically that value as the opacity. So using this function, this gives you a way to animate the opacity of an element across two seconds. So let's get to the most interesting part of the session, which is, of course, demonstrations. Switching to demo screens. Thanks. So I have three little demos that are actually pretty simple, I think.

So this first demo probably doesn't look interesting at all. I mean, I'm just here, it's probably just one of those new HTML five elements, which is the input type search, which was an input invention. Instead of just using that element directly I chose, because I like that kind of stuff, to implement it myself using SVG. So you can rescale it and, I guess this is really smooth when you're dealing with a need for scalable UI.

If you have a really high DPI screen, and certainly those new 17 inch Mac Book Pros have very high DPI, well, it would be pretty nice to be using SVG to draw your URL elements. So the funky thing here is that actually this part here is HTML so I can type whatever I want here. It's just an input element.

And the way I draw it is that I have a rectangle here in the background that you do not see in SVG and I query in symmetrics dynamically every time I want to redraw because the scaling is defined by the mark-up and, so this is really, really handy. And, of course, I can create my own focus ring using gradient and, it's pretty, it's pretty neat. Another interesting demo, there you go.

I co-run the web site SVG.org, community web site and I have a Google Analytics account. Google Analytics provides XML feeds of the contents for statistics. And I'm just loading them up in this little piece of SVG. So this is a standard SVG document, no HTML in this one. So you can see its scales. This is all created from AJAX calls, XML http requests.

So I make it a little bit wide. You can see that the little points give me, I can get the data for given dates. Every thing is generically done on the fly. I can change the month, go back in time, animate it, all using SVG scripting. And, of course, it wouldn't be a demo at WWDC if you couldn't run it in slow mo.

So there you go, so.

For example, the text up there is rotated and opacity is applied so it transforms, the points move to the new directions, etcetera. So this is actually pretty simple and pretty effective and whatever the scaling is everything will be done regardless of the resolution or anything. So I really like that stuff. So, for example, launch animation and resize everything, it will all be done automatically. You don't have to worry about taking care of rescaling anything.

And finally, another interesting demonstration that I wanted to make is when you really pull together HTML, CSS, SVG all in one big document and to create some pretty compelling user interfaces so. This is all, of course, running in Safari 3. So this is a blank Canvas. I'm loading my Delicious Library XML database on the fly perform X path queries, search it.

So in this case I'll be looking for, I can look for different things. In this case I'll be looking for artist name that may contain the string WI. Can see a list of objects coming up. I can have. So all of this here is SVG objects within divs that are directly laid out using CSS contracts of inline blocks.

Here this is HTML text but the background is an SVG piece of graphic that scale automatically. I have a little drop shadow applied directly to my SVG rectangle so that it doesn't clip too harshly for the graphics. And I can, of course, redimension all the graphics on the screen. I did my little custom scroll bars in SVG. I can go up and down. I just put in some useless effects when you click on stuff so you can see little animations and, of course, you can use slow motion, resize objects.

Well, it's a bit buggy but, animations are performed while I redraw and resize So I think it's really pretty neat and really opens up a new set of avenues you can take on using WebKit. And, of course, this is not limited to web content. WebKit is part of your tool kit as Mac OS X developer and so this type of interface is going to be directly hosted in a Cocoa app, integrated with JavaScript, hook ups, objective C callbacks, jar scripts and vice versa, and I think you have a whole brand new world of possibilities for your application.

And that pretty much wraps it up. And we'll hand the mike over to George, who I'd like to thank for hosting this track. And before George comes up I would like also to thank the Safari and WebKit teams for implementing all these cool graphics features and giving developers and web authors alike new very great creative avenues to explore. Thanks.

Awesome. Thanks every one. And just to summarize detail demonstrations of the stuff that you just saw, Antoine will be hosting this code on his website. So by the time all of this information gets posted to the WWDCADC site we'll have links and you'll be able to directly download the sample code of the demos that you just saw. So I want to wrap up with one little note.

And we're adding this basically one more thing slides to all the content and media sessions. We want to remind everyone what we're talking about is building AJAX applications. And when you're building a desktop AJAX application, you know, that application is going to be able to run on the iPhone. With that aspect we want to reiterate what was discussed in yesterday's session about good design practices.

We'll be having a rebroadcast of the iPhone developing for web sites for iPhone session tomorrow in North Beach at 3:30. So for those of you that were not there or those of you that were there and would like to take more notes on what you saw and what you heard, please, we welcome you to revisit and rewatch that session. So coming to good design practices.

Essentially column layout. When you're building out your design think grid system, think Swiss grid system and design things so that it makes the touch sensitivity on the device and the multi-touch capabilities, I guess, the functionality work better with the content that you're laying out. Size matters. You're dealing with edge and you're dealing with wi-fi.

So when you're building out your content and you're taking that all into consideration, please keep that in mind with the types of imagery or the types of video that you might be using within your, your contents. And also the constructs of the resolution independence graphics that you might be laying down with CSS 3.

Media queries, CSS 3 is extremely important. This will be able to do the dynamic resizing and dynamic layout of your web site content based on your landscape or portrait views on the actual iPhone. And then lastly, optimizing for iPhone. The key things you want to remember and consider when building up this content. Remember the view port, the height and width of landscape and portrait modes when you actually put that into your CSS queries.

Remember the only tag. Using the only tag will basically allow non iPhone or, you know, mobile aware browsers to ignore that context of the actual view port that you're assigning. Double tap, when you're dealing with your content remember the different types of DOM events that we had mentioned in the session, remember that when you break up you contents in a grid based layout it makes it easier to deal and navigate in and out of that content and construct.

And then lastly, text size adjustments. The device will basically take advantage and deal with a lot of the logic when you're dealing with your content but, again, remember when you build up your system in a column based sort of schematic or your grid based layout remember the type and the flow of the content so you're not using a div and having it completely fill the width of the page, break it down into, again, column view. And then lastly, the events, you know, dealing with the JavaScript events. We'll cover that again in the session tomorrow. It is a rebroadcast but there are a select amount of events that are supported on the actual device and get up to speed on that.

And then lastly, your media. Again, edge versus wi-fi, take into consideration how you're going to actually encode that media, the bit rate you're going to be dealing with it and also your ref movies that you're going to be creating when you're dealing with switching out of HTML context into H.264 context when you're dealing with audio and video.

For more information, again, go the session tomorrow at 3:30 in North Beach, the internet wwdr contact for dealing with iPhone issues right now is Mark Malone. We've got a lot of helpful URL's here dealing with both the user agent detection, dealing with the W3C and WHATWG group specifications around sort of future iterations on what the browser will be supporting as well as CSS 3 media queries.

And then, oh, right there, that's actually, is that the URL for your sample? Yes. So that URL there you'll be able to download Antoine and Dean's sample application code. Again, this'll be posted to the ADC website for those of you, quick couple seconds if you want to copy that down.

Go there and look at a blank page. And now when you're dealing with media as it relates to the iPhone Allan Schaffer is your WWDR contact. We've got some tutorials and we have a ref movie maker tool that you can download in preparation for your actual content. Remember that the type of media that the device supports is H.264 baseline profile.