Reinventing Fire » SVG 2

Pointers on Background of SVG Borders on Mutiny

Schepers — Sat, 21 Aug 2010 21:37:09 +0000

With SVG being integrated more and more into HTML5, both included via and elements, and inline in the same document, some natural questions about SVG and CSS are receiving more focus. This includes box model questions like background and border, and pointer events.

I’m interested in comments from the community on what direction SVG should take.

It’s pretty clear that the intent of the SVG 1.1 spec was that the box-model CSS properties must not apply to any SVG elements. In addition to what the spec states on the subject, my conversations with people who participated in the SVG WG at the time leave me with no doubt on the matter.

The question is, is that the behavior we want? How hard or easy is it to change that in modern SVG+HTML+CSS implementations? What is most useful and intuitive for content authors?

In my opinion, we could specify that some aspects of the box model apply without screwing with SVG’s coordinate-based positioning system. Here are my initial thoughts on some specific properties:

Borders

A borders is different than a stroke. An SVG element, including any graphical (, , , etc.) or container element (, ) can have both a stroke (which conforms to the geometry) and a border (which conforms to the element’s bounding box). A common use case is setting the graphics apart from other content, or doing mouseover highlights of an SVG element; for example, when I mouse over or focus a circle, it would be much nicer, and just as semantic, to simply have a CSS property draw a rectangle around that element as a highlight than for me to generate a rectangle based on the bbox and insert that into the DOM, keep a pointer to it, then remove it when I mouse out.

Paint servers and similar resources (gradients, filters, etc.) should not have any border. Note: is a non-rendering element, akin to , so no border would be visible for that either, but if the content of a is d, any border properties would apply in the same manner as for other properties.

The border should not have any effect on the layout or rendering; it would be strictly visual.

Margin

No effect on SVG content, but may affect HTML content around that SVG content. So, an element with 'margin: 20px;' has a 20-pixel gap around the SVG content, just as if it were

Alternately, maybe margin only has an effect for elements; that might be simpler to specify, implement, and understand for content authors.

Padding

Again, this has no effect on SVG content, but it does affect how the border is drawn. This would be a nice way to compensate for thick stroke widths.

Background

A background is different than a fill. Background is much the same as border; it is a rectangle (modulo the border-radius effects) around the shape, based on its geometric bounding box, taking into account padding.

By default, there should be no background color, including for the element. Right now, there is a WebKit bug in Chrome and Safari which renders a white, non-transparent background for SVG fragments or documents; this is a major pain for any content creators trying to use SVG, much like the old Internet Explorer bug on transparency in PNGs. I hope it receives some attention from the WebKit developers soon.

SVG Tiny 1.2 defines a 'viewport-fill' and 'viewport-fill-opacity'. I think those should be deprecated in favor of 'background' properties; I have no opinion on which should have precedence… maybe they should be seen as aliases of 'background', if that makes it simpler.

A background on SVG content raises the question of pointer events, which is also relevant to borders.

Pointer Events

Should pointer events on the border or background fire on the element itself? I think that the default should be “no”, just to be safe and consistent with older SVG content, but I could easily be persuaded to reverse that. Either way, there should be a new property or set of properties that can modify this, in a manner consistent with how CSS is defining 'pointer-events'.

This touches on the question, asked in a related thread, on whether the element, by default, should be a proximal event target for pointer events. My answer on that is a pretty firm “no”; if you want to have it as an event target, give it a background, or change the 'pointer-events' value.

Questions

A few high level questions:

Is this a change from SVG 1.1 and SVG Tiny 1.2? Yes.
Is this backwards compatible? Kind of. It introduces new behavior that is not consistent with past behavior, but doesn’t explicitly change very much.
Does this break existing content? Very doubtful.
Is this intuitive for content authors? My intuition says yes.
Does this match existing implementations? Some, at least.
Does this provide value for content authors? Yes.
Does this make it harder to implement? I don’t know; I suspect it makes it easier for at least some implementations.
Would defining this improve interoperability? Yes.

Conclusion

I propose we change SVG 2 to explicitly define this behavior. As the editor of the HTML5 spec, Hixie seems to imply that this is not for HTML5 to define, and I tend to agree with that, though maybe some informative mention in the HTML5 or CSS specs for how SVG treats margins and padding might be appropriate. We recently formally closed the Compound Document Formats Working Group, which was formed to look at exactly these sorts of questions, and published its specifications as Working Group Notes for posterity; we wanted to be clear about its status. The CDF WG succumbed to the politics around the reformation of the HTML WG, and probably to good effect overall; but in its absence, we still need to resolve these questions by cooperation between the various groups involved.

I don’t think this should be any different in standalone SVG files than in SVG files referenced or inlined in HTML. That would be very unintuitive, in my opinion.

If this is not controversial, I would be happy to put any or all of this in the SVG Integration spec, which is one of the foundations of SVG 2. If someone disagrees with this, we’ll have to talk about it before I start editing the spec. In either case, it would need to be fleshed out some… I’m probably glossing over some possible stumbling blocks in the box model, which I’d appreciate feedback on.

Please leave a comment if you like my suggestions, if you see a flaw, or have a better suggestion.

Update:

Just to show what I’m talking about, I created a sample. Here is a good example of a bad example; below are 3 instance of the same SVG with the same CSS background and border values, with a border width of 2px. The first 2 are external files referenced as objects, the third is inline in the HTML (you won’t see this one unless you are using preview releases of Firefox 4, WebKit, or IE9); the second image also has a padding and margin of 10px.

I tested this in several browsers, and in the referenced cases, the border width increases the image size, spawning scrollbars; I don’t think that’s a good outcome… it should clip the border, just as it does for any graphical overflow… borders should not contribute to the geometry of SVG images.

In the second case, where I added padding, the argument is less clear, but I still believe that for referenced content, the border and background should not displace the rendered graphics, and should be clipped. For inline content, it would make sense for the padding and margin to be visible in the rendered document, but it should still not change the geometry of the SVG.

Please use a modern browser.

We’d need to specify this in order for it to behave the same across browsers (and authoring tools). So, do people agree or disagree with my conlcusions?

Getting to the Point

Schepers — Tue, 13 Jul 2010 15:18:15 +0000

SVG paths have a pretty good set of shape commands, enough to let you draw any 2D shape you might want in an authoring tool: horizontal, vertical, and diagonal straight lines, elliptical arc segments, and cubic and quadratic Bézier curves. Béziers are great, giving you precise control over the position and curve interpolation of each point in a concise format, using control points (“handles”), and are easily chained together to create complex shapes.

But let’s say you have a series of points, and you want to draw a smooth line between them, e.g. for stock data, an audio wave, or a mathematical graphing equation. Béziers are not as handy there, because not all the points needed to define a Bézier spline are on the curve itself. Obviously, you can decompose any set of points into a set of Béziers, but that takes math, and who wants to do that? (Put your hand down, nerd. I’m talking to the normals.)

Sometimes, you just want to lay down a set of points, and let the browser draw a smooth curve (unlike polylines, where each segment is just a straight line between the points). Like this:

Please use a modern browser.

Mouse over the line above to see the equivalent cubic Bézier points. They are off the line. Off the line! Oh, Math, why do you do this to me?

One thing that’s always bothered me about SVG… there should be more simple ways of doing things, and this is one of things. Over the years, I’ve idly asked math-minded folks about how to achieve this, and the answers always soared right over my pointy little head. I probably didn’t ask the question the right way.

But a few months ago, I was chatting with Ben Fry, one of the creators of Processing (the graphics programming language), and he mentioned Catmull-Rom curves as a possible solution. I took note of that, and later read up on them; they seemed a pretty good fit for my use case. In my spare time I looked for any libraries out there to convert Catmull-Rom curves to Bézier splines; I found references that talked about the the conversion using inverted matrixes, but no simple code to be had. I’m lazy, and busy, and the problem wasn’t urgent, so I kept putting it off.

But in talking to folks about SVG throughout the UK, including designers, the thought kept running through my mind that SVG really does need a better authoring experience (and I don’t just mean authoring tools, though some nice animation tools would help). So, when I got back home from vacation, before I really got back into the thick of the dozen other things I should be doing, I put on some music and spent a few hours after work scouring the intartubes for some suitable code. And as luck would have it, Maxim Shemanarev’s Anti-Grain Geometry library contained a single simplified conversion matrix and a line of code that did the grunt work in C++, easily ported to Javascript; whip up a custom parser for the syntax, feed it into the convertor function, and you’ve got yourself a working proof-of-concept.

Here is a scientific chart showing how awesome the SVG element is, with values derived from the overall awesomeness by different path commands, rendered using an experimental Catmull-Rom path command:

Please use a modern browser.

As you can see, adding Catmull-Rom curves would increase the awesomeness of SVG paths by almost 50%. That is a lot more awesome!

The syntax is pretty intuitive… it’s just the command ‘R’ followed by a set of coordinate points:

And the path syntax isn’t just used for the ‘d’ attribute of elements. It’s also used for laying out text-paths, and the shapes of SVG Font glyphs. And it’s used in animation, both for motion paths and (in the case of Béziers) for timing functions in the ‘keysplines’ easing attribute that controls the rate of animation. So, making it easier to hit specific points for paths could have side benefits for all those uses as well.

I’m really interested in feedback from others on the usefulness of this idea. I’m not married to the idea of Catmull-Rom curves specifically (Fun fact: Ed Catmull is now the president of the Walt Disney and Pixar animation studios; I believe Rom became an astronaut, was captured by aliens and turned into a cyborg, and is now a Spaceknight), just in the idea of adding this type of point-on-the-path command. So, if you support the notion of adding this in SVG 2, or have a better idea along the same lines, send an email to the SVG Working Group’s public list, www-svg@w3.org, to let us know.

The javascript library I wrote to demonstrate this is, of course, open source, available under the MIT or GPL licenses. Feel free to play around with it, and improve it to make a better proposal. You’re welcome to use it for other purposes, but I intended it just as a quick-and-dirty prototype to solicit feedback about extending SVG, so the code isn’t that great.

Update 1:

Erik Dahlström, Chief Vectorizer at Opera and chair of the SVG WG, posted a visual reply, which WordPress filtered, but I’ve now restored this inline. Nothing to see here, move along.

Update 2:

Here is my Catmull-Rom code trying to achieve the nice curves of Spiro, as suggested by Dave Crossland in his comment:
Please use a modern browser.

Update 3:

Looking at Spiro curves a bit closer (just the image, not the code), it seems that there are actually different node types illustrated, not simply an undifferentiated set of coordinate points as in my interpretation of the Catmull-Rom algorithm. This means that, from an syntax standpoint, those segments would need additional parameters in addition to the coordinate points on the curve, which somewhat undercuts the simplicity.

Given that SVG already has a ‘Lineto’ command, I set out to see how closely I could match the letter “a” in Raph Levien’s example, using just my Catmull-Rom and Lineto segments, and with minimal effort:

Please use a modern browser.

Mouse over the raster image to hide the SVG path. There are definite artifacts, and I am running into some known limitations of my script implementation in how it interpolates the last coordinate segment, but with not much effort, I was able to get pretty close.

This is not to belittle Spiro at all… Spiro generates painfully elegant curves. It’s just to compare apples to apples.