United Youth Symbol Page

This was a cool project I implemented Summer 2011, I can now talk about it, now that my customer has taken it online.

Update: In the meantime it's offline again :(

Anyway, it looked like this:

The requirements were thus:

• The task was to have a logo in the browser.
• The user should be able to alter the colors in various parts of the logo.
• The user should also be able to add gradients as opposed to just flat colors.
• The user should be able to download the logo with the colors they've chosen, for printing on T-Shirts etc.
• Ideally – in my opinion, as the logo might be printed out in a large format, we should offer a scalable vector download, not just a bitmap which will get jaggies when scaled up.
• Ideally – this should all happen interactively in the browser
• Ideally – I wouldn't have to completely re-write my program each time the graphic designer altered the Logo.

This was what I did:

• The graphic designer gave me the logo as a vector PDF. I imported this into Inkscape and exported it as SVG.
• SVG can be displayed in the browser by modern browsers.
• The program is written in Javascript and runs directly in the browser.
• SVG is XML. I identified the nodes which controlled the colours, and added extra attributes, like adrian:node="color1". (Inkscape preserves these attributes when you open/save the SVG XML file.)
• The program, in Javascript, when the user changes a colour, uses XPath to identify the parts of the logo needing a change, identified by the adrian:node attributes, and changes them. (This means the program doesn't need to understand the structure of the XML SVG document, and this structure can be changed without altering the program.)
• To download the logo as PDF, a form submit is made to the server, with the chosen colours. The same logo file exists on the server as SVG. The same XPaths are used to change the SVG, and then it's converted to PDF using Java. The PDF file is sent as the response to the HTTP request.
• Not all browsers support SVG, notably Internet Explorer at the time of programming. Using a test to see if SVG is supported, I fall back to using an <img> for the symbol in that case. Every time the colour is changed, a server call is made, and the library used on the server can produce a PNG as easily as a PDF.
• At the time of writing the Java server and the website were on different domains. But this is no problem as both form submit (for download PDF) and <img> tags (for interactive editing on IE) pre-date the same-domain policy. (If only some tags are restricted by the same-domain policy, it makes the policy rather useless, but that's another rant for another time..)