Opera Developer News

SVG Web Fonts kung fu

By Zi Bin Cheahzibin. Sunday, September 6, 2009 1:02:47 PM

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.

@font-face Web Fonts resourcesOpera at d.Construct 2009, September 3-4 2009!

Comments

thobi # Monday, September 7, 2009 10:14:58 AM

looks great. especially in FF3 *lol*

good work!

Omega JuniorOmegaJunior # Monday, September 7, 2009 12:57:04 PM

The background lettering and the foreground words 'Bruce Lee' didn't load...

Opera 10, build 1750.

Anonymous # Monday, 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 SchlossChas4 # Monday, September 7, 2009 9:24:17 PM

Loads fine, just have to let it download the full file

Omega JuniorOmegaJunior # Wednesday, September 16, 2009 7:00:45 PM

I let Opera load until it gave up.

Charles SchlossChas4 # Wednesday, September 16, 2009 8:07:49 PM

It is a few megabytes in size so it may take a while

Zi Bin Cheahzibin # Friday, 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)

Omega JuniorOmegaJunior # 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).