A while ago I’ve started working with SVG. I’ve been hooked. SVG is a nice format. Creating SVGs with Inkscape works like a charme.

Only recently I’ve started including SVGs (Embedded with the object-element. See carto.net for more.) in HolonWiki, the wiki where I store information for my ‘Diplomarbeit’.

Soon thereafter I noticed that it would be nice to be able to resize the SVG-graphics included on a page. I first thought about a server-side solution. Like changing the SVG after uploading. PHP with simpleXML would make this easy. Surely there must be a better way, though.

Yesterday I realized that JavaScript could be the solution. I’ve found a script that resizes and moves images: From Dynatable demo. That script is quite hard-wired, though.

I extended it to being able to move and resize any element (I’d suppose it must be a blocklevel-element for that matter, though.) Furthermore the handles to move and resize the element are created via JavaScript and do not have to be included in the html-source: Have a look at svg.js. This is the script that runs the example above (If you are using Opera. Please see the conclusion below.)

What does the script do?

Each element that should be resizable will need an id. Via the addItem-function one registers that element (giving the id as parameter).

The script then creates handles for resizing (bottom right) and moving (top left) that element. The function beginDrag is registered as a listener to mousedown-events. In that function it is determined whether the element should be resized or moved (depending on what handle was clicked (i.e. fired the event)).

The doDrag-function will take care of following mousemove-events. The endDrag-function will react on release of the mouse-button and finish the job.

I’ve included the following additional CSS to my setup:

object{width:400px;height:400px}
.handle{border:1px solid #666;background-color:#ddd;width:10px;height:10px;z-index:100}
.handle:hover{background-color:#666}

IE won’t handle the last rule and therefore won’t show a hovering-effect on the handles. I thought about using an a-element instead of a div so that IE would react on that rule but decided against it.

So what I did to ‘enable’ the example above was:

<object type="image/svg+xml" id="bounce" data="http://www.gungfu.de/facts/uploads/bouncingCubes.svg" style="width:200px;height:200px;float:right">some fallback-text goes in here</object>
<script type='text/javascript'>addItem("bounce");</script>

Conclusion

This script is much more flexible than the original one – actually it can be regarded as inspiration only.
It is possible to register several elements on a single page to be resize- and moveable.

Restrictions and problems

The script only works with Opera. Quite smoothly, though. I couldn’t get it to work in IE and Mozilla/Firefox.

It might be an issue with event-listeners in IE. I am not sure, though.

I don’t have a glue on what causes problems in Firefox.

I’ve tried to code cross-browser. I did the best I could. There are several functions included in the .js that take account for differences between browsers gracefully. I am not as firm with JavaScript as beeing able to take care of all the peculiarities that would have to be considered.

Addition

If the example is not working for you on this page, please try a separate page I’ve put up.

Surely this script is just a start. There’s a lot to improve…

Verwandte Artikel

• Purple Numbers (for Wordpress) (6)
• Making Gobans – creating lines and hoshi (2)
• Adobe’s SVG plugin (3)
• XTHML strict-konformes Öffnen in neuem Fenster (0)
• Wikifying a Wordpress blog (0)
• Why XHTML? revised (0)
• Why XHTML? (1)
• Why use Firefox? Get Opera! (24)