Vector Graphics for the Web by Brad Neuberg
Videos
- Watch high quality video on Vimeo
- Download video (WebM, 156MB)
- Download video (OGV, 71MB)
Slides
- See slides (Requires a modern browser)
Transcript
Brad Neuberg: [0:04] Thanks, everyone. I loved Robert's talk. I don't think I'll ever be able to get the sitcom, "Friends," and closures - that linkage - out of my head. So I just want to ask, who was at the party late last night? Yeah. And who drunk a bunch? [laughter]
Brad: [0:23] Who has a little bit of a hangover? I do. Wow. I'm lightweight. I went home early, but I'm a little loopy from jet lag, so excuse the bad jokes if they land flat.
[0:36] So just before we jump in, I want to say that this slide deck is actually a little bit of a universal slide deck, and I'll be showing you what that means.
[0:46] But today, we're going to be going deep into SVG. And I just want to know, again, who here has gotten to work with SVG. OK. And who, here, hasn't necessarily gotten to play with it, but has read a little bit about it. OK, great.
[1:03] So SVG is one of those technologies - there's this old saying that, "I spent 10 years to be an overnight success." SVG, in some ways, is finally arriving. And one of the things that's making it unique is that it's, as part of HTML5, you can now bring SVG into your pages.
[1:23] So one thing, I want to apologize is there's some network difficulties, so some of my demos are on the network, so they may not load, so I might be painting a picture for you and describing what you'd be seeing.
[1:34] And I also had wanted to take questions on Twitter that I can address at the end of the talk, so maybe if that comes up, if you add me at BradNeuberg when we get to the end of the talk I can take questions through Twitter.
[1:52] So I just quickly want to state, who in the heck is this guy up here, a little bit about my background. So some of the things I've been involved with is when AJAX was a little bit of a trendier word, creating lots of libraries like Dojo Storage, Dojo Offline. Really simple history.
[2:13] And when I was at Google, I was a developer advocate of Google Gears, which was trying to push the browser forward a little bit before HTML5 arrived. I started something called co-working.
[2:24] When I was self-employed, even though I'm a little bit of an introvert geek, even though I'm standing up here, it was nice to work around people, so I wanted a space where there were other programmers, so I started something called co-working.
[2:36] And I was also in a group at Google called the "Open Web Advocacy Group," where we created things like SVG Web. And most recently, I was a software engineer on the Google Docs and Google Buzz Teams.
[2:50] So even though we're going to be focusing on SVG today, I want to place SVG in context. There's a great quote by an author named David Weinberger - it's actually a book title called "Small Pieces Loosely Joined," and he uses this to describe the Internet itself.
[3:07] And we're getting a whole host of new technologies and existing technologies, things like HTML5, CSS3, SVG, JavaScript, and WebGL. And when you actually start like working with these things, you find that they're like these small pieces. They can get really interesting when you can combine them together.
[3:27] And one of the demos - well, let's cross our fingers on this one, it might not work, but what you would be seeing is a "WebGL" - Ah! It's going to stream in. Oops! I'm not running Safari nightly.
[3:49] Here, I'll paint the picture. You'd be seeing a 3D teapot, rendered in WebGL, and when we would click it, CSS3 animations would flip it around. So these are two different technologies, that when you put it together, something interesting happens.
[4:05] And you may have seen when I did this, these are actually SVG masks, the text lying on top of HTML5 elements, masking through the image. So keep in mind these are tools that you can add to your tool belt that get really interesting when you put them together.
[4:25] Now, like I mentioned, this is a little bit of a universal slide deck. We're only going to be covering SVG today. But I just want to show you that the slide deck is built using all these technologies. And for example, there's a whole thing on HTML5 in here. We're not going to cover that.
[4:45] Today, we'll be talking about SVG. Ah, it loaded, but one of the eyebrows didn't.
[laughter]
Brad: [4:54] Was it Vanilla Ice who shaved off one of his eyebrows or something? We've got a little Vanilla Ice thing. So one of the things I love about this - what it should be saying over here is a Twitter stream of whenever anyone mentions "Mr. T."
[5:06] And I love this demo, because Mr. T, each one of his arms, is a separate SVG file brought in with the image tag. And then, the animation is done using something called CSS3 animations. So again with that theme, different technologies, but when you put them together, you can do some really interesting things.
[5:28] Who, here, has gotten to play with CSS3 animations or transitions? Great.
[5:36] So let's jump into SVG. So the best way I like to think about SVG is "HTML for Graphics." So just like in HTML, we've got the Form tag, a Button tag, SVG gives you more tags, but for graphics.
[5:53] So for example, a Rectangle tag, a Circle tag - and these are Vector shapes. And what that means is that actually behind the scenes, they're described by math.
[6:06] So for example, this is SVG. And because it's described by math, as we zoom in, it stays beautiful. The lines stay clear. They don't break up. And that's what vector graphics gives you.
[6:25] And one of the other really unique things about SVG is it uses your existing skills. You use CSS to style it. You use JavaScript in order to add behavior. That's one of the unique aspects.
[6:40] So common questions are when should I use SVG, and when should I not use SVG? Well, because SVG is those vector graphics, it's really great in situations when you have "Dynamic sizings and scalings."
[6:53] So let's say, for example, you have a web page and you want to have a background. You can set that to an SVG file, and as you change the size of the page, the SVG will scale and it will still look nice. SVG is a great thing to use in that situation.
[7:11] If you want to use CSS, SVG is great. And we're not going to be going into CSS3 in this talk. But SVG and CSS3 work together really well because you've got all these new selectors. It could be very powerful. So being able to put those together is really nice.
[7:29] SVG is great when you're dealing with "mouse-driven" applications. So in SVG, when you say, "Here's my rectangle. Here's my circle." The computer knows that it's a rectangle and a circle, so it's easy to add behavior. You can say, "onmouseover", for example, and link some JavaScript to it.
[7:47] And finally, SVG is great when you want something to be easy to comprehend by search engines.
[7:53] Google, for example, has announced that they're indexing SVG recently. And also if you want something to be accessible. Because it's just text, it's easy for screen readers and actually other sites and applications to hook into what you've built.
[8:09] So when is SVG not a great choice? Well, when you have something that needs a lot of sprites. If you have an interactive graph with 10,000 data points and things flying around, if you have a game that's primarily keyboard-driven, SVG - the overhead of the browser tracking everything, you don't need that, so Canvas is a better choice in that situation.
[8:40] If you're dealing with something that's predominantly pixel-oriented, if you're an entrepreneur and you're building the next Photo Shop, but on the web, Canvas is a better choice because it's more naturally dealing with Bitmaps. So those are two good things to know, should I be using SVG or Canvas?
[9:01] So let's jump in with some real code. I want to make sure - people in the back, can you see the source code? Yeah? Raise your hand if you can. OK, good.
[9:12] Just a quick thing - the monitor keeps turning off. I don't know if there's something to be done there.
[9:19] So there's a whole bunch of different ways to embed SVG. One of the one's that's coming up, it's actually going to be in the next generation of the browsers, is being able to drop it right into HTML5.
[9:31] So I'll get my little laser here. Here, we actually see the HTML5 DOCTYPE, and right here, we see a little bit of SVG. And we can actually draw - we can actually just say SVG now, and HTML5, and you see some stuff in here. And we'll be covering some of these different elements.
But the code that's right here is actually being rendered right there, in real time. There are a couple of little things here. You see, you don't have to grab all this right now - Aw! My battery died, OK, Murphy is alive.
[10:11] So we have a circle, here's our circle. We have some text, there's our text. We have a gradient, which you can see here. And one of the other things you can see is we can have IDs, just like HTML. We can have CSS classes, just like HTML. And we can style these.
[10:31] So here we say, "The circle is important," and we attach it to a style. And you see some new style properties here - a stroke, a stroke-width. And we're doing the same thing for text. Here, we're changing the stroke and the font-size. That's pretty cool.
[10:47] You see one other thing. Here, we're attaching some behavior. On "mousedown," say, "Hello." And if we come over here, there we go.
[11:01] Now, traditionally, SVG has kind of been in its own file as an XML file format, and here's what that looks like. So now you have kind of the "XLM-y" stuff. So we have a declaration.
[11:14] And you see when you use it as XML, you need to have the XML name spaces right here. But then, everything else looks pretty much the same, and we're rendering it right there.
[11:26] There are other ways to embed SVG. One is as an object tag. So we say, "<object type="image/svg+xml"…" that's the SVG mimetype. If you put the stuff on a webserver you want to make sure to add that mimeype, and you point to your SVG file.
[11:46] This is a great way, for example - a lot of these demos, for example, I included using the object tag. As is this guy right here.
[11:56] Finally, almost all browsers support using SVG in the image tag like you saw in that Twitter demo with Mr. T moving around. And that's really straight-forward. You say "<image src="sampleEmbed.svg">" and then point overhere.
Something special about that is what do you think would happen if you could use the image tag to pull SVG in and there was JavaScript inside. Would that be a good thing or a bad thing?
[12:22] [audience: "bad"]
Brad: [12:23] Bad, yeah. So when you include SVG using the image tag, JavaScript is disabled. I'm clicking, but there's no "Hello."
[12:34] And finally, one of the cool things is you can use SVG as a background image. Shelley Powers has written some really cool articles about doing this. It really lets you make some really nice markup and that's pretty straightforward. We just say .SVG instead of a .gif or .png file.
[12:54] Let's get into the basics. Here were see some of the basic shapes I'm going to run my mouse over. We're going to see some of them change.
[13:03] We've got a circle. We say here's the center x of the circle and the center y. Here's the radius. I've made these red because it's special circles. But then you'll see some things that show up all over elements in SVG.
Fill, which obviously fills with orange and stroke, which actually makes it black and that's the default. I'm not showing it here, but I have a CSS calling hover that changes the stroke to yellow when I run over it to make it easier to figure out what I'm talking about.
[13:35] Rectangles, pretty straightforward, give the x and the y, the width and the height. You can say rx and ry to make rounded corners. So it's very straightforward - PPK is laughing. One thing I wanted to say, I really wanted to bring a shirt that said, "I love drag and drop," and give it to PPK. [laughs]
[14:01] Then now you see here, a little different styles. So just like HTML, you actually can have a style element and you can choose. You can use attributes or you can use CSS styles. Here we're doing a similar thing.
We have ellipses. So we have our basic shapes: [14:13] ellipse, set the center, set the radius on both axis and then you see those standard things.
[14:23] Now you start seeing something here. We're going to talk about measurements. But not everything has to be pixels. Here we are saying, make the outside one centimeter. We have a polygon and you give the points. Each of these is an x, y point and a polygon with fill. It makes it a star.
[14:44] We'll be talking about transform as well, but this lets you draw something and then move it around, move it here, rotate it, scale it. Here's a path.
[14:53] Now a path takes a tiny, little language that essentially says, here I have a pen, move it around, pick it up, and so on. I'm not going to go into it. It's pretty straightforward. Generally you might be using a tool that generates this - basically you just say move in different ways.
[15:16] We see our standard properties and finally we have a polyline which allows you to draw something like a polygon, but you have a little bit more control over whether it's filled. So there are your basic shapes. That's like your ABCs.
[15:34] I'm not going to go deep into this. There's something called a ViewBox. I'm only mentioning it because sometimes you might run into issues and it's good to know that it exists in case you need to solve something.
[15:47] We have a couple of things going on here. We have an image that I've brought in and I've set the width and the height. The ViewBox, you can think of, as the x/y width and height to draw over your SVG.
[16:09] Working with ViewBox is a little bit of an art. If you need to use it you just fool around until you get the right value. So we can actually move this around. Right now we're saying, go from 0, 0 to 200, 200. But if I was to say, -50, -50...
[16:32] [mumble]
[16:52] That's weird. So while I work out this technical difficulty I'll talk about something called... There we go. Excuse the technical difficulty there.
[17:12] I'm not going to go deep into this, but it allows you to move your thing around and have a little bit more control over how the SVG draws itself. Just keep it in your mind. If you run into something really funky, think about, "Oh, maybe ViewBox can solve this." It's a little bit more of an advanced thing.
[17:32] One of the cool things about SVG is it can have hyperlinks. You can hyperlink into an SVG file on specific elements and you can jump back out.
[17:43] One of the things that you need to do is SVG uses something called XLink. You don't need to know it. It turns out to be cruft. All that you really care about is your href, just like the normal link, but you just have to add the little name space.
[17:57] So making a link - here we are, we have our circle. You actually see here I'm using percentages to lay it out. You don't have to use pixels. So I'm saying, put it in the middle and then give a 10 percent radius of the total area.
[18:10] Then here, link the whole thing over - I'm just putting my website here - and make the target blank, just like normal things.
[18:21] I'm not going to click because the network is down. But you see it turns into a finger where if I click on the circle. Notice it's truly a circular link. It doesn't turn into the finger unless you're right on the circle.
[18:32] So you can make interactive, linkable things, which is great because that means that your diagrams can interact with page rank, for example.
[18:41] They can really say, here's a medical diagram, here's a business diagram, and the individual things can link out and do cool stuff.
[18:51] One of the things I like the best about SVG is that it integrates with CSS and you can embed it. I actually left off some of the SVG, but we can have a style element inside.
[19:05] Here we are saying, there was our hyperlink, when you hover over it, change the stroke and the width, and then we actually use a little bit of CSS3 here.
[19:16] We say, when you hover over the link, grab the immediate child circle and give it a gradient. Here's what that looks like. When I run over it, it changes.
[19:36] Another one of the cool things about SVG is you can actually build up a library of reusable stuff.
[19:43] So there's something called the use element that, essentially, you can define, make a happy face, make a complicated thing over here and then you use the "use" element to stamp copies of what you just defined. This can be really useful if you want to have common styles.
[20:02] So one of the things in SVG is a defs section for definitions; it's like the head element in HTML. That's where you put things like gradient definitions, fonts, or things that you want to reuse.
So here, for example, we define a polygon. We give it a name: [20:16] polygon sprite. We give it a fill and an opacity, so it's a little invisible or a little see-through. Then we give our points.
[20:28] Then right here we use the "use" element and we point to our sprite; three times, boom, boom, boom. Then we use this transform property - which I'll be talking about - which lets you move things around. So for the first one we actually translate. We say, move it over on the y-axis minus 20 and then rotate it 15 degrees.
[20:49] Here we move it on this x and y and scale it to half-size; that's that guy. Here we move it again, we scale it a little bit, and we rotate it the other way. So this is really great to have a common library of reusable things, one of the nice aspects of SVG.
[21:09] So just like in HTML you have a div that can group things together; acts as the super parent. SVG has something similar but it's called the group or the G element. This is very powerful. So you say G and then you nest things. Here we're nesting a rectangle and then some text.
[21:28] What's cool about the group is just like if you've ever used a drawing program. You know how you group things together and then you can change it as a unit. Well, you can do the same thing here. Here we're grouping these together and then we're doing that transform again.
[21:45] We're saying, move it over on the x and the y, rotate 45 degrees. And you can also set common styles. So we're saying, everything that's inside of me, make it blue. Again, this is one of the basic things at SVG. It's very useful.
[22:04] I haven't quite talked about transforms yet, but one of the things that's useful about groups is maybe you make your group for a happy face, for example, and you can actually translate it to the middle of the screen to make drawing easier and you can translate it back to where you want.
[22:23] That can actually help to make it easier to figure out how to draw things. That's another useful aspect of groups.
[22:30] OK. So now we're transformed. I mentioned that you could transform a group as a unit. Here we have that shapes demo again, but I've put it all inside of a group and they're all in there. I'm not showing that. I'm showing the group.
[22:43] Let's start adding some transforms to this. There we just added a translate. I said, -100,-100. So you saw them jump up and to the left. Then I'm skewing it on the x. Skewing is when I push one side to the side.
[23:01] Do you ever have a box and you push it to the side, it folds a little bit? So that's what we're doing here. You notice it skews.
[23:11] Then we rotate. Now this is actually a special form of rotate where I can give the degree and then give the x and the y point for where you want the center to rotate. By default it's going to try to rotate from the upper left. So everything will swing around like this, which may or may not be what you want.
[23:35] But you can actually say no, put the center here, and rotate around this point, which is what we're doing right here.
[23:45] Then finally, we're doing a scale. So by default everything has scale 1.0; that means do nothing. If you go smaller than 1.0 you're smushing something down, making it smaller. If you go larger, you're making it bigger. So we are making it just a tiny bit smaller.
[24:02] One thing to know about transforms is they add up. They go from left to right. So if I were to flip and do this the opposite way, you would see something different. Remember that, they add up just like in certain forms of math you can't mix things up. Know that; just keep that in mind when you're doing it if you run into some issue.
[24:31] Let's talk a little bit about scripting. You see a lot of text here, but what I want to show you is that working with SVG from JavaScript is pretty similar to working with it from HTML. There are a couple of little differences.
[24:47] The first thing is technically SVG lives in XML name spaces. So you're going to have to know just a little bit about those. Here we set some variables to the SVG and XML name spaces.
[24:59] Who here knows XML name spaces? I personally think they were a mistake, but they're there and they're just for SVG. They're grandfathered in a little bit in HTML5.
[25:13] So it's a little bit of boilerplate. Here we're actually dynamically creating a new SVG element. So you see the standard "create" element. But you see we're using the "NS" form, which stands for namespace and the first thing you pass in is the namespace of what you want to create.
[25:30] So when you're working with SVG I just generally define a variable like this and pass in SVG NS and then you give the thing that you want to create. So you have one extra thing to add versus HTML. So that we're making the SVG element.
[25:44] And then we call setAttribute() to set a width and height. So, by the way, this is all dynamic. It's right there. Then we create our circle. You see the same thing. Create element NS. Give that namespace. Say make me a circle.
[25:56] And then we just set all the attributes that you may have seen earlier. Center X, Center Y, radius. And then you see, just like HTML, you can access the style property and so we say ".style.fill" equals blue, so it's blue.
[26:09] We can set the class name just like HTML and we can even add event listeners. Here we're adding mouseover to alert "hello world". So if we mouse over we get "hello world".
And finally, just to mention it, you never need to know about Xlink except when you're making links and a in few other little places so just to show you that as well, here we're making a hyperlink in SVG and we say that the link itself is part of SVG, but when you set the href, remember it was "xlinkns,'href'", we had to say "xlinkns".
[26:49] We use a little bit different to setAttributeNS and there we do that and then you can use all the setAttribute(). You see that appendChild() is normal and then actually, in this case, container is actually a DIV element. Actually I skipped over this.
One of the new things, it's actually not part of HTML5, it's part of the general thing that's coming along, so query selector where, like jQuery, you can give CSS selectors to grab things from the page.
[27:18] So here we're grabbing a DIV that we're going to put the SVG in. So, by the way, you can use that with SVG as well, which is very powerful.
[27:30] I want to just mention, it's really hard to find information about this so I wanted to mention it here, a lot of times you embed SVG using the object tag, like I mentioned earlier, and a lot of times you want to have the containing page tunnel into the object to do interesting things.
[27:48] Like maybe, for example, your SVG is a button element and you want to customize it in different part of your page to tunnel in. Other times your object you want to tunnel back out to your containing page.
I'm just mentioning this here because it's really hard to find information about it and here's how you do it. If you're in your HTML page and you want to go into your SVG object you do this: [28:02] you grab the object, and we're doing that, you grab what's called the contentDocument, and once you have that you can treat it like you normally do.
[28:21] Here we are using querySelectorAll(), one of these newer methods showing up in the newer browsers, to grab, we're grabbing all the rectangles with the class name "important", so that shows you how to grab some elements. You could just getElementById as well.
[28:36] Then here's how you grab the root. There's a quick terminology. The "doc.rootElement". If you're inside of an object and you want to jump to your containing page, maybe you have jQuery loaded into your outer page, for example, and you want to access some functions, there's something called top.
[28:52] So you can go top.document.getElementById, and that will grab it from your parent page, the parent that contains you, and here we are calling some JavaScript function in the upper page. top.someFunction.
[29:04] So just store this away if you ever need to do this. And then one final thing, if you're inside of an object you actually have a document that you can call.
[29:18] So here we are inside of our SVG file and we use getElementsByTagName(), we have to use the NS version, getElementsByTagNamsNS, for example, we're grabbing all the rectangles. Does that make some sense? A little.
[29:33] So I've shown you a little bit sort of raw SVG. There are a lot of great libraries that have been coming down the pipeline for working with SVG.
[29:42] One is SVG Web, the library that I'm involved with and we'll be going deeper into that today, but I also want to mention Raphaël. Who here is using Raphael?
[29:52] It's a great library. You don't have mark-up in your JavaScript, you build up. It's good for animations and things like that. jQuery SVG is very powerful. It essentially lets you use jQuery in SVG. Ample SDK is very cool. Sergey Ilinsky is here. Where are you? Are you in here? I saw you earlier.
Man 2: [30:15] He's outside.
Brad: [30:15] He's outside. Well, go and talk to him. Ample SDK has a lot of cool features and it's open source as well for working with SVG.
[30:25] So let's talk about SVG Web. The browser support for SVG is that it's on Firefox, Chrome, Safari, and Opera and Microsoft has announced that Internet Explorer 9 will support it, but a lot of people OK what do I do about IEs six, seven, and eight.
[30:46] So I created, along with other developers, a library called SVG Web that does various hacks to give the illusion that Internet Explorer natively supports SVG.
[31:02] It's a JavaScript library that you include in your page, I'm actually going to be stepping you through it. Inside of it, it actually uses Flash to do its rendering because Flash is almost always available when you have IEs six, seven, and eight. Something like 97 percent coverage.
[31:18] And then it uses various grody JavaScript hacks to give the illusion that the SVG is really a part of the browser then your JavaScript can script the SVG using methods very similar to what I showed you earlier.
[31:33] And there's the URL, if you want to grab it. Let's see if this video loads. I'm betting no. Probably not. [laughs] There's a little introductory video that will not load.
[31:59] What you would be seeing is a description that SVG Web is actually about 70K, so that's fairly large and that get pushed into Internet Explorer.
[32:10] So, I mean, the Adobe SVG plug-in, for example, used to be several megabytes, so it's quite compact as a solution and it supports a lot of things. So we've been talking about what's called SVG 1.1 full.
[32:28] That's, in some sense, what's becoming what everyone knows as SVG, so we support a huge amount of it. We support DOM scripting with JavaScript, so when you saw that code sample earlier we can do that on Internet Explorer using these grody tricks. I've got no illusions that they're anything but grody, but they get the job done.
[32:45] We have partial support for actually style sheets, CSS inside of your SVG. We have partial support for SMILE. I'm not going to go deep into the SMILE, but it's a way to do animation.
[32:58] We have support for SVG fonts. Again, not going deeper into those. Both SMILE and SVG fonts are, in some ways, being eclipsed by other solutions, but we have them in there. They could be useful.
[33:11] And then finally we support video and sound, which allows you to do some interesting things. So let's talk about how do you add SVG Web to your page?
Well, the first thing is you grab these three files: [33:20] SVG.JS, SVG.SWF which is the Flash file, and SVG.HTC, which is what's known as a Microsoft behavior. Who here has worked with Microsoft behaviors before?
[33:33] Whoa. All of you need a heavy drink. So you put those on your web server and you have to be sure to add these minetypes, right like I love the Shockwave roots of Flash and you have to add this guy, which is the Microsoft behavior mine type just to make sure things are served up correctly.
[34:00] Then, pretty simple. In your web page you just say SVG.JS and if you're storing SVG Web in a different place than relative to your page, so for example let's say we're putting it in a different directory; you have to use this data-path to tell SVG Web where it is so it can load the SWF file and Microsoft behavior.
[34:28] OK. So on the left you're actually seeing Flash rendering the mark up here and on the right you're seeing native by Safari, for the simple example.
[34:40] We support direct embedding in the HTMl similar to HTML5, but for various reasons we require you to do a little bit to help SVG Web. You actually embed it into your HTML page using a script tag and you set the type to 'type="image/svg+xml"'.
[34:59] Once you do that you can use SVG and this will go right into your web page, which is what you're seeing right here and all the things you've seen before and you actually you don't have to namespace it as well, very similar to HTML5.
[35:14] So that's cool. So you can drop SVG right into your page today and it will work across, at least 95 percent plus of the browsers out there. You don't have to wait for IE9.
[35:29] OK. Object embedding. You remember seeing that nice object syntax. SVG web supports all the way back IE6. We support IE6, 7, and 8 doing this solution. Because of that our object tag is a little groddier. Really because of IE6 and IE7 a little bit.
[35:51] Treat this as boiler plate. I would just cut and paste it, but basically what we're doing is a trick where for normal browsers you see the object tag as it's meant to be done and then you see a conditional IE comments so that IE actually gets this guy and we're overloading.
[36:10] We're saying source equals and we're overloading the class ID attribute to get the mind type. But if you want to have your SVG in another file and link to it and have it work with SVG Web, that's the object syntax. So it's a little different than the standard what's necessary just a little bit.
[36:29] So one of the interesting things with SVG Web, actually, you can force the Flash renderer on Firefox, Chrome, and Safari, which can help when you're developing because you have better dev tools.
[36:43] And you can actually have two ways. You can force, you can say Firefox use Flash to render this instead of your native abilities and there are two ways to do that.
[36:52] You can add a meta tag and you set svg.render.forceflash and you say true. Another way is during testing maybe you run into a bug in SVG Web or maybe you run into a bug in the native functionality, you can force it in the query parameter by just saying svg.render.forceflash equals false or true.
[37:12] That can be really useful when you're debugging. I would say SVG Web like 95 percent it lets you use the existing abstraction, but, again, like I said, there's a few little places you have to change.
[37:26] One of them is if you're using SVG Web and you want to wait for your page to completely finish loading and SVG Web and the Flash tricks, you can't use window.onload().
[37:40] Instead we have window.onsvgload and then you can put all your stuff in there and now you know that, hey, everything's loaded including the Flash stuff and the Microsoft behavior.
[37:51] Or you can use SVGLoad, which is actually part of the SVG standard if you don't want to do an inline thing, and there we're doing the same thing. So this is a simple example.
[38:08] I've kept the examples pretty simple just to make them easier to grasp or to understand. Here we have the object tag embedding some simple SVG and it's being rendered by Flash.
[38:21] In these scripts I have a button in HTML. I say change the colors, change the colors in the circle, change the text, pretty straightforward. Let's look at what that script looks like using SVG and SVG Web. Well, you see that it looks exactly the same.
Here's our change colors function for example. Remember, we changed the inside of the circle from one color to another. Look at that, we can use document.getElementById to grab your circle. You can set the stroke attribute to green. We're setting the fill property.
[38:56] Then remember I talked about navigating into and out of objects? There we're grabbing contentDocument to tunnel in, grabbing the circle, and setting the fill. So you're actually seeing the one on the top is inside of the SVG file and the one on the bottom is inside of an HTML page that might be scripting SVG. So it's exactly the SVG standard.
Remember too, I put the change text as the hello world and then goodbye world. Well here's what that looks like. We can still use getElementsByTagName; there we're grabbing all of the text elements. Then we're looping through them and you see the Dom that we all love. I'm surprised no one laughed.
[39:43] You love the Dom, right?
Man 2: [39:44] Yeah.
Brad: [laughs] [39:45] But you can use the DOM. There we are iterating through our text elements, grabbing the childnodes and changing the value to "goodbye world". Here we're doing it the other way of tunneling in. Then you see something similar. So SVG Web doesn't have its own API. The API is the SVG standard other than a couple of small things you have to do to help it.
[40:15] Creating nodes, exactly the same. This should look similar to an older example I showed before SVG Web. There we are making a circle, setting its attributes, grabbing the group, adding it, making some text, and adding that; so very easy to port your code to work on IE.
[40:42] There's one more final thing that you have to do to help SVG Web. Remember I said you can put SVG inside of its own XML file? When you do that there's something called the onload attribute. You need to add just a little bit of code to help SVG Web. There we say "loaded".
[41:02] You see the loaded method, treat that as a boilerplate, cut and paste it. What we're doing in there is we're actually telling the SVG Web, "Hey, this file is done loading." You see "onloadFunc = doload"? You just set that to real onload function.
[41:23] Basically, you have a little intermediate step to help SVG Web and then you call the "doload". Instead of "doload" that's your code; that's your real onload and now you know that everything is loaded.
[41:40] For example, there we are grabbing a circle. We know it's loaded and we're adding an event listener.
[41:52] So we have 10 minutes. I wanted to take questions through Twitter but I think it's not working. So if you ask a question just pretend, just say @brad... Oh! Let's see. Maybe there are no questions because...
[42:12] Ilinsky, who is in two places at once - I thought he was outside - he says, "You could discover data-path in library by resolving svg.js script location against the HTML document.
[42:25] Let me think about that. As far as I understand if I have a JavaScript node that I've pulled from the document, I don't know if there's a cross-browser way to know where it was loaded from. If there is that would be nice and I could get rid of data-path. So Ilinsky, if you know about that, definitely tell me.
[42:52] HuskyR asks, "Why don't you use VML to support Internet Explorer?" There's actually another cool library - there's two cool libraries. One is called XCanvas, from Erik Arvidsson and Emil Eklund, that simulates the canvas tag using VML.
[43:12] There have been experiments doing SVG with VML. I chose Flash for a bunch of reasons. One is the VML has been a decaying technology for several years. Every version of IE that comes out degrades performance and introduces bugs to VML. So it didn't seem like a great, safe place to build on.
[43:33] It also would have set an upper bound to what I could do. We depend on Flash 10, for example, in SVG Web and I can do very advanced things with fonts and so on, filters and everything.
[43:49] So I felt like the features we could support in Flash are much higher. Frankly, I've done a lot of libraries that use Flash to do questionable things like Dojo Storage and it's something that I've built up a lot of techniques to get a lot of performance out of.
[44:06] That's actually quite fast. SVG Web's gotten pretty fast.
[44:16] "So name spacing is actually a NS fail according to Brad Neuberg". Yeah, I think... Anyone know about the IANA of mime type registries? It's just a page where you add different new mimetypes and if you come up with a new mimetype you just say X- and then it gets accepted.
[44:33] They should have just made prefixes be the name spaces. It's a layer of indirection that's not needed and it's fail. But that's my opinion about it.
[44:45] "You never need to know about xlinks except when using xlinks". xlink is actually a fairly big standard. It's got all kinds of different things. SVG only took the href property and what are called simple links.
[44:59] So you don't need to know anything more other than to add that magic xlink colon. xlink colon is what is called extended links and group links and rolls, there's a lot of stuff.
[45:12] "Transform, is mirror possible? Any other transforms?" Is mirror possible? Let me think about that. That's a good question. I don't know. You might be able to fake it somehow. There's always a way. Does anyone know? What's that?
Man 3: [speaks off-mic] [45:30]
Brad: [45:32] That's interesting. I bet you could, yeah. I bet you could, yeah, scale negatively and that might do something interesting. It's a good question.
[45:42] "What are your thoughts about raphael.js? Is cross-browsing very intuitive. Do you use it? Why?" I really like Raphael. I think it's got a great API. It's got a straightforward API. It solves lots of great problems and it's actively maintained. I would use it for certain projects.
[46:03] The thing about Raphael.js is it's all dynamic SVG. There's no mark-up. So it's good for graphing and so on. But there are some things. I was talking to a journalist who is a computer programmer and they're doing experiments at The Times of London newspaper of having interactive info graphics, for example.
[46:24] These make sense to have as a mark-up because you want search engines to be able to find them; you want them to be archival friendly, the resolution independent. They've been around for something like 150, 250 years.
[46:38] So Raphael.js, everything is in JavaScript. So it's just like that old refrain, "There are no silver bullets." It's a great solution for the right thing.
[46:47] Is polyline absolute or relative point to point? I talk about the path statement. Remember I said there's that little language. You actually give a letter and then an X, Y coordinate. Some of the letters for paths are relative and some are absolute depending on how you want to control it.
[47:08] I personally haven't use polyline as much because generally paths will almost do - they'll do that. I don't know if polyline - it's actually not relative, it's absolute.
[47:23] I don't know if it can be overloaded to be relative, but if you want to get advanced use paths because they let you, say, pick up the pen, do other things, make it relative.
[47:37] OK. I think we're out of... Oh, look at that, eight more results. One thing that's very exciting - what do we have? Do we have five more minutes? Yeah?
Man 2: [47:50] Yeah.
Brad: [47:50] Before I'm kicked off to speak on. You know the gong should. I know people are probably getting hungry too.
[47:57] One of the cool things about SVG - Adobe just released something called the HTML5 pack, which hooks into Illustrator, the latest version, you can export SVG.
[48:08] Not only can it export SVG, but you can create things like buttons and then set variables inside those buttons that when you bring them into your page, you can pass in as query parameters to customize.
[48:24] So you could imagine having Sprite for a game as SVG. You could imagine having logos and you can programmatically control how they show up in different places. That's really cool.
[48:38] The other thing is when you're using the canvas tag... Everyone heard of the draw image method? Yeah, you can draw graphics. Some browsers and more and more browsers are allowing you to draw SVG onto the canvas.
[48:53] Now that's really cool because, again, if you're making a game you draw all your sprites in Illustrator and then you use canvas because maybe you have special performance reasons where you don't need to do funky stuff with CSS on them. So that's nice.
[49:06] All right, a few more questions. Why would you require users of older IEs to have the latest flash player for SVG Web? It seems conflicting, old versus new. A couple of reasons; one is that Flash has always been very impressive at turning over their installed base.
[49:22] They move their users to the new version in about a period of eight months to a year and a half. So I am always checking the installed base of Flash 10 is like 97 percent.
[49:34] We used to support Flash 9, which was the basic cut off for some of the methods. The Flash 10 is faster and has other things. So most users will have Flash 10 in the scenarios were SVG Web is in.
The question is: [49:50] How many layers/objects can you stack with SVG? As many as you want; you're not going to get a stack overflow, but just like any of these technologies you'll probably hit some limit if you do 10,000 or something crazy.
[50:04] "You promised us bad jokes. Go ahead." Wow. I've never been on the spot to provide a bad joke. Does someone have a bad joke they can provide? OK. Let's take one more question by my phone and then that's it.
Man 4: [off mic] [50:25]
Brad: [50:26] What's that?
Man 5: [50:27] You skipped one question.
Brad: [50:31] Oh. Then this will be our final question. Oh, that's a comment. Oh, the question mark theme, there's a bad joke.
[50:41] "I do use the Raphael SVG library, but Fomatronic prefers Donatello and then a question mark." That was bad, wasn't it? OK. Thanks everyone.
[applause]
