SVG Fonts – the learning

SVG Font creation and usage

Today I have been working on an online CV. I needed a button for downloading a PDF version of a PDF. I wanted it to fit in with the Font Awesome and Academicons that my theme uses.

WOFF usage

Another issue for me was the text font. I needed to display some combining diacritics with a clear font.

World Map Navigation

For one of the web projects I am working in we have been throwing around the idea of having a world map as a navigation element. Each country would then be clickable. This kind of navigation has been done with hyperlinked bitmaps like the LL-Map project.

LL-Map Bitmap

LL-Map Bitmap

Or with flash like the Joshua project.
Joshua Project Front page with Map

Joshua Project Front page with World Map

I have not seen any implementations in HTML5 canvas or in SVG. It occurs to me that these technologies could be used. I am not deeply familiar with either technology. So I did some googling.
I found some interesting articles on the matter.

  • Performance of SVG vs. Canvas [1] Boris Smus. 19 January 2009. Performance of Canvas versus SVG. http://smus.com/canvas-vs-svg-performance [Link] [Accessed: 4 March 2012]
  • How to Choose Between Canvas and SVG [2] Patrick Dengler. 28 September 2011. How to Choose Between Canvas and SVG. http://www.sitepoint.com/how-to-choose-between-canvas-and-svg/#fbid=6CJz-eeIXxl [Link] [Accessed: 4 March 2012]
  • SVG or Canvas? Сhoosing between the two [3] Mihai Sucan. 4 February 2010. SVG or Canvas? Сhoosing between the two. http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/. [Link] [Accessed: 4 March 2012]
  • CanVG: Using Canvas to render SVG files [4] 29 March 2010. CanVG: Using Canvas to render SVG files. http://ajaxian.com/archives/canvg-using-canvas-to-render-svg-files [Link] [Accessed: 4 March 2012]

I am not sure that I have any answers but this is my thought towards the problem space.

There is one map of languages I have found which deserves to be mentioned. I am not sure of the technology used but it seems it would be either of these methods. It is the map of the Languages of California hosted at Berkeley.

California Languages Map

California Languages Map

References

References
1 Boris Smus. 19 January 2009. Performance of Canvas versus SVG. http://smus.com/canvas-vs-svg-performance [Link] [Accessed: 4 March 2012]
2 Patrick Dengler. 28 September 2011. How to Choose Between Canvas and SVG. http://www.sitepoint.com/how-to-choose-between-canvas-and-svg/#fbid=6CJz-eeIXxl [Link] [Accessed: 4 March 2012]
3 Mihai Sucan. 4 February 2010. SVG or Canvas? Сhoosing between the two. http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/. [Link] [Accessed: 4 March 2012]
4 29 March 2010. CanVG: Using Canvas to render SVG files. http://ajaxian.com/archives/canvg-using-canvas-to-render-svg-files [Link] [Accessed: 4 March 2012]