Tuesday, August 23, 2016

Configurable SVG Images

I am the type of person who has a certain vision of what i want to achieve in mind and i struggle a lot finding the exact vision already implemented somewhere else. I strive to find a solution as close as possible to what i imagined in my mind and sometimes I have to settle for the closest option. In other cases, I have to implement the complete solution like i envisioned having the downside that it takes much more time and effort than actually necessary. Case in discussion here is finding the right icons for a GUI, webpage or even for my CV!

Why scalar vector graphics?
Simply because it is based on XML should be reason enough to go with scalar vector graphics. One can not only programmatically define the image, but applying changes to the svg images is also much easier. The main benefit however is that (as the name implies) they can be scaled to the desired resolution without Raster effects.

So coming back to the topic, it is often the case that while searching for the icons I cannot find the right icon that i need. It could that it is not available in the desired resolution or does not have the colors that i desire it to have. What i would like to have is a configurator which allows to take an already defined icon and customize it based on the user's requirements and then generate the corresponding SVG file. A stretch goal would be to provide a converter class for different image formats.(see example below)
Although my instinct tells me to use javascript and develop it as a web application, I would be implementing the application using Java (JavaFX to be more specific) just because I am new to the language and want to experiment with different aspects while creating something useable. The aspects I am interested in exploring are:

  1. Template generation: I have decided to use Freemarker for the SVG template since it is lightweight and very straight forward to use.
  2. Binding: Using the Model View Controller, bind the model elements with the UI elements.
  3. Modeling: Using an ecore model, how can i automate most of the GUI generation. I would like to use Eclipse Client Platform for that. 
The code can be found at the github on the following location:
TODO: <Enter github link to the project here>.



No comments:

Post a Comment