October 18th, 2007

I finished the static chapter on SVG for the book and it has become the largest. I imagine the programming chapters could get larger. One doesn't realize how rich SVG is, until one really looks at the individual components and realizes what you can do with the technology.

It's nice to see that the HTML5 working group is now considering the need to include SVG in the specification. According to Anne van Kesteren:

The other interesting thread is about an HTML compatible syntax for SVG. In other words, integrating SVG in text/html. Now that an HTML parser, that is compatible with deployed content and Web browsers, is defined, it is possible to create small extensions on top of it that enable new tricks. As SVG is essentially a DOM-based language the only thing the parser will have to ensure is that the elements end up in the right namespace in the DOM.

The comment thread is interesting, but when I see discussion about changing the SVG specification just so it's more compatible with HTML5, I run cold. Really cold. The thread also highlights my own concerns with HTML5 and trying to integrate semantics using syntax rather than a model, as people worry about whether opening the door to SVG won't open the door to RDF and other such nonsense. After all, who wants to muck up the burger (using Anne's colorful description of the next generation of tag soup) with open, mature specifications? That would be like Hardee's trying to create a healthy, low calorie sandwich.

Sam Ruby, who is much more tolerant of burgers than I am–but then, he also patiently works with RSS 2.0, the XML equivalent of a Twinkie–also linked other discussions on SVG, which, I agree with Sam, are nice to see.

The first post he links discusses Microsoft and Adobe's impact on SVG with assurances that neither company is out to kill SVG. Yes, but neither company is out to support SVG, either. Supporting it as an export format is not enough. IE doesn't support SVG, and Adobe is pulling it's *popular SVG plug-in in January. End of story.

(Interestingly enough I just dropped the planned Flash/Flex and Silverlight chapters from my book, in order to make more room for the non-proprietary specifications such as SVG.)

The comments in Sam's post reflect what's happening in Anne's post, including the re-occurring question of just using the object or img element to include SVG, rather than allow inline SVG. The use of object as compared to inline isn't just an issue with SVG, as Jacques Distler points out in comments, specifically directing attention to MathML. Jacques also discusses allowing inline SVG and MathML in comments; allowing the object element in comments is not something most of us would want to contemplate. I'm sure that if I did allow object or scripting elements in my comments that you would have no hesitation on opening the pages in your browser.

In addition, the whole point of SVG, or one would just use a converter to convert SVG into PNG format, is that SVG, being a vector language, can become part of the page DOM, which means we can then 'do' things with the SVG when loaded. We may not want to, but wouldn't we rather have this option than not?

Sam's proposal is to use the script element to bring in SVG. The benefit to this is that we can then include SVG in the page, and ensure it's loaded into the DOM if we wish. Without having to redefine the semantics behind 'img', I want to add. The idea has limitations, which Sam points out. Using the script element is, however, preferable than just blowing SVG off for the HTML folks. Or bunging it into object, like we bung everything else into 'class' or 'rel'.

One of the commenters, Chris Jay, wrote the following in comments to Anne's post:

But on principle, I don't support inline svg elements, because they're not semantic, they're presentational. Colors, gradients, filters, crops, shapes, and even geometry (e.g. rotation), should be put in CSS instead, so they can be applied to ANY element.

Many of these are being added to CSS, but CSS isn't meant to control the creation of objects. There is no place in CSS for creating a rectangle, polygon, or polyline, much less a path or a text object. As for using CSS to control the presentation of these objects, we have much of this already. We can include SVG presentational information in a style attribute, if we want. True, something like a gradient is an object in SVG rather than an attribute is that it is a complex object with attributes and modifications of its own, which can then be used to 'fill' other objects. But then, so can paths–paths can be used to build patterns.

The point is, ten years ago the big thing in web page markup was presentation and we had FONT and BLINK, and now the big thing in markup is 'semantics' and we have things like…the Canvas object. The datagrid, which is enabled for Ajax use. Drag and drop. Editable content. Stop me when we get to something semantical.

In the meantime, I'll plug along with XHTML 1.1, where though I'm sometimes fed mustard yellow pages, at least I'm not at the mercy of the 'semantic' burgers.

Speaking of which, after my own recent experiences in inline SVG, I've decided three things:

1. For my uses of reusable SVG symbols, I plan on adding my own template tags and plug-ins that find these and replace them with SVG in the post, but not in the database or the syndication feeds. Until Mozilla/Firefox and Safari 3 get their act together enough to support external SVG fragments, repeating blocks of SVG text in the database is not something I contemplate with equanimity. I should be able to create reusable blocks of SVG and use them thus:

<use xlink:href="symlibrary.svg#musicnote1" width="15" height="10" />

Opera supports this. Safari 3 doesn't, and neither does Firefox 3. IE? *giggle* That's funny.

2. I'm stripping SVG from syndication feeds. In many ways, this goes back to the question of what exactly a syndication feed is for, and how much we should provide in a feed versus providing at the source.

If I still had feed excerpts, the issue wouldn't arise because all markup is stripped with excerpts. Yeah, feeds, partial or full, is a topic I bring up a lot, because it's an issue that irritates me and, frankly, continues to irritate me. This irritation isn't aided by the fact that Wordpress makes it really difficult to support both partial and full feeds.

In the meantime, since serving a post with SVG as HTML in syndication feeds causes Atom hiccups, and the Atom feed is hard coded to display content as HTML, only, I'll continue with my manually edited feed template until I have time to write some plug-ins. Or until Sam can get through the modifications he makes into the general Wordpress code. Whichever comes first.

3. I'm contemplating adding SVG support in comments. Just contemplating, though.

Update

I'm now seeing that the Adobe SVG Viewer plug-in may be available until 2009. I don't know if this is a typo or not, because the front page for the install still shows January, 2008.

Comments
1

I'm a little puzzled by your comments about Atom feeds. One of the things I like about Atom is that it allows one to include inline MathML and SVG, and have them appear seamlessly on the other end. If I have an equation, or a diagram in my text, surely I want it to appear in my full-text feed.

Since you are starting with perfectly nice, well-formed XHTML, what is the barrier to "doing the right thing"?

Oh, yeah, and SVG in comments would be cool.

2

Interestingly enough I just dropped the planned Flash/Flex and Silverlight chapters from my book, in order to make more room for the non-proprietary specifications such as SVG.

Hmm. What other non-proprietary specs for web graphics are we talking about?

3
Phil Wilson - 4:39 pm 10/18/2007

It's until 2009. The original date was 2008 but it was extended. I have a reference at work I can dig out tomorrow.

4
Bud Gibson - 7:41 pm 10/18/2007

I'm really a novice on these topics and perhaps a bit of an apostate (I wrote a microformat), but it seems to me like getting svg to inline with html would be a good thing. As Anne observes, it make scripting easier, and you're working with something already accepted.

I'm not sure you're ever going to get semantics into widely used markup in the way that it exists in something like rdf. For that, you'd be asking people to become logicians, and they're not. People are pretty good at labeling though, and that indeed is what most markup amounts to.

5
Shelley - 8:25 pm 10/18/2007

I'm glad that the plug-in is being supported until 2009. Maybe IE will get its act together and make a start with SVG by then.

Jacques, SVG support is still a bit fragile with browsers right now, and embedding SVG into feeds seems to me to be potentially problematic. I had SVG in the post following, which I pulled because it seemed to cause some problems in Sam's aggregator site.

Of course, I had some fairly complex SVG in the post.

Michael, the usual: JPEG/PNG, photos, raster and vector graphics, SVG, Canvas, CSS, DHTML, Geo/Maps, programming, ImageMagick, graphics libraries, data URIs, etc.

Bud, I think so, but I can see the problems with inlining XML into a non-XML format. Of course, the issue won't arise with XHTML5.

6

Jacques, SVG support is still a bit fragile with browsers right now, and embedding SVG into feeds seems to me to be potentially problematic. I had SVG in the post following, which I pulled because it seemed to cause some problems in Sam's aggregator site.
Of course, I had some fairly complex SVG in the post.

Hmmm. I've done a fair bit of SVG on my blog, and it never caused problems on Planet Musings, which runs the same software as Sam's.

But, then, my SVG is doubtless much less sophisticated than yours.

My choice (and, probably Sam's) would be to try to fix whatever caused the problem on his site, rather than eschewing the use of SVG.

I'll leave the relevant paragraph from a comment I just posted over at Sam's blog, should you ever decide to implement SVG in comments, here.

Say I wish to discuss irreducible representations of SU(3). I think it should be perfectly acceptable to point out that:
Rank-2 Symmetric Tensor Representation


Fundamental Representation

=
Adjoint Representation


Rank-3 Symmetric Tensor Representation

.

(Looks great in the preview, modulo the curious linebreaks.)

7
Shelley - 11:42 pm 10/18/2007

I don't know about the relative sophistication, but I noticed that the post only ended up showing as the dc:description in Sam's aggregator, so something had to have failed somewhere along the way. The part was the W3C's SVG, so maybe I'll blame it on them ;-)

Thanks for pointing out the comment in Sam's. You always provide exceptionally good test cases when it comes to making these changes.

As you can see, by default the Wordpress app strips the SVG before saving the comment to the base, though the SVG is showing up in preview (I copied it from Sam's comments).

I should be able to add a hack to allow SVG, but I want to make sure it disallows the script element.

It did look pretty in the preview, though.

Rank-2 Symmetric Tensor Representation

Fundamental Representation

=

Adjoint Representation

Rank-3 Symmetric Tensor Representation

8

For some reason, even in the preview, I saw linebreaks after each of the Young Tableaux. If you look at it in the comment-preview on my blog, you'll see that it's a simple inline "equation," with no linebreaks.

What is nice about the current WordPress (which strips out all the interesting tags) is that it demonstrates the perfectly decent fallback content for the SVG-challenged.

9
Sam Ruby - 10:45 am 10/19/2007

The issue with SVG and Venus was the combination of features that Shelley and WordPress used at the time. The Atom feed logic for WordPress 2.3 will take Shelley's lovely XHTML+SVG, escape it, and slap it into the content as type="html".

Now, if Venus and the Universal Feed Parser were truly "Universal", they would have understood this. And they would have, if it weren't for the fact that Shelley uses namespace prefixes — which is well within her right to do. In XHTML, this all would have worked out, but in HTML, svg:svg isn't in my sanitization whitelist and got stripped.

In any case, WordPress ticket 5181 has been blessed and assigned. Cross your fingers.

FYI: If either of you get a chance, give Liferea a spin.

10
Shelley - 11:03 am 10/19/2007

Good to hear on Wordpress change.

I used the specific SVG namespace because I originally assigned a general namespace for SVG within the header for all my SVG usage in the page. Then, later, I realized that this is stripped out in comments, and so I needed to also include the use of namespaces within the elements. However, I forgot that at that point, I didn't need to use the svg namespace, and could just use the default.

But the content type is served as XHTML now, and also surrounded by the appropriate div element. I don't think I used the svg:svg with the last batch. We got it working once, but something happened when I used the W3C SVG in the next post. Probably how I copied it, or modified it for inclusion.

In addition, something happened to my text in the embedded example that didn't with the text in the stand alone for Firefox and Safari. I could stroke the text, but the fill wouldn't work no matter what I did. Until I figure out that odd event, I decided to pull the example and use a PNG.

Regardless, I don't know about including SVG into the feed. Syndication feeds really are, to me, indicators of activity, not replacements for visiting the site. I don't allow images through, so I'm not sure why I'd allow SVG through.

Makes me a stick in the mud, pain in the butt, but that's my take, which is why I am considering just stripping the SVG from the feeds.

Regardless, nothing happens until I can add the functionality that will parse out a template tag with a plug-in and replace it with the contents of an SVG file when published, rather than having to use all the SVG directly in the post, adding to the database entry. I don't want to use object or embed elements. I do want to make the process more efficient and less database space intensive. SVG itself makes this simple, but unfortunately, Firefox hasn't implemented this functionality yet, and Firefox 2 is my most used browser at this time.

11

[…] It seems like the belief that XHTML being a failure is a reflection on XML-on-the-web in general. In fact, all browsers except for IE can handle application/xhtml+xml MIME type these days, so it really seems to me that the verdict's still out on whether XHTML is a good technology or not. Some people out there still think that XML has a place on the web. People like Shelley, who also shares her thoughts on SVG in text/html here. […]

Thanks to all those who have contributed to the discussion. Comments are now closed, but you can contact the author of the post directly.