[GSoC proposal] SVG integration into drupal using svg-edit

Project page on drupal.org: not created yet
Student: Rodrigo (rodrigoaguilera)
Mentor: still looking

Synopsis

Drupal image handling and all image related contributed modules assumes that all images are in some bitmap format but forgets about vector graphics. Vector graphics and its open Standard SVG have grown in importance over the past few years with extensible support in all the major web browsers and mobile devices.

Project

I will provide a reference framework for using SVG graphics inside drupal content and easy way for editing this graphics integrating the open source online editor svg-edit. (http://code.google.com/p/svg-edit/). This would mean creating two different modules one that handles the SVG field for storing, validating and displaying the SVG and play well with other modules providing a API that can modify the SVG, convert it to a bitmap for storing it as a conventional image and other useful functionalities. The other module provides a widget that can create or edit the SVG inside the Drupal interface with the help of svg-edit in the same way that the wysiwyg module does it for HTML and the options for configuring the interface of the editor. There is no need to modify svg-edit since it will work as other editor libraries.

To get the rendering of SVG right in most browsers I will use the svgweb library (http://code.google.com/p/svgweb/) as mentioned here http://johnflower.org/blog/drupal-needs-svg. Other ways of displaying the SVG will be supported like the direct download of a svg file or fetching a svg file from a URL for rendering.

The versions of the software I will work on will be Drupal 7 and svg-edit 2.5.1 with the possibility to integrate with later versions if there is enough time but the plan it to deliver a complete project with no sharp edges rather than ambitioning too much and not being able to document it so other users can benefit from it.

Profit for the Drupal project

1- Give Drupal a starting point into web vector graphics with a nice editor so not expert users can start using SVG and underlying set of API tools and documentation for implementing advanced functionality.

2- The possibility to have drawn content on drupal with open source software hosted on your site. And this is not limited to drawings because with svg-edit you can create advanced diagrams and other complex figures. Some applications that can use this can be a blackboard for e-learning solutions made in drupal, a slideshow creator, a mapping tool, theming sites with SVG background images or just a draw for fun website where artists can show their abilities.

Other work related

There is a image editor module (http://drupal.org/project/imageeditor) that has non working support for svg-edit since it relies on the bitmap-based image module. The other editors used by this module are closed source third party services (most based on Adobe flash) or outdated canvas-based tools. My project plans to cover some of this functionality by allowing to convert the SVG to a bitmap image (using Imagick for example).

Note that this project it's not aimed at generating SVG inside the code (i.e. drawing a chart based on some other data) like this 2007 proposal http://drupal.org/node/120260 (with its corresponding module http://drupal.org/project/drawing) and is more oriented at parsing the SVG data generated by svg-edit or other sources. Besides it is outdated, not maintained and it never had a release.

Project schedule

-May 21 - June 2
Meeting with mentors and read documentation and examples to understand the field api.
Create development enviroment and drupal.org sandboxes.
Define SVG field architecture, interface, its formatters and functions associated.

-June 3 - July 8
Look for some ways to validate the SVG to the 1.1 standard
Manage this display of SVG with svgweb library and check cross browser and mobile compatibility
Create some helper functions like converting the svg to bitmap.

-July 9 - August 13
Midterm evaluation
Look into svg-edit code for integration and look on how the wysiwyg and image editor do this.
Create configuration interface.
Deliver some working functionality for both modules
Promote the sandboxes to full project pages
Add simpletest
Add help and documentation

-August 14
Final changes based on community feedback.
Improve documentation, testing, additional third party module integration...
-August 24
Final evaluation

About me

My name is Rodrigo Aguilera Párraga. I'm on my third year of computer science studies at Universidad Rey Juan Carlos (Madrid, Spain). I've worked for two years as web developer at a small company and at the present moment I continue to carry on small web projects. I started using Drupal around 2007 for building web sites fast without needing to touch any code, and that have been my path since then, learning to use views and writing small modules, but I'm looking forward for this opportunity to finally diving into the code. I'm an active member in the Madrid drupal user community attending to meetings, giving free courses about drupal, giving support on IRC and helping to coordinate the drupalcamp Spain 2012 that is going to take place in Madrid for the first time.

I really believe in free software and I advocate for it whenever I can and this a chance for working on the project that I like most and the community get some advantages so I think is a win-win.