| Pros | Compact | Cons | Browser support |
|---|---|---|---|
| Easy to understand and author | More limited than script | ||
| Doesn't require scripting |
Let's see a simple example.
Given an animation element 'a':
a.beginElement()a.beginElementAt()a.endElement()a.endElementAt()Note that these methods return a boolean which will be false if the call failed for some reason.
animate element:
svgroot.unpauseAnimations()svgroot.pauseAnimations()svgroot.setCurrentTime()svgroot.getCurrentTime()By using the FakeSMILe script authors can keep using SMIL in their svg documents, and still have most of it work properly across browsers. However, it has a few drawbacks:
]]>
By using discard you can throw away parts of your document without using scripting.
Loading...
]]>
Elements where contentDocument can be used:
animation, foreignObject, iframe, embed, object.
function changeBannerText() {
var a1 = document.getElementById("a1");
var animDoc = a1.contentDocument;
...
}
Most of the SVG 1.1 DOM methods are implemented in Opera, Safari and Firefox. Here's a little known helper, the SVGURIReference interface:
a.href.baseVal = "http://opera.com";
a.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "http://opera.com");
One excellent resource for freely available svg examples is codedread.com, and I decided to try out the dragging js library for my example.
The dragging library generates custom events for dragging, and sets up the appropriate listeners for any element you add drag:enable="true" on. This makes it very easy to use.
However, if you need other scripts to also do things with mouseevents the dragging library code may need to be modified.
...
...
Enough code, let's see what it can do!
Sometimes it's nice to be able to easily inspect or print values from SVG types, here are a few helpers that enables alerting or string printing directly from a given type.
The toString method will be automatically called if necessary, so you can for example write alert(mysvgrect) to get the string alerted.
Trying to make effects on 'g' elements can be tricky since 'mouseover' and 'mouseout' events bubble from elements inside the 'g' element. I thought about this and came up with a workaround. The trick is to filter the events based on where they came from. The drawback of this is that it requires script to do the filtering, I haven't yet figured out a way to do a pure SMIL solution.
...
]]>This simple colorpicker offers a way of quickly adding a colorpicker to any svg file. It tries to provide a non-scalable palette so that irregardless of viewBox and viewport it always appears at the size in pixels that was given when creating an instance of the picker. The picker can be overlayed on top of html or svg, and that is automatically handled. It also provides some utility methods for converting colors from the HSV and HSL colorspaces to RGB.
Example of how to use the colorpicker object
]]>
It was a call from Karl Dubost that prompted the creation of the colorpicker, so that a world map could be colorized and associated with custom data. Click here to see the first draft.
The map comes from wikimedia commons, and was originally weighed in at around 1.5Mb. Simple processing trimmed the size down to half, with an acceptable loss of precision. The benefit of being able to export the colorized map in a vector format, directly in the browser, without other external dependencies than the few scripts and the map itself was a goal from the start. Since the map is large it's not something you want to pass back and forth to a server. However, the stylesheets can easily be sent to a server and are of course very compact in comparison to the map as a whole.
It's possible to create multiple instances of the colorizer, as can be seen here. The addition of a simple messagebox script allows the country name to be shown when hovering a country, which may come in handy. Click here to see this in action.
Other suggestions for future enhancements:
The license is open and allows anyone to continue working on this.