 Does anybody here not know what SVG is? Oh, good. That's easier. Okay. I'm going to talk to you about some upcoming SVG features for artists. The SVG2 is a new version of SVG we're working on. The SVG working group is working on. And I've picked out some things that might be of interest in general to artists. Okay, so SVG, of course, is the vector graphics for the web. It's part of HTML5, but it's been around for a lot longer. One thing that kept it from becoming well-known until recently is that it wasn't supported by IE, but that's changed. IE9 has basic support. IE10 has filter effects added. And, of course, it's Inkscape's native file format. So that's one reason why I'm interested in it. I work on Inkscape. It's got other uses. It's used in TV set-top boxes. It's used in mobile phones, not just smartphones, laser cutters, et cetera. And so SVG2 is the next version. The development of SVG2, the work on it, is public. And you can see the latest draft at the address, web address there. Now, SVG2 is a little bit different from SVG1.1. SVG1.1 was pretty much a self-contained specification. Yes, it referred to CSS here and there, but generally it was self-contained. That's changing. A large part of what was in SVG is being removed or has been removed already and is going into CSS modules. And this has two advantages, advantages. One, it makes SVG2 smaller and easier to finish. And second of all, it allows a lot of things from SVG to be used in HTML. For example, filters. You can now use filters on HTML, SVG filters in HTML. Compositing, blending, et cetera. So these things have been removed from SVG2, but they're still referenced in SVG2. They're still part of SVG. And then there's the SVG2 specification, which handles everything that hasn't been removed, which includes fills and strokes, markers, some new things, mesh gradients, and hatches. So I'm going to go through, pretty much follow this list here. One or two things I'm going to skip, but anyway, this is kind of the outline of my talk. So let's begin with color. CSS Color Level 3 is already a finished specification. And you can already use those features in web browsers, supported by Firefox and Chrome. So here are eight red squares defined eight different ways. And you can see this is actually, this is an SVG I'm showing you in Firefox. So you can see that Firefox renders all eight forms. SVG2 does have some additional features that are not yet supported by the browsers, and these remain in SVG. There are a few new other features that are in SVG for color. There's the solid color element, which allows you to develop a palette. This is imported from SVG1.2 Tiny. SVG1.2 Tiny was a version of SVG that was directed at mobile phones, small devices. Right now, for example, Inkscape can simulate this. Inkscape simulates this by using a one-stop gradient, but this requires some kind of complicated coding in an Inkscape. And it doesn't really work for gradient stops, flood fills, et cetera, for defining colors there. One great new feature of SVG2 is the context fill paint, context stroke paint, context color. These are new properties. And this allows us to finally automatically match a marker color to the line stroke. So a marker here is something that you put on a line, a path at various points. In this case, there's an in marker, which forms the arrowhead. And you can see in SVG1.1, you don't get the automatic color matching. So it means in your SVG file, you have to have a marker with each color you want to use. Now, the marker can inherit the color of the stroke, the path. And it's not just for markers. They will also work in patterns and gradients in other places. Blending, SVG1.1, objects are painted on top of each other without blending. You could have opacity, but you couldn't blend the colors together. You could do some blending by using filters, which was a bit complicated way of doing that. The escape actually allows you to do that, to blend layers using filters that multiply screen, dark, and lighten. CSS3, you have the blending, full blending, all the different modes. You can see there, here's an example of a screen. And you can see how the red and the green and the blue blend together to form different colors. Wrong way. And here's an example, the overlay mode allows you nicely to blend color over a texture, you know, just text over a texture. The lead graphics meeting one is done with a difference mode. This is, I'm only animating the background here, the background color. This is in Firefox, Firefox is a little bit jerky. Chrome does this very smoothly. Okay, now I have to get, where's my mouse? I'm having trouble finding the mouse there. Okay, filters. The filters, SVG filters have been removed. The filters have been removed from SVG and put into, again, a CSS specification. The filters in that specification are the same ones that are in SVG. They've added a few short hands, which would make it easier for artists. But filters can do really amazing things. But building up a filter chain out of the filter primitive takes a lot of work sometimes. And so they're now shortcuts that do the most common things you want to do, like grayscale, sepia, saturate, etc. There was a plan to have a new custom filter primitive defined by a shading language, but that's been postponed, probably will be in the next level, too, of CSS filters. Transforms. Transforms have been removed out of SVG and into CSS transforms. And that adds 3D transforms. This is already supported in Firefox. This is an actual 3D transform showing you there on the right. It kind of works in Chrome. Chrome doesn't get the perspective right. It rotates it, but it doesn't get the perspective. I also have here a do-take-a-heed run. This is only done, this is being done only in SVG with CSS. CSS transforms and CSS animations. No JavaScript here. Text is the big thing. SVG 1.2, which never came out, had a way of having automatic text layout inside an object, be it a square, a rectangle, or some arbitrary shape. Inkscape actually implemented that, but it wasn't implemented by anybody else. SVG 2 will have text layout that's based on CSS, which will finally allow us to do text inside a rectangle, automatically laying out flowing text into a rectangle or a shape. SVG 2 text layout is based on CSS. It's a work in progress because the CSS modules are a work in progress. Basically, SVG 1.1 text layout is the same as a single line of CSS text. In SVG 2, CSS-based layout will be backwards compatible with SVG 1.1. This dependence on CSS was always there, but now it's being made more explicit. This has the advantage that it makes it clear to people who are making HTML-CSS renders, i.e., the web browsers, that they don't have to re-implement text layout for SVG. That's something they don't want to do. Text layout is very complicated, especially when you start talking about complex scripts, as you saw earlier today. By doing this, it opens up the possibility for auto-wrapped text. It will be possible to have an SVG 1.1 fallback. If you don't have an SVG 2 renderer, there will be a way of having the text. It won't be quite as nice, but it will be close. It's a little complicated to explain, but basically you can do that. What's the differences between SVG and CSS HTML? The biggest difference is SVG does not have a natural content area, which is provided by CSS by the box model. In HTML, you have a box already, which you can layout text into. SVG you don't. SVG also doesn't have the line-breaking elements. There are three types of text layout in SVG 2. There's the pre-formatted text, which is essentially SVG 1.1 text, plus multi-line, and I'll show you how you can get multi-line text by doing that. There's auto-wrapped text, which is new, and then there's text on the path, which is unchanged from SVG 1.1. Here's an example of pre-formatted multi-line text. New to SVG 2 is the white space property. You can see it from the red, it says pre-line. It says basically preserve all line breaks. So you can see that this multi-line text line break is anchored to the middle. Because you're preserving the line breaks, that's what you get. And then with text anchor middle, it gets centered in the middle. The white space property is supported already by Firefox. Auto-wrapped text, you'll get auto-wrapped text if you explicitly define a content area. And there are two ways to define a content area. One is to specify a width for horizontal text, or a height attribute for vertical text, like Japanese. Or you can use the shape and side property to either define a CSS basic, reference a CSS basic shape, or reference an SVG shape. So here's an example of a content area defined by the width attribute. So I add to the text element a width of 200 pixels. Basically, I get an infinitely high strip or rectangle box that the text is wrapped into. I can define a CSS basic shape. And I originally wrote this slide a while back. And at that time, you can say shape and side equal rectangle. And the text would wrap into that rectangle. Well, that's been removed from CSS shapes level one. I don't know if it's going to reappear in CSS shapes level two or not. Another way to get a content area is to reference a SVG shape. So here I have an SVG rectangle defined. And then the text will wrap into that rectangle. Now, I should mention that the shape and side property was in level one of shapes, but it's been removed. It's been postponed to level two. And I've been promised that it's going to be there, so let's hope. There's also in CSS exclusions module shape padding, which allows you to inset the text from the edge. There's also exclusions, CSS exclusions, which you can exclude an area from the text wrapping. So here I have two rectangles there to find. Again, the one on the left, the upper one to the left, I've also added an exclusion region, which is based on the other rectangle. Now, the one thing that this doesn't give us that SVG 1.2 text wrapping would have given us, text in the shape would have given us, is I don't know how yet to be able to flow text into more than one shape. So that's something we need to think about. Okay, something that's already appearing is paint order. SVG 2 has flexible paint order. In SVG 1.1, stroke is always on the top. And you can see when that happens, especially for text, the font designers have worked very hard to get beautiful curves, and it ruins it. It completely ruins the look of the glyph. SVG 2, you can say, I want the stroke to be underneath the fill. And then you can see the nice shape. Firefox, Chrome, and Inkscape already support this in development builds. There's a new line join. For decades, there have been basically three ways of joining lines. They've just been copied from one graphics format to another. The bevel, the round, the meter. And now there's X extrapolate, which produces much nicer curves, nice joins when you have curved lines. There's some things that we very nice to have that probably are not going to make it into SVG 2. There's the variable stroke width. It's under exploration stage right now. There are some people in the working group who are very interested in this, but I'm not sure it's going to make it into SVG 2. And there's also the flexible stroke position. Right now, the stroke is centered on your path. It's nice to be able to displace it out or in. That can be a little bit complicated when you start having paths that intersect themselves. Markers, I already mentioned markers are graphic items that are placed along a line. One of the big problems that I've seen when I try to use Inkscape to make drawings with nice arrows is I want the ends of my lines to be at certain places. And then you put an arrow on there and that makes it a little bit longer, the line a little bit longer, or you get a little bit of the line sticking out. SVG 2 will have marker cutouts, which will basically say, I don't want this part of the line to be drawn that the marker is placed on. My preference is to have a clip path. What's currently in the spec is some standard shape. So there's some work to be done to come up with which one we're actually going to use. There's new marker placement. Right now markers can only be placed where you have a node in the path. Now you'll be able to place some marker in the middle of a segment or at some fixed distance along a path. And you'll be able to have some patterns, as you can see in the example there. There's a great new property value for marker orientation. Auto start reversed. Before, if you wanted to have a double-headed line like this, you actually had to define two markers, because the markers are always placed in the direction of the path. The path is defined in one particular direction. And so you'd have to have a marker arrow head going with the direction of the path and a one going in the opposite direction. With this auto start reversed, it'll automatically reverse the marker direction. So you only need one marker. Another new feature is markers are going to be allowed on shapes. Hatched fields. Hatched fields have been added to SVG2. They're a common way to shade shapes and technical drawings and maps. You can simulate them in SVG1 by 1.1 by using patterns, but that sometimes gives you anomalies when you have pattern boundaries. And also, people that use SVG for plotting and engravers, that means every time you come to pattern boundary, the pen goes up, comes down, and you get an artifact. So here are some examples of things you can do with hatches. You can have dashed lines. You can have complicated patterns of hatches. And you can get a crosshatch by having two fills on top of each other. SVG2 will allow you to have multiple fills on the same object. So you can have a background color, and you can put a hatch on top, and then another hatch going at 90 degrees if you want. You can have wiggles, disconnected lines. Mesh gradients. SVG2 has mesh gradients. The motivation is, of course, the desire to have smooth collaborations along curved paths to create lifelike vector art. You can simulate this, and if you look at the Inkscape website, you can find some nice sports cars that look very realistic, but it's a lot of work. You can do this with linear and radial gradients and Gaussian blurs. It's very complicated. So we have Coon's patch mesh gradients. It gives you lifelike shadings. They're fairly easy for content creators to use. If you don't have enough detail, you just can click on the line and get another row of meshes put in. It's a straightforward implement. It's a mature technology. It's in post-trip. It's in PDF. Popular support set, Cairo support set. So it's well supported. It's a known technology. So here is something I did about a year ago in a development version. I have an Inkscape, a buggy version. One of these peppers is a photo. The other is a drawing. It took me about an hour to do it, because I kept having problems. If the interface was working perfectly, this could probably be done in, I don't know, 10 minutes or 15 minutes, maybe. There's some other stuff. There are numerous ideas for things that probably won't make any SVG too, or will be handled by other modules. One of the nice things that you heard a talk this morning about was SVG and OpenType. It's already supported in Firefox. So this allows you to have multiple color fonts. It allows you to have glyphs that are animated. And I think I got just enough time to show you an example of that. If I can get this up here. So here's an example that someone made of animating an eye. It's a very simple animation. It gives you an idea of what you could possibly do with SVG and OpenType fonts. Okay, let's get rid of that. How do I get rid of it? I want to get rid of it. Okay, there we go. Okay. Regular shapes and stars. There are people talking about it when there actually happens. I'm not sure. Two more slides. There are three more. Path segments where you share paths or be able to have different colors along the paths. Work texts would be really nice. This is all the story. Those are supposed to be circles, but it's been distorted by the screen. Okay, the SVG working group is making quick progress on SVG too, but there's a lot more to do and the group is quite small. It's not a high priority by the vendors. And your input is important. We do as a working group listen to input from other people. And if you really want something that's missing, speak out. Okay, thank you. Questions? There's one way in the back. Questions? Lots of questions. So only top three. Could you please comment on SVG Fonts 2.0? SVG Tiny 2.0? SVG Fonts are gone. Sorry? SVG Fonts are gone. Okay, SVG Tiny 2.0? I have no idea. It's not being worked on. I'm not sure there's really a need for it. SVG 1.2 Tiny was directed for mobile phones that are now much more powerful. This is before the smartphone era. That's back to the seven or eight years old. I've not heard any talk about SVG 2.0. And support for multiple pages like Page Set? It comes up in less than a while, so I'm not talking about it right now. Okay, thanks. There's another question though. Oh, do you want to talk? Yes. This follows first. Can you talk quickly about the anchor points? Will they be in SVG 2.0? What? Anchor points. Anchor points? You know, with lines that are attached to objects. Oh, you mean connectors. If it does appear, it'll appear in a separate specification. There is talk. It's something that we should be working on. Hey, as far as I understand, you're targeting full SVG 2.0 support with Inkscape. Do you know of any LGPL project that are aiming for SVG 2.0 support? No, I don't know of any. Do you know of any programming libraries that are currently working to implement SVG 2.0? Programming libraries? Yes. Do you know of any? I know. I don't know. So at the rate, we can take 20 more questions. No more questions, so I think we go. Thank you very much.