How do I setup and use a SVG glyph library?
- Hi All,
I'm presently assembling many glyphs across a set of SVG files. The way I'm formatting the SVG files is just like is shown here : http://opentype.info/blog/2010/04/13/the-ipad-and-svg-fonts-in-mobile-safari
The goal after defining the many glyphs as DEFS in the SVG files is to be able to load them and create an SVG document using the pre-defined glyphs. It looks like SVG has the means to do this with the USE element but I'm really not sure this is true. The files I'm defining are like libraries of glyphs which would be external to the main SVG document where I would expect to use them. After looking into this a bit I hear a lot of confusion so below are my new questions!
Is it possible to use the USE element to reference glyphs in external files? Is the SYMBOL element a better way to go? Then there is also the new font-face feature via CSS3, is that how my goal would finally be achieved (except my glyphs are in the E000 to F8FF unicode range, so they can not be typed easily)? Also, what is the best way to load a SVG glyph external library file so it can be referenced in order to build the main SVG document (does it need a separate DOM)? All this is in the SVG spec but do Webkit based browsers support all this?
Below are a few relevant links but it does seem like there is a lot of confusion in this area. Some of the links seem to have a solution (like the first one using the superb D3.js framework) while others are more confused. What is the truth about this? I think that being able to re-use glyphs is a basic feature we should be able to count on, right? Surely, it has been ages since Flash introduced the USE (rubberstamp) feature, it is 2012 now, what is the present state-of-the-art on this essential feature?