SVG Web Fonts kung fu

September 6, 2009 · by Zi Bin Cheah

In conjuction with Opera 10, we have introduced seven Web Fonts showcases and other cool stuff in the Opera 10 experience.

Today, I've made a Web Fonts+SVG image tribute to Bruce Lee - the martial artist. The SVG image is edited in Inkscape, and retouched in a text editor to add animation using SVG element such as animate and set.

The text (including the background text) are all web fonts and hence selectable.

Bruce Lee SVG showcase
Bruce Lee SVG download

image: screen capture of the original SVG.

Readers' comments 8

Left under the original article, as archived.

thobiMonday, September 7, 2009 10:14:58 AM
looks great. especially in FF3 *lol*
good work!
ΩJr.Monday, September 7, 2009 12:57:04 PM
The background lettering and the foreground words 'Bruce Lee' didn't load...

Opera 10, build 1750.
Unregistered userMonday, September 7, 2009 3:09:37 PM
Anonymous writes: OmegaJunior : My Opera 10 loaded fine, though it takes awhile to load the chinese web fonts, since the fonts are 10mb.
Charles SchlossMonday, September 7, 2009 9:24:17 PM
Loads fine, just have to let it download the full file

http://files.myopera.com/Tamil/Smilies/Happy.gif -
ΩJr.Wednesday, September 16, 2009 7:00:45 PM
I let Opera load until it gave up.
Charles SchlossWednesday, September 16, 2009 8:07:49 PM
It is a few megabytes in size so it may take a while
Zi Bin CheahFriday, September 18, 2009 9:31:11 AM
The chinese font size is a few megabytes.

This is potentially a challenge for web fonts to be implemented on language type that requires big font size(such as chinese in this instance)
ΩJr.Tuesday, September 22, 2009 10:38:50 AM
Yes, a challenge it is. I like SVG for several reasons. Bloating an image with font vectors is a disadvantage. Options include avoiding adding superfluous vectors (instead of adding the whole font) and reducing the amount of detail required (the font lives in the background and thus can do with much less detail).