Take the 2-minute tour ×

I have to create a online parking system that should work on desktop, Ipad and android. i have a .svg format map for parking area.

My question is: How can i render that map into browser and perform javascript tasks on each slot click.

I am developing the project using asp.net. Currently i am trying to convert .svg to canvas.

I am new to this graphical stuff and stuck with it for a while. Please help me with the better way or provide us a sample link for this approach.


share|improve this question
add comment

2 Answers

up vote 1 down vote accepted

The elements in a SVG are members of the DOM as well (if inserted as such), so selecting them with something like jQuery or document.querySelector() is no problem. However, not all browsers (< IE9) can handle the SVGs in their raw format (which disables this seamless JavaScript integration).

I did this in a recent project, and it worked like a charm.

Some things to consider when working with SVG on the web is first of all the size of the SVG. Large files tend to slow down everything, especially when applying JavaScript manipulation and events. More over, keep your SVG files as clean as possible. Some SVG software insert "XML noise"-nodes, which isn't necessary for the rendering and disables the raw format to be inserted into the DOM.

What you should do to integrate the SVGs to the DOM, is to load the contents of the SVG file to a present DOM node. I did this with JavaScript, but the method shouldn't matter for the output.


   <div class="svg-node" data-svg-file="/images/file.svg"></div>

And load them up with jQuery and attach event handlers;

$(document).ready(function () {

    var svgFile = $('.svg-node').attr('data-svg-file');

        'url': svgFile,
        'type': 'get',
        'dataType': 'text',
        'success': function (svgContent) {

            $('.svg-node #an-elements-id').on('click', handleEvent);



Unfortunately, most web browsers have some problems with this approach. SVG groups can't be handled through the DOM and you can't attach any node attribute you wish -- only a few are supported.

But all in all, it's a straight forward and easy implementation and it work's in most browsers.

share|improve this answer
Yeah I tried your approach to bind events to svg file. its working. Thanks. –  Monie corleone Oct 5 '12 at 13:26
Hi Björn,One query. now i have parking.svg map loaded. when the car is parked in the slot, i have to change that slot to car image. I there any best way to do it without disturbing the axis. because when i load the car content, it will be drawn in the axis that maintained in car.svg file obviously. currently I am changing the color of the slot using fill. but i want to load the car image in that position. –  Monie corleone Oct 8 '12 at 6:58
@Moniecorleone - Since it's SVG, you can simply just attach another set of nodes into the existing structure (think of it as layers). So you can load another SVG file via JavaScript, and just append it to existing document. –  Björn Oct 8 '12 at 7:45
Hi Björn, I have a site that uses svg file to show the floorview. I have bind the JavaScript events and manipulation to it. the site is fully completed and its working like a charm in my desktop and android device. However, when browse it through ipad it tends to slow down almost everything. other than svg i use third party js like jsplumb.js and jquery alerts.js in my page. I cleaned the svg file using the svg cleaner software. before cleanup the svg size was 742kb and after cleanup the size is 500 kb. Still no luck in IPad. Can u please lemme know what approach u followd for larger svg file? –  Monie corleone Oct 23 '12 at 4:57
@Moniecorleone - I never used a file that large, but I did have two SVGs layered over another. I think the file sizes were about 100kb and 70kb. Are you sure you cannot shrink them further? 500kb sounds like awfully a lot. You can open a SVG in any text editor to see if there are any unused elements and then remove them (like <g>). –  Björn Oct 23 '12 at 6:19
add comment

Here's a tutorial for how to add event handling to SVG graphics

share|improve this answer
add comment

Your Answer


