Drupal needs SVG
Submitted by John on Thu, 18/02/2010 - 8:07pm
| Attachment | Size |
|---|---|
| svg_renderer.tar.gz | 957.33 KB |
Scalable Vector Graphics are part of the web standard - and I'd like to see them used more often. They are line drawings that can be enlarged without losing quality. The fonts on your screen are a similar format. Tap Ctrl + a few times and you'll see that the text still looks sharp (Ctrl 0 will restore your settings), yet my face becomes pixelated. You'll also see that the raven below keeps it's crispness. That is a benefit of SVG, along with smaller file sizes.
Internet Explorer doesn't support the format out of the box. Nor does Drupal. One work around is to install SVG Web. This library watches for IE browsers and serves them SVG through the Flash Shockwave player.
I propose creating a Drupal module that installs this library, and makes other modules aware of it. The basic install would:-
- Create a global block that embeds a call to the SVG Web library
- Update Drupal's core image modules to accept .svg and .svgz format files
To make the module more useful it'd work with:-
- WYSIWYGs (TinyMCE being my fav)
- Image module
- Image Assist
- Lightbox
- Thickbox
Possibly I could build on SWF Tools. This module solves the problem of display videos and music. It would be possible to add SVG support to it. Or use it as a starting point.
I've installed SVG Web and it seems to be working. Now I'll need to check with IE. SVG also supports animation, I've attached an SVG based Tetris game. Click on it to activate the controls.
If the game ends, refresh the page to play again :).SVG Renderer module exists! I've built a rough module, for Drupal 6.x, that contains the SVG Web library. I've attached it to the main post, above. It comes with two blocks that render SVG. One renders it as SVG for compatible browsers, and as Flash for IE. The other renders SVG using Flash for all browsers (useful if you want animation). Just pop the blocks in the header region, so that they load before your svg images.
I am taking it on faith that the module is working... I don't have IE to test with.
Documentation and polishing to come...
TinyMCE has no love for SVG. It will try and display SVG using Shockwave Player, but fails. As a workaround try disabling the media plugin.
Goto http://yourwebsite/admin/settings/tinytinymce
In the "TinyMCE init script for advanced mode" box and in the line starting with "plugins :" look for "media," and delete it. Click Save.
Have you looked at the fabulous Rafael library? I'd love to get that into Drupal.
http://raphaeljs.com/
Rafael, and other libraries such as Protovis and Graphviz, have some cool and useful effects. Unfortunately I'm not yet heading in that direction. If you're interested in developing something yourself:-
A module like http://drupalmodules.com/module/graphviz-filter may be a good starting point.
or:-
A graph API, Charts and Graphs
http://drupalmodules.com/module/charts-and-graphs
A Drawing API
http://drupalmodules.com/module/drawing-api
HTML5 Graphing Module
http://drupalmodules.com/module/visualize
I'm focusing on treating SVG as just another image type. My intent is to create a module which does not require any scripting knowledge. Users just create SVG using a GUI like Inkscape and upload it.
My next step is to comply with Drupal's regulations and upload it to drupal.org.
I've tested the SVG Web library using IE8. The first SVG image is rendered correctly using Flash. But the second, the Tetris game, doesn't show.
This also happens under FF if the Force Flash option is selected. So currently this module works for a single SVG image, but not multiple.
I'm going to read up about this at the SVG Web website and figure out how to fix this.
My brother-in-law Jamie, Technical Director at N-Squared Software, gave me the solution:-
Ok, a few things:
1/ you need to use the following syntax to embed the object:
<!--[if IE]> <object src="http://johnflower.org/sites/default/files/Ravens.svg" classid="image/svg+xml" width="200" height="200" id="mySVGObject2"> <![endif]--> <!--[if !IE]>--> <object data="http://johnflower.org/sites/default/files/Ravens.svg" type="image/svg+xml" width="200" height="200" id="mySVGObject2"> <!--<![endif]--> </object>Note the different use of 'classid' instead of 'type' for IE.
Importantly, ensure that the id attribute is different for every SVG element on your page, otherwise it'll fail to draw the right SVG object in the right page on the page.
Secondly, I don't know if it was important for firefox, but it will be for IE, you need to force drupal to include 'svg.js' first, as the first javascript include on the page. This is because svgweb overrides a bunch of core javascript functions (scary stuff what it does). You're including it some way down the page, well after other javascript is run. I don't know how to do this in drupal - I hope it's possible to force it to be the first in the
tag.Making these two changes made it work under firefox for me (forcing flash rendering).
Jamie
So my next mission is to find out how to get the javascript to load higher in the page. I'll take a look through some other Drupal modules and see how they do it.
The function I need is:-
drupal_add_js($data = NULL, $type = 'module', $scope = 'header', $defer = FALSE, $cache = TRUE, $preprocess = TRUE)More details at drupal.org.
hmm..all blog posts are for john, by john, on john's website. scary stuff. boo!?
i got out of one of the svgweb authors the link to a mediawiki zoom/pan beta plugin,
which is ok for intranet production wiki. but now latest svgweb (finally) changes
the ballgame, with a lot of refactoring and now works with the major
javascript libraries. anyway, both for wiki and drupal things get a bit
mkre interesting once you can put in (and render) simple SMIL animations
and links, and maybe even dynamic level of detail when zooming in.
svg is also possible to index in mediawiki during the upload. can same be
done in drupal? anyhow nice to see svg finally becoming more prolific, as
i've been evangelizing about it for years, with my svg unleashed book (bought
in 2004) being the eye opener...even though it's a bit dry reading.
good to see you're getting your feet wet with svg.
btw for all graphics work (including svg in inkscape) a graphics tablet is far
better than a mouse, even if you're as bad at art as me. i bought a wacom bamboo fun
tablet. gotta go, long typing on iphone is tiring.
for john, on john's website, by chris;)
I notice you commented on http://drupal.org/node/120260 and I wonder why you don't mention http://drupal.org/project/drawing. It has a generic renderer concept which is quite compatible with the Drupal7 page rendering concept and it also provides the architecture to render in alternative media (say drawing to a png).
sime
Just dipping my toe into the Drupal waters and svg was the second thing I wanted. Glad to find this, keep up the good work!
I had seen the Drawing module, but at the time I didn't understand how to use it. I may revisit it at some point. Being able to chose how the screen is rendered sounds useful. I also haven't looked at Drupal 7 yet so I can't comment on that either
Nicu has made a website entirely in SVG. It works, but has some drawbacks:-
1) It doesn't show up in google
2) I can't copy and paste text in the normal mouse drag and ctrl-c ctrl-v manner
The latter point is a render issue, yes?
Hi John,
Nice Blog and work actually.
I am interesting in doing a simple module that can read, manipulate, and display an .svg file in Drupal.
Any glues so that I can start?
many thanks
Truyenle
Displaying is easy. Manipulation.... well what do you want to do? There are some libraries such as Protovis, Graphvis, Rafael which do some forms of manipulation. But they require coding knowledge. There is an SVG editor that you can install quite simply see http://johnflower.org/blog/creating-svg-artwork-web.
The Drawing Module at http://drupal.org/project/drawing might also be useful.
Thank you John,
I have a bank of .svg files that I want to load it using php, than change the color, add link, etc, and display it on the fly.
<?php
$doc = new DOMDocument();
$doc = DOMDocument::load('sites/default/files/svg_data/testing.svg');
?>
I want to display the .svg file loaded through $doc object not from a file. So is there a way? I try to use
But then again, it is from a file not from $doc object. So instead of
data ="/sites/default/files/svg_temporary/testing.svg" => can it be data = something from $doc object?
Truyenle
Some the object tag doesn't display on my post
Try looking at using SVGs built in animation, eg like in the Tetris game above. For inspiration
http://www.w3.org/TR/SVG/animate.html
http://en.wikipedia.org/wiki/SVG_animation
And there are some examples at:-
http://srufaculty.sru.edu/david.dailey/svg/SVGAnimations.htm
Beyond that, I don't know enough to help you with what you've asked.
Hi, I would like to know more about that project. I was actually in a solution with Joomla but I am affraid that SVG won't run in Joomla. Could you give me your opinion on these two (JOOMLA vs DRUPAL)? Tell me where is that SVG project at ?
Thaks,
david
Hi David,
I spent about four hours looking at Joomla in December 2009. It did not meet my needs. However Joomla may meet yours. If you specified what you required from a CMS I could tell you whether Drupal fits your criteria.
My project integrates SVG Web into Drupal 6. The module I created is fully functional. With it, you can enable SVG on an entire Drupal website, or restrict it to selected pages.
Post new comment