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

rodrigoaguilera's picture

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


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.


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.


I'm a late applicant for the

rodrigoaguilera's picture

I'm a late applicant for the gsoc, I found out just a few days ago. I spent the time writing the proposal but not looking for a mentor. I hope I get one and some feedback about the proposal

You are not alone with this idea!

josegaert's picture

Dear rodrigoaguilera,

I just recently began building exactly the same module that you are describing.


But I see that you have vastly more knowledge about writing code and drupal than I have, This is the first module that I ever write.

The reason that I began this module is because I want to use this as an adaptable blackboard for a new wikipedian-like education system that I envision, with that difference that all the teaching is based around the blackbord, with adapable pictures. This to is an idea that you express.

I'm very happy to meet somebody with the same idea!
So, I wonder if we could become partners in this project?

a great idea

nkelly's picture

this is a great idea, i would love to see svg integrated deeply in drupal, though this is not the immediate goal of the project. I can imagine how intuitive it could be to administer site structures, roles/permissions etc within system diagrams rather than the tabular interface; and various sorts of fantastic goodies an SVG theme could deliver to the educational user.

I'm a full-time parent and teaching artist, playing with drupal and various other CMS/LMS (mahoodle) with an interest in FOSS curriculum. Not sure I can contribute much tech know-how, but am certainly keen to see the direction this project goes.

I art, therefore I am.

I am not a coder but may be

diogene's picture

I am not a coder but may be you can ear a user request !?
I am looking for something simple a svg editor that is integrated inside the text editor (if possible) (I am using ckeditor, tried tinymce but had some problems with wisiwyg).
On my linux i use DIA wich is open source, may be you could use part of the engine to draw things.

I tryed svg-edit (google) but it doesn't work as i wish.
When I draw a line i want it to automaticaly connect to the container when the mouse goes over, the thickness of the objects must not be be changed directly.

Laurent Rouchairoles.

Svg-edit integrated.

josegaert's picture

Dear all,

I want to advertise my project,

It is still experimental and there are not yet any validations so it is vulnerable to XSS-attacks.

Installing this project gives you 3 modules.

  • Svg: Gives you a new field in which you can enter svg-code and it is rendered as an image.
  • Svgedit: Expands the svg-module to change your svg-picture with a very good open source web-based vector editor: svg-edit. This is the reason that I began this project.
  • Nounproject: Adds a new widget that allows the user to chose svg-images from the Noun Project website using the Noun Project search API.

I hope this can help you with some of your projects.

Very good idea!

OnkelTem's picture

I vote for these modules to be created and I'am ready to contribute.

aneganov d0t gm@l d.t com

Google Summer of Code 2012

Group organizers

Group notifications

This group offers an RSS feed. Or subscribe to these personalized, sitewide feeds:

Hot content this week