Skip to content
A jQuery plugin which allows you to easily wrap SVG elements with an HTML DOM interface, such that jQuery can work with them
CoffeeScript Shell
Find file
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.



Inspired by


SVG DOM elements have a different interface than other DOM elements, therefore rendering much of jQuery’s functionality useless against it

The snippet pasted in the referenced StackOverflow link did not work with Firefox 15, as it threw an error when accessing an SVG object property through prototypal inheritance, hence the get / set accessor defined for every vanilla SVG property.

The wrapper objects themselves only need be created once. They are reused by creating a new object, with the reference _svgEl defined, and __proto__ set to the wrapper object.

The wrapper wraps each SVG DOM element in a jQuery selection, causing them to emulate an HTML DOM interface, thereby rendering many jQuery methods such as addClass, hide, etc. functional again.

A study regarding which jQuery methods work with the wrapper, and which ones still don’t, has not been performed.

Requires a modern browser with JavaScript 1.8.5. Should work with the following browsers:

  • Firefox 4+
  • Internet Explorer 9+
  • Safari 5+
  • Chrome 5+


$("svg rect").wrapSvg().addClass("selected")


  • Original idea by Aleksandar Totic
  • Improvements by Tim Harper, Berton Earnshaw, with Red Brain Labs
Something went wrong with that request. Please try again.