Displaying Text on SVG

Question

I have a very graphical website that I'm rendering with svg. The issue I'm having is that I need to display some text on the image, and since most browsers don't support automatic line breaking in the element I'm using a <foreignObject> to add a <div> inside the svg.

While this works relatively well in Firefox, Chrome handles this very poorly. I'm wondering if I should try to make a <div> in the html that would float over the frames but I think it would be difficult to position this element consistently. So, does anyone have any ideas? Here's a link to the page that I'm working on: http://okcomputerstl.com/K9_Athletic_Club/services.html

Answer 1

If your content needs automatic flow layout then go with HTML, and just add the svg borders or backgrounds as needed.

If your content is mostly graphics, and you don't need to have automatic flow layout then avoid foreignObject altogether and use one or more <text> elements instead.

SVGWeb doesn't handle foreignObject (or html inside svg) at all AFAIK.

Answer 2

Check out RaphaelJS.

1. It is essentially a cross browser framework for advanced SVG.
2. It has good documentation and support(sencha)
3. It is maturing at version 2.1
4. It is free.

Here is a text example. It does typography well in my experience.