ed.blog

You will be vectorized.

On mythbusting and the web... and why SVG Fonts are sometimes useful

, , ,

This is a response to "Mythbusting: Why Firefox 4 won’t score 100 on Acid3".

To get the facts straight, let's start with some history.

Acid3 is a test released in 2008 that tests EcmaScript and a number of different W3C Recommendations. The test as a whole is heavily focused on DOM functionality, and gives the tested browser a score from 0 to 100 based on how many subtests were passed. Having 100/100 is not enough by itself to pass the test; the rendering must also look exactly like the reference page.

Ian Hickson compiled the first 84 tests, and announced a competition to fill the 16 remaining subtest slots, open to anyone that had a test that fulfilled the conditions (quoted with emphasis added in red below):

  1. The test must consist of the body of a JavaScript function which returns 5 when the test passes, and which throws an exception otherwise. It doesn't matter what kind of exception.
  2. The test must compile with no syntax errors in Firefox 2, IE 7, Opera 9.25, and Safari 3. (You can use eval() to test things that are related to syntax errors, though.)
  3. The test must not crash any of Firefox 2, IE 7, Opera 9.25, and Safari 3.
  4. The test must fail (throw an exception) in either a Firefox trunk build from January 2008 or a Webkit trunk build from January 2008 (or, ideally, both). (Opera and IE are failing plenty of tests already, I don't want to add more tests that only fail in one of those. Of course if you find something that fails in Firefox or Webkit and Opera or IE, so much the better.)
  5. The behaviour expected by the test must be justifiable using only standards that were in the Candidate Recommendation stage or better in 2004. This includes JavaScript (ECMAScript 3), many W3C specs, RFCs, etc.
  6. You must be willing to put your test into the public domain. (I don't want us to end up with any copyright problems later!)

Several people of various affiliation (myself included) contributed tests during the week the competition was open.

Now, every once in a while (usually around major version release time), various companies and individuals complain about having to fix bugs and/or implement web standards to pass the test.

Opera and Webkit implemented (very brokenly, in at least Opera’s case) a small subset of SVG 1.1 Fonts; basically just enough to pass Acid3.

- Boris Zbarsky

Opera 8 was the first version of Opera that shipped with native SVG support back in 2005. A full version history is also online these days thanks to Frank M. Palinkas. Opera 8 had support for much the same subset of SVG Fonts we support in Opera 11 today. True, we did have to revisit the fonts code several times after Opera 8, to fix it to properly deal with unicode surrogate pairs for example and a slew of other bugs unrelated to Acid3 (remember, this was before Opera even passed Acid2). Granted, we did add support for the SVG <altGlyph> element because that was a required part of subtest 79 (created by Cameron McCormack) in Acid3. That was something that we simply hadn't prioritized, much like many of the other (uncontroversial) things tested by Acid3. As far as the "very brokenly implemented" remark goes, feel free to submit bugs to the Opera bugtracker.

At this point, the SVG working group has decided that SVG Fonts will no longer be a core part of SVG but will be a separate specification, and that it might need some serious work if anyone is ever to implement it in full.

- Boris Zbarsky

It's correct that the SVG WG has been asked to split out the SVG Fonts chapter to a separate specification. This is most likely going to happen as part of the work on SVG 2.0 (or SVG.next, call it what you will). An interesting tidbit is that SVG Tiny 1.2 requires support for the same subset of SVG Fonts that has been implemented independently by several vendors to date. It's a fully backwards-compatible subset, a SVG Tiny 1.2 font is compatible with SVG 1.1 user agents - provided of course that they support at least the same subset of SVG 1.1 Fonts.

In other words, the WOFF font standard is more appropriate, works in more browsers, and is a better way to handle custom font support in browsers.

- Alexander Limi

There are also the TrueType (TTF) and OpenType (OTF) formats, which are equally appropriate, at least if transferred with gzip content-encoding. In fact, downloadable truetype fonts is a part of Acid3 (see the top right corner of the test). WOFF can be used for some things, and it's not a bad format, but it doesn't have the same feature-set that SVG Tiny 1.2 fonts has, and saying they can always replace each other is simply not true. More about that below.

Myth #1: You need to implement the whole SVG 1.1 Fonts chapter to pass Acid3

To be really clear: the entire feature-set of SVG Fonts, where each glyph can have e.g many different fills and strokes, raster images, animation, and be arbitrarily complex, as specified in SVG 1.1, has not been implemented in a single SVG user agent to the very best of my knowledge. Nor is it a required part for passing the Acid3 test.

Myth #2: SVG Fonts and foreignObject support are both required to pass Acid3

Once you put an <iframe> in a glyph, all sorts of issues arise — both in terms of the spec being underdefined and in
terms of the behavior being very difficult to implement, no matter what the spec said.

- Boris Zbarsky

The spec is really quite clear:

It is not required that the SVG user agent supports the ability to invoke other arbitrary user agents to
handle embedded foreign object types

So in fact it's not underdefined, it's explicitly not defined.

But what are SVG Fonts good for?

Here are a couple of examples:

  • Provides simple and manipulable graphics that can help in preserving text as text while maintaining the same visual appearance
  • Crossplatform, crossbrowser, with exact metrics and rendering specified by the SVG specification - e.g very useful for designing tests, or for platforms where you can't install fonts as a user
  • Easy DOM access to glyph outlines (path data)
  • SVG Fonts are fully editable in a text editor
  • The path data syntax is more expressive than what e.g WOFF/OTF/TTF fonts allow
  • Can be "misused" to do specialized stroking (e.g chain fonts, roads or railroad tracks) - granted, this is also true for other kinds of fonts.
I think I'll stop here. I don't like writing long blogposts anyway. And I can't believe I just spent all this time writing this and Firefox 4 still doesn't pass the Acid3 test - man! wink

How to get the svg elements intersected by a given rectangle

Comments

Unregistered user Tuesday, January 25, 2011 11:12:44 PM

Cameron McCormack writes: I suspect that Alex Danilo's Abbra player implements SVG Fonts fully. (At least, he has demonstrated videos playing in glyphs -- a feature of marginal utility, for sure!) Batik does complex glyphs too, albeit without animation.

Unregistered user Wednesday, January 26, 2011 9:17:49 AM

Lennie writes: Just shows me you don't know what you are talking about, there are actually 101 tests in Acid3 ;-) (hint: favicon HTTP 404 error)

Unregistered user Wednesday, January 26, 2011 9:20:44 AM

Lennie writes: Correctly seems they changed something, the site now has a 0-bytes favicon.ico ?

Erik DahlströmMacDev_ed Wednesday, January 26, 2011 10:31:14 AM

@Cameron:
The Abbra SVG engine probably has the most advanced implementation of SVG Fonts, that's true. Still I haven't seen evidence to indicate that it implements the entire feature-set of SVG 1.1 Fonts. Video isn't part of SVG Tiny 1.2 fonts, nor is it part of SVG 1.1 fonts (except if you nest it inside foreignObject, and like already stated then the behavior isn't defined), but it's a fun demo for sure smile

About Batik, do you have any examples to share?

Unregistered user Wednesday, January 26, 2011 11:10:49 AM

Anonymous writes: I might have miss it but did you answer to: "We don’t particularly want to do that small subset in Gecko, since it gives no benefits to authors or users over the existing downloadable font support (beyond the brownie points on Acid3)."

FransFrenzie Wednesday, January 26, 2011 12:43:30 PM

Originally posted by anonymous:

Anonymous writes:

I might have miss it but did you answer to:
"We don’t particularly want to do that small subset in Gecko, since it gives no benefits to authors or users over the existing downloadable font support (beyond the brownie points on Acid3)."


Pretty much the article as a whole I'd say, but particularly the last part ("But what are SVG Fonts good for?") and that SVG Tiny 1.2 requires it. Depending on your perspective you could say that merely adds some more brownie points, but my perspective is that I can play around with SVG Fonts without learning any new tools or technologies. If I were to create a TTF/WOFF/whatever kind of font, most likely I'd import glyphs from SVG as a starting point.

Dustin WilsonKhadgar Wednesday, January 26, 2011 4:17:45 PM

There's another reason why they're useful: logos. Can eventually have fully color logos that work as text which can use floats for point coordinates rather than just integers like other font formats. Even for monochromatic logos it's beneficial because SVG fonts don't use hinting or other technologies which change the appearance of the text. The logo would remain looking like it was intended to be seen. We could finally have logos on websites that are truly accessible.

A while back I created an SVG font version of my logo for testing purposes and to perhaps use on my weblog whenever I got around to redesigning it. My logo only uses integers for point coordinates because it was glyphs from a font to begin with, but that doesn't mean that I could do this in TrueType, OpenType, or WOFF. I'd have to deal with hinting and subpixel rendering adjustments to my logo which would change its appearance drastically based upon what operating system was being used by the user.

It's absolutely amazing how ignorant and close minded these people can be. Glad none of them are developing the browser I use.

Michael Johnsonpitredbeard Wednesday, January 26, 2011 4:59:30 PM

Another thing that stands out to me (unless I'm misunderstanding things) is that SVG fonts support full color. So I can have gradients, fills and more that are unique per glyph, rather than trying to do the same with CSS, or on the text as a whole (in SVG).

While that may not be generally useful, I can see an illuminated font being used for the initial letter of a paragraph (or section, or whatever). That's not possible in any other common font technology, AFAIK.

Cutting Spoonhellspork Wednesday, January 26, 2011 7:40:57 PM

Good stuff, the example chain font was rather crazy though...

Unregistered user Wednesday, January 26, 2011 7:47:15 PM

Anonymous writes: looks like this quote answers clearly and positively to the "guilty" post: "Granted, we did add support for the SVG element because that was a required part of subtest 79 (created by Cameron McCormack) in Acid3" The rest of the post just looks like trying to say that svg fonts are not useless, but there is no evidence anybody ever said the opposite. SVG fonts can be useful, those 3 acid test points are not.

thobi Wednesday, January 26, 2011 8:11:51 PM

Originally posted by anonymous:

looks like this quote answers clearly and positively to the "guilty" post


i'd say you are right - and wrong

Originally posted by Boris Zbarsky:

We don’t particularly want to do that small subset in Gecko, since it gives no benefits to authors or users over the existing downloadable font support (beyond the brownie points on Acid3).


sounds to me like they don't want to implement a bit of it to get the points, right. but they neither want to do it right because they think it's not useful, worth the work or whatever.

anyway, i'm not a pro. i don't know who if the opera way or the mozilla way is the better one. but opera went for a svg-support a long time ago and mozilla just came up with the idea of skipping the last 3 points?!

Unregistered user Wednesday, January 26, 2011 8:45:46 PM

Anonymous writes: Right, Mozilla did not want to spend time implementing a "subset" of SVG Fonts, because that specific part, as of today, does not bring benefits to anybody. But SVG Fonts are supported clearly. If other devs are fine spending time on getting better score, that's fine, it's matter of personal choice and neither approaches can be said "right" or "bad". Thanks to open source everybody is welcome to implement the missing subset in Firefox by submitting a patch for review, internal developers right now are trying to release a product that is good for users, more than for scoreboards.

Unregistered user Wednesday, January 26, 2011 10:13:18 PM

Cameron McCormack writes: Erik, there's one simple example here: http://svn.apache.org/repos/asf/xmlgraphics/batik/trunk/samples/batikLogo.svg

FransFrenzie Thursday, January 27, 2011 10:20:26 AM

Originally posted by anonymous:

Right, Mozilla did not want to spend time implementing a "subset" of SVG Fonts, because that specific part, as of today, does not bring benefits to anybody.


I just explained how it has significant benefits to me, and so did Dustin Wilson. And that was in addition to the benefits listed in the OP. You may dismiss these benefits as inconsequential, but it is a niche that's left wide open by TTF/OTF/WOFF. One could make the argument that SVG fonts are better suited for text-containing logos and headings whereas WOFF is better for replacing Verdana by something with a little more character.

The best argument I've read against SVG Fonts is that it's not very well suited for scripts like Arabic, but I don't know enough of the subject matter to know whether it's really that big an issue. At any rate that's still kind of a Catch 22 argument.

Originally posted by anonymous:

Thanks to open source everybody is welcome to implement the missing subset in Firefox by submitting a patch for review, internal developers right now are trying to release a product that is good for users, more than for scoreboards.


I think SVG Fonts, even "just" the subset from SVG Tiny 1.2, are useful. The fact that it's tested in Acid3 to some extent is almost entirely coincidental to me (except I imagine the creators of Acid3 agree or they wouldn't have included it wink).

To add another point, I'd like to emphasize that SVG can be an alternative to PDF. As Lars Sonchocky-Helldorf wrote, "your reluctance towards SVG-fonts could tip the scales whether SVG as a file format gets some relevance or degenerates into insignificance."

Unregistered user Thursday, January 27, 2011 10:37:37 AM

Danny Moules writes: "Myth #1: You need to implement the whole SVG 1.1 Fonts chapter to pass Acid3" and "Myth #2: SVG Fonts and foreignObject support are both required to pass Acid3" Were never arguments made in the post you quoted. Please do not misquote and misrepresent people's arguments. (http://en.wikipedia.org/wiki/Straw_man)

Unregistered user Thursday, January 27, 2011 11:25:53 AM

Ms2ger writes: Myth #1: You need to implement the whole SVG 1.1 Fonts chapter to pass Acid3 That's the point. We should not be encouraging browsers to implement just those parts of a specification required to pass a prominent test. (For example, IE decided to only support data: URLs in images, as that's what Acid2 tests.) Also, "So in fact it's not underdefined, it's explicitly not defined." is silly. It doesn't matter if something in implicitly or explicitly not defined. If it's not defined, it's not defined, and thus underdefined. A specification should make a call about the required processing for *all input*. A specification that tells browsers they can do whatever they want is not a specification, it's boring, and more importantly, useless science fiction.

Chirpie Thursday, January 27, 2011 11:27:19 AM

Originally posted by anonymous:

looks like this quote answers clearly and positively to the "guilty" post:

I wouldn't say so. Rather, it corrects the FUD Mozilla was spreading about Opera.

Originally posted by anonymous:

Were never arguments made in the post you quoted.

You are ignoring the context. The two myths were mentioned because of Mozilla's FUD statements against other browsers. Mozilla implied that Opera only supported SVG Fonts to pass Acid3, when it had in fact supported it since before Acid3 was made. So the context here is the background for the actual facts.

Do you work for Mozilla? They seem to have this thing for misrepresenting people and spreading FUD about competitors.

Chirpie Thursday, January 27, 2011 11:36:49 AM

I'd like to finish off by saying that Mozilla should stop making excuses, and just fix their browser instead. Everyone else seems to be handling Acid3 just fine, so why can't Mozilla? We all know that Acid3 doesn't really mean that much, but it says something about a browser's willingness to adapt.

So to Mozilla -- fewer excuses, more action, OK?

Unregistered user Thursday, January 27, 2011 6:55:32 PM

the_dees writes: That Acid2 made IE implement data-URIs is a great thing. Many authors wanted to be able to use this feature. On the other hand, Acid2 hurt HTML5 when it tested for tables closing paragraphs. Acid3 had its benefits as well, but I'm not sure about SVG Fonts yet. Well, I think Mozilla should just implement that bit of SVG. Even if it was just for the sake of Acid3. Other vendors did it as well and some didn't improve over that (*cough* Apple *cough* Google *cough*). The real thing I wonder about is: Why is no one so eager about CSS 2.1 Test Suite results? Opera ranks 3 behind IE9 beta and Firefox 4 betas. Maybe if other vendors had written as many testcases for the Test, the scores would be distrubuted differently. But as of now, IE9 beta is the most compliant CSS 2.1 browser out there according to tests. Pretty good for something who only scores 95% of Acid 3.

Cutting Spoonhellspork Friday, January 28, 2011 2:11:03 AM

The numbers have changed that much? Now I am certainly curious...

Charles SchlossChas4 Friday, January 28, 2011 4:12:06 AM

knight

A key value of SVG fonts is guaranteed availability in SVG user agents. In some situations, it might be appropriate for an SVG font to be the first choice for rendering some text. In other situations, the SVG font might be an alternate, back-up font in case the first choice font (perhaps a hinted system font) is not available to a given user.

ChrisSlamdex Friday, January 28, 2011 5:53:09 AM

Originally posted by anonymous:

But as of now, IE9 beta is the most compliant CSS 2.1 browser out there according to tests.

You can't base your claims about compliance on those tests. They don't even test the whole thing. But why are you talking about CSS in a post about SVG?

Unregistered user Friday, January 28, 2011 3:35:53 PM

the_dees writes: Unfortunately, the blog doesn't seem to preserve line-breaks for anonymous users. I hope you get the context. -- Chris, I meant the CSS 2.1 Test Suite which currently contains about 8000 individual tests. Twice the amount if you count the XML duplicates. -- Of course, these do not cover every possible combination of properties and values, which I think is impossible. However, it covers everything defined in CSS 2.1 with at least a few tests. -- Do not get me wrong. IE9 has many issues with CSS 2.1, as all browsers (still) have. If Opera, Mozilla and Apple had submitted as many tests as Microsoft did, they all would probably score about the same percentage of passing tests by now (well, maybe not Apple). -- However, the truth simply is that no matter who wrote the tests, no matter how many of them there are. They should be passed. Else you have a bug. The QA at the CSS WG makes sure the test are ok. Especially now that we're so close to a release of CSS 2.1 -- Yes, I can base my claim on the CSS 2.1 Test Suite because as of today it is the most extensive Test Suite for that specification out there (in public). -- So, why are you answering a CSS post in a SVG topic? Well, discussions evolve. The blog software just doesn't support that social feature well. -- This topic is also about Acid3, and I criticise Acid3 or rather how peope perceive it. I see the advantages, of course. However, when speaking about figures, I prefer data that is as objective as possible. Acid's intention is not to be objective but to create pressure on browser vendors which it does sucessfully. Ironically, the real thing is almost ignored by browser vendors. So much for the standard compliant web.

Chirpie Monday, January 31, 2011 10:28:54 AM

Originally posted by anonymous:

Chris, I meant the CSS 2.1 Test Suite which currently contains about 8000 individual tests.

Yeah, it's a clever PR move by Microsoft. Makes it look like IE is ahead when it isn't.

Ironically, the real thing is almost ignored by browser vendors. So much for the standard compliant web.

The real thing is ignored? I'm not sure if you realize this, but html5 was started by a group of browser vendors, and created to be compatible with the current web while also expanding capabilities. So html5 is definitely the real thing, and not being ignored. On the contrary.

I don't know what you think browser vendors are ignoring, but I think you must be misunderstanding something.

Unregistered user Saturday, February 5, 2011 6:50:47 PM

the_dees writes: Yes Chirpie, it is a clever PR move. However, even if all browsers figures were 98%, shouldn't someone work on the remaining 2 percent? -- By "the real thing" I refer to CSS 2.1; For example run-in, a much wanted layout trick has been dropped because no vendor really cared. MS implemented it to be CSS 2.1 compliant (which it actually is as much as possible in this case; and yes, Opera improved its support; WebKit has a cpmletely broken imoplementation and Mozilla none at all). -- Like IE, Opera and WebKit have issues in their implementation. Yet, those are ignored. because they're not fancy like the newest not-yet standard Apple invented and implemented. -- I didn't mention HTML5, but have you noticed that you can't use IDNs in the email field - at least in Opera and Firefox' implementation?

Cutting Spoonhellspork Sunday, February 6, 2011 4:32:32 AM

I find myself curious whether all components of Opera are IPv6-ready? Especially NNTP/FTP/SMTP

FransFrenzie Sunday, February 6, 2011 11:35:53 AM

Are you sure you meant to post that here? lol

Cutting Spoonhellspork Monday, February 7, 2011 2:03:02 AM

As long as the topic of looking forward was on the table, our need for IPv6 is becoming more desperate.

Unregistered user Wednesday, February 23, 2011 3:16:39 AM

David Dailey writes: Hi Erik. I didn't read all the comments here, so this may already have been said, but as I understand it WOFF, by W3C charter of its working group, cannot do something very important for Web Applications: allow the script-assisted design of a font client-side in the browser. This is not merely important to be able to create font-editors that run in the browser, but to create glyphs that conform to bounding shapes as in word art, text-poems, corporate logos, and the like. Without this ability things like the text in such things is forced to be graphical or layed out without a text-flow-model and hence becomes inaccessble.

Cutting Spoonhellspork Wednesday, February 23, 2011 7:10:39 AM

I think they have a huge number of hardblockers to deal with first, though it seems odd to be stubborn about the importance of SVG fonts and SVG format compliance.

Unregistered user Wednesday, March 16, 2011 10:40:14 AM

Rick Graham writes: Zurich, 2002: In his keynote, Chris Lilley demoed dynamic "flowing" text using SVG fonts on a small device. I forget which, probably the iPaq. This was done on the BitFlash viewer nearly 10 years ago. It's not that hard. As a viewer implementor, a user agent implementor, and a content author, I want to say that I think SVG fonts rock and it will be a crying shame if they go away because they do not sync with Microsoft's corporate agenda, or the personal view of one disgruntled Mozilla coder.

Cutting Spoonhellspork Wednesday, March 16, 2011 7:09:16 PM

Vectorizing as much as possible is ideal for the sake of quality. it just requires enough hardware power.

FransFrenzie Monday, July 4, 2011 11:25:25 AM

Here's another take on it: SVG fonts are great for headings, even if nothing else.

http://jeremie.patonnier.net/post/2011/02/07/Why-are-SVG-Fonts-so-different

Write a comment

New comments have been disabled for this post.