Chez Jérémie - Mot-clé - English

SudWeb 2011 : Coup d'essai, coup de maitre

Jeremie — Tue, 21 Jun 2011 09:54:00 +0200

Note for English speaker, there is an English version down below

Le 27 mai dernier, j’ai eu la chance de participer à la toute première édition de SudWeb à Nîmes. Partie sur une boutade lors du dernier Paris Web, les organisateurs se sont juste arrachés pour arriver à monter le truc en à peine 6 mois. Bravo à tous, ce fût beau ! Car on peut le dire, pour un coup d’essai, ce fût un coup de maitre. Au delà de la logistique impeccable, l’ensemble du programme des conférences était tout simplement parfait. Mixant à la fois les aspects fonctionnels, techniques et prospectifs, l’équilibre du déroulé m’a complètement estomaqué (ainsi que le respect des horaires, tenus d’une main de fer, couplé à des moments de pause ô combien conviviaux).

Vous n’y étiez pas ? Ce n’est pas grave. D’une part toutes les conférences ont été filmées et devraient être disponibles prochainement et d’autre part, il y aura une autre édition l’année prochaine, viendez-y

En ce qui concerne mon nombril, j’ai eu l’occasion d’y donner une conférence sur un sujet qui me tient à cœur depuis un peu plus d’un an : SVG. Au cours de cette conférence, j’ai montré ce qu’il était possible de faire aujourd’hui avec SVG (qui, rappelons le, est disponible dans tous les navigateurs moderne). Plutôt que de m’attacher aux questions techniques qui tourne autour de cette technologie, j’ai préféré mettre l’accent sur des outils et des résultats concrets. L’idée étant de montrer comment des designers et les développeurs on déjà utilisé SVG et ce qu’il apporte au web design moderne.

Évidemment, même si j’ai oublié de le préciser pendant la conférence, je n’ai pas pu m’empêcher de réaliser mes slides en SVG, les voici (cliquez sur l’image pour lui donner le focus et utilisez les flèches de direction pour passer d’un slide à l’autre) :

Vous pouvez accéder à ma présentation SVG à cette adresse : http://jeremie.patonnier.net/experiences/sudweb2011/presentation.svg

A noter que je cite tous les sites suivant :

Outils

http://code.google.com/p/svgweb
http://raphaeljs.com : Vous devriez tous avoir cette bibliothèque dans votre trousse à outils si vous voulez réaliser du SVG tout en étant compatible avec les vieux IE.
http://www.highcharts.com : LA bibliothèque pour faire des graphiques de données sans vous casser la tête.
http://mbostock.github.com/d3/ : D3.js est une bibliothèque qui vous permet de mapper des données au seins de graphiques vectoriels en SVG. C’est un pont technique idéal entre les développeurs qui doivent manipuler ces données et les designers qui doivent les mettre en scène.

Références

http://www.thenounproject.com : Projet mettant à disposition des icones libres de droit au format SVG. Indispensable pour réaliser de la signalétique. A noter que toutes les icones proposées sont composées d’un seul est unique chemin SVG ce qui en fait une base travail extrêmement propre et malléable pour les Web designers.
http://www.bifter.co.uk : Web comics humoristique intégralement réalisé en SVG.
http://opendata.zeit.de/pisa-wohlstands-vergleich/visualisierung.php : Le journal allemand Zeit propose une visualisation de données démographiques intégralement réalisée en SVG
http://www.nissanusa.com/leaf-electric-car/index : Dans la série “Non, ce n’est pas du Flash” Nissan USA fait une magnifique utilisation de SVG pour proposer une navigation non linéaire des caractéristiques de sa nouvelle voiture électrique. A noter que RaphaelJS est utilisé pour assurer la compatibilité avec IE6, 7 et 8 (et oui).
http://rickardsund.com : Je n’ai pas de mot assez fort pour exprimer l’adoration que j’ai pour ce site. Pour moi, Il représente la quintessence du Web design moderne. D’un coté un design épuré à l’extrême qui sert parfaitement son propos. Il est l’œuvre de Hugo Ahlberg qui a un lourd passif de designer Flash, ce qui lui a permis de s’extraire des contraintes (artificielles) du design web traditionnel. D’un autre coté, il est intégré à la perfection en utilisant exclusivement des standards Web : HTML5 (à noter en particulier la magnifique utilisation de l’API History), CSS3, JS (Du “mouse gesture” de toute beauté) et bien sur du SVG (par petites touches mais indispensables). Ce travail formidable a été réalisé par Daniel Mahal et Daniel Connor qui font là une démonstration d’excellence de ce que devrais toujours être une intégration aux standards, en particulier la maitrise de la dégradation élégante qui est quasi parfaite : Ce site fonctionne dans IE6 ! Vous DEVEZ regarder la source de ce site et vous en inspirer.

Pour conclure, je n’ai plus qu’une chose à dire : Longue vie à SudWeb, vivement l’année prochaine

On May 27th, I got the chance to attend the very first SudWeb event in Nîmes, France. Starting on a joke during the last Paris Web event, the people behind SudWeb make it possible in just 6 months. Thanks dudes that was awesome! We can say it, for a first run that was a master piece. Beyond the perfect logistic, the program was just great. Talks were amazingly well balanced between functional, technical and prospective subjects (and the schedule was perfectly mastered with good time to talk and network with people).

You wasn’t their ? Don’t worry. First, all the talks were camcorded and should be available soon. Second, there will be another edition next year, attend it

On my own, I had the opportunity to give a talk about one of my favorite subject for a year now : SVG. During this talk, I show off what is it possible to make with SVG today (which, as a reminder, is available in all modern browsers). Instead of talking about technical stuffs, I focused on tools and practical results. The idea was to demonstrate how designers and developers had used SVG and what that technology brings to modern Web design.

Of course, even if I forgot to mention it during my talk, I felt oblige to made my slides with SVG. Here there are (see above, click on the image to give it the focus then use the arrow keys to switch between the slides).

Note that I use all the following web sites as examples:

Tools

http://code.google.com/p/svgweb
http://raphaeljs.com : You should all have that library in your toolbox if you want to use SVG with IE compatibility in mind.
http://www.highcharts.com : THE library to build charts without headache.
http://mbostock.github.com/d3/ : D3.js is a library that allow you to connect data with graphics. This is an awesome bridge between developers that deal with data and designer that deal with graphics.

References

http://www.thenounproject.com : That project collect visual symbol and make them available in SVG. Note that all the symbols are made of one single SVG path. That make them highly usable as a work basis for Web designers.
http://www.bifter.co.uk : A humorous Web comics build with SVG.
http://opendata.zeit.de/pisa-wohlstands-vergleich/visualisierung.php : The dutch newspaper Zeit had a demographic data representation driven by SVG.
http://www.nissanusa.com/leaf-electric-car/index : Ok, so “This is NOT Flash”. This is a great SVG work made by Nissan USA to build a non-linear navigation system. Take care about the library behind the scene, it’s RaphaelJS. This means that it works properly even with IE6, 7 and 8 (crazy!).
http://rickardsund.com : I do not have strong enough words to express my love for this web site. To me, it’s the best of modern Web design. On the one hand, the simplistic design suits its subject perfectly. It has been made by Hugo Ahlberg who has extensive skills in Flash design. Those skills give him the ability to overcome the classic HTML web design. On the other hand, This Web site is perfectly develop with Web standards only : HTML5 (with a noticeable use of the History API), CSS3, JS (awesome mouse gesture) and, of course, some small (but essential) touches of SVG. This amazing work has been done by Daniel Mahal and Daniel Connor who demonstrate what a Web standards front-end development should always be. They especially mastered the graceful degradation: This site works perfectly with IE6 ! You SHOULD look at the source and use it as an inspiration.

To conclude, there is one thing left : Live long SudWeb, I strongly hope for the next edition

Why are SVG Fonts so different?

Jeremie — Mon, 07 Feb 2011 09:30:00 +0100

Une version française de cet article est disponible sur typographisme.net : Pourquoi les fontes SVG sont-elles différentes des autres ?

I’m sad to see that there are many misconception about SVG fonts. I’ve read a lot of articles and complains about the SVG font format and the last (but not the least) was an article from Alexander Limi explaining why Firefox will not pass the Acid3 test mainly due to a lack of SVG font support. All those complain are misplaced in many way because SVG fonts are misunderstood. Really? But in this case, what are SVG fonts made for? Let’s see that.

Forget it for regular text

One of the biggest misconceptions about SVG fonts is thinking that this format is suitable for regular HTML text. Unfortunately, it is not! In my opinion, this misconception is mainly due to Apple. Until iOS 4.2, SVG was the only format available to use custom fonts on iPhone and iPad. And because this support was (is?) somewhat buggy, SVG fonts’ reputation was badly injured.

Anyway, beyond iOS SVG font support, it’s a fact that SVG font format does not support font hinting. To understand that so called “lack” it’s important to think back about the specificity of the SVG image format. SVG shapes are placed in an absolute coordinate system and SVG documents do not have text flow ability such as HTML documents. Also, SVG documents do not necessarily have pixel perfect dimensions and the shapes can be subjected to mathematical transformations (rotation, scaling, skewing, etc.). So this means that a glyph can be placed anywhere in a document and its shape modified, but most of the time it won’t match a pixel perfect size nor even a pixel perfect grid. With all those constraints, hinting is not really helpful because it needs a pixel grid system to give its best.

If you simply try to use a WOFF font in an HTML document and apply a CSS3 2D transform, you’ll see that even with a hinting system, this does not really make a difference. But on the contrary, on regular HTML text that is pixel perfect positioned, SVG fonts are not so beautiful especially at small size. So yes, in an HTML document, SVG fonts are poor. But, as I said, it’s not their main purpose.

The power of drawing tools

In regards of other fonts formats, one of the biggest advantages of SVG fonts is the way shapes can be drawn.

Technically speaking, the shapes in SVG fonts can be made of any kind of curves (cubic or quadratic Bezier in different flavors or arc definitions) where shapes in TrueType fonts can only be made of quadratic Bezier curves. OpenType fonts are a bit smarter by supporting cubic Bezier curves, but for what I know no other font format supports arc definition. So, in theory the outlines produced for SVG fonts could be much more optimized than in other font formats. Ok, let’s be honest, it is not often the case in classical glyph design. But there is more. Because SVG fonts could use all the power of SVG it is possible to draw very complex shapes by mixing arbitrary paths and basic SVG shapes, which gives you a more control over your font design. So when you want to design an ornamental font, SVG gives you better tools to do so.

Practically speaking, it’s possible to use any software supporting SVG to draw fonts. This includes traditional font software such as FontForge but it’s also possible to take full advantage of drawing software such as Adobe Illustrator or Inkscape (this one provides powerful tools for drawing fonts). Of course such drawing software can be used to produce outlines for other font formats but you’ll always need to export them inside a specific font tool to convert those outlines to the right curves definition (which can have side effects on your design). With SVG, you don’t need to. You can directly use the output from your drawing software.

Animation, filters, video… \o/

Let’s go forward. SVG, beyond its drawing ability, has some amazing extension such as gradients, patterns, clipping, masking, animations, filters or even foreign object inclusion. It means that you can use all of this inside your SVG fonts. Yes it’s possible to produce native animated font with SVG. With filters, you can produce blurry or textured fonts. And with foreign object inclusion… Wow ! There’s no limit. Why not imagine a font with a sound background? Yes it’s possible, just include an HTML audio element and it’s done.

Of course it’s not necessarily wise to do such things. Especially if you want to use such a font for regular text. But think about it. The SVG font format unleashes your creativity to a brand new world. Say good-bye to the legacy “lead & paper” typography and jump out the final frontier with the upcoming of fonts made FOR the web (and not just backported to it).

Embedding and DOM Access

You think it’s amazing? Let’s go one step further in the twilight zone.

Historically speaking, ten years ago, SVG font was the only font format that could be embedded inside an SVG document. This feature was required to ensure that the rendering of a font inside an SVG document would remain consistent across different platforms and user-agents. Today, thanks to CSS @font-face and Data URI, it’s possible to embed any type of font format, but still, SVG fonts have always a huge advantage here.

As you know, SVG is an XML format so SVG font as well. This means that you can embed SVG fonts inside any XML document (for example in an SVG image or in an XHTML document and, in a near future, with HTML5, in any ordinary HTML document) and still have access to the glyphs through the DOM of the XML document. And this is huge because it means two crazy things:

You can easily access the font content through Javascript and change it as you wish for whatever reason. The SVG font format lets you in control of each individual glyph at runtime.
You can use CSS to style each individual glyph which gives you an amazing control on how the font will be rendered.

The other font formats do not provide such an easy and full access to their core design.

Security, accessibility, bla, bla, bla…

With such great power come amazing responsibilities. Security is one of the main concerns about SVG fonts. As Borris Zbarsky points out : Once you put an <iframe> in a glyph, all sorts of issues arise and is damn right. This point have to be discussed but is it a reason to drop everything? I don’t think so.

Another concern is about accessibility - so highly interactive fonts raise many issues, for example “how the user can control the animation on an animated font?”. But these questions are basically of the same type as those SVG brings on its own. So it’s possible to rely on the solutions available for SVG in a general purpose.

Of course it’s necessary for both browser constructors and web authors to take care about all those constrains. I’m sure some evil web authors will use SVG fonts badly, sure that browser vendors (all of them) do not presently do their best to support SVG fonts. So be it - but I think that SVG fonts are a real turning point in the history of typography and should be taken for what they really are: an amazing tool to bring fresh design ideas in typography and cool typography in web design. And it’s important to remember that SVG fonts do not play the same game as WOFF fonts on the web. Both formats have their strengths and weaknesses but there are not mutually exclusive.