Question

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.

Thanks

Answer 1

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.

Example;

...
   <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');

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

            $('.svg-node').html(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.