CODEWITHSUNDEEP
jqueryhtmlsvg
422
422

Reputation: 5770

cross browser SVG > HTML

Peter Collingridge , a very well respected Stack Overflow member has produced our SVG that we asked about on Stack, from imagery supplied.

You can see it working here: [ removed link ]

Now I have trawled around all day, trying to find the best means for converting this to html, so that we may add events and actually embed it within our html. Whilst I realise it can be embedded straight into the latest browsers, and apparently ie 9 is now compatible with svg being upgraded from their vml.

I have looked at svgweb , keith wood and codedread raphael and also Ample.

I just cannot replicate exactly what we want in html, across all browsers, esp: ff , chrome and ie 8 +

Can anyone point me in the right direction. Further I have never ever worked with svg files, and so have no idea how I can add onclick and event handlers to each of the elements you see in the sample.

Any help appreciated please.

The site it will run on uses jQuery library if thats of any help.

Upvotes: 0

Views: 1438

Answers (2)

Peter Collingridge
Peter Collingridge

Reputation: 10979

I've emailed directly, but if anyone else is interested in integrating SVG into HTML, this was my approach.

Adding onclick events to SVG

As Soumya92 says, you can add these directly into SVG elements, as in:

<path onclick="alert('Alert!');"/>

For more complex function, you can add ECMASscript (essentially Javascript) into the SVG. For example.

<svg>
 <script type="text/ecmascript"> 
    <![CDATA[
      function myfunction(evt){
        alert(evt.target.getAttributeNS(null, "alert_text"));
      }
    ]]>
  </script>

  <path id="my_path" alert_text="Alert!" onclick="myfunction(evt)" d="..."/>
</svg>

To call javascript functions that exist in the HTML call:

top.myfunction()

Manipulating SVGs from HTML Embed the SVG in the HTML with:

<embed name="mySVG" src='svg_filename.svg'></embed>

Make sure the HTML and SVG are in the same folder otherwise Javascript won't be able to access it. To access the SVG element with Javascript add a function to the HTML script element:

function ready(){
    svgdoc = document.svg_map.getSVGDocument();
    svgRoot = svgdoc.documentElement;
}

And call this within the SVG with:

function init(evt) {
     top.ready()
}

And call this within the SVG element itself, e.g.

<svg
  xmlns:svg="http://www.w3.org/2000/svg"
  xmlns="http://www.w3.org/2000/svg"
  version="1.2"
  onload="init(evt)">

Finally, you can now select and manipulate the SVG elements. For example:

svgdoc.getElementById('my_path').setAttributeNS(null, "fill", "#ff0000");

I think that should cover most basic options. It definitely works with the most recent version of Firefox. It should work for Chrome, but only if the files on a web server - if they're just on your computer then it blocks Javascript from accessing one file from another. I can't vouch for other browsers.

Upvotes: 1

user228534
user228534

Reputation:

Regular handlers like onclick seem to work fine. Just add something like 

<path onclick="alert('Text here');">
    ...
</path>

Firefox Nightly, Internet Explorer 9, and Chrome support this just fine. Safari 5 on Windows does not render the SVG at all.

Upvotes: 0

Related Questions