Foxkeh's Wallpaper Creator: practical SVG application

When we make graphical web applications, we may use Canvas and SVG. Comparing SVG with Canvas, SVG is suitable to make applications with these features:

  • use large images with smooth lines (SVG is vector graphics)
  • edit size, position, shape or colors of images (easy to change)
  • clip, mask or filter images (SVG supports these features)
  • user interactive objects (DOM events can be added to SVG elements)

To demonstrate these advantages of SVG, Mozilla Japan has made a practical web application with SVG. “Foxkeh’s Wallpaper Creator” is a tool that allows you to easily create your own wallpaper in your browser. Not only can you choose Foxkeh and background image, you can easily change the size, position and transparency of Foxkeh and calender image.

I believe this application is enough easy to use and no more explanation is needed.

Just try creating wallpaper and realize how SVG is useful for web applications!

Screenshot of Foxkeh's Wallpaper Creator

About dynamis

More articles by dynamis…


  1. MarkC

    It’s a nice example of interactive SVG use, but it’s a shame that there doesn’t seem to be a way to export an SVG version of the final image. That would allow it to be subsequently edited in a program like Inkscape or Illustrator for those users who want to go further than the defaults allow.

    August 2nd, 2010 at 07:53

  2. nemo

    Or, for that matter, for operating systems that support SVG wallpapers.

    On my linux machines I rely on SVG wallpapers for attractive images w/ augmented content – say, linking to a cronjob that rotates an embedded image at specified times, or printing system information updates.

    Simply exporting to a PNG is not as useful.

    August 4th, 2010 at 13:51

  3. WulfTheSaxon


    Would be nice if was an APNG, though. GIFs on shaded backgrounds kinda fail.

    August 6th, 2010 at 23:38

    1. WulfTheSaxon

      Or SVG.

      August 6th, 2010 at 23:39

Comments are closed for this article.