Rendering SVG file in html page

Question

I have one SVG file that I have to show it in webpage. SVG files contains some links, on clicking links, page should be opened in new window.

1) If I use img tag like

<img id="zoom_mw" src="NC_013929_Annotation_details.svg" alt="The CRISPRmap" 
     data-zoom-image="NC_013929_Annotation_details.svg">

I am not able to click the links.

2) To overcome this problem I am using

<object type="image/svg+xml" data="NC_013929_Annotation_details.svg"></object>

I am able to click links.

But here the problem comes, Image should be rendered into a div of width 815px and height 815px. If I use img tag it is perfectly rendering but if I use object tag, full image is loading. Image is normally huge file may be 4500px width and height. I will use zoom feature to show user image clearly.

I need to solution to render SVG into a div of height and width 815px and links in svg file should be clickable. I am using HTML4, I cannot upgrade to HTML5.

Answer 1

You can load your svg file as the innerHTML of your DIV as XML using XMLHttpRequest Then compute the viewBox of the svg so it fills the DIV and is aligned top/bottom plus left/right, maintainig aspect ratio. To do this you must be able to get the svg element via it id or tag name After its loaded you should then be able to link svg elements directly to open windows as needed.

I tested the following in HTML 4.0 strict with the broswers IE11/CH31/FF23 and it works nicely.

function loadSVGasXML()
{
    var SVGFile="mySVGFile.svg"

    var loadXML = new XMLHttpRequest;
    function handler()
    {
        if(loadXML.readyState == 4)
        {
            if (loadXML.status == 200) //---loaded ok---
            {
                var xmlString=loadXML.responseText
                svgDiv.innerHTML=xmlString
                /*  to get id
                var parser = new DOMParser();
                XMLDoc=parser.parseFromString(xmlString,"text/xml").documentElement ;
                SVGId=XMLDoc.getAttribute("id")
                */
                fitSVGinDiv()
            }
        }
    }
    if (loadXML != null)
    {
        loadXML.open("GET", SVGFile, true);
        loadXML.onreadystatechange = handler;
        loadXML.send();
    }
}


function fitSVGinDiv()
{
    var divWH=815

    //var mySVG=document.getElementById(SVGId)
    //---or if no id---
    var mySVG=document.getElementsByTagName("svg")[0]
    var bb=mySVG.getBBox()
    var bbw=bb.width
    var bbh=bb.height

    //--use greater of bbw vs bbh--
    if(bbw>=bbh)
    var factor=bbw/divWH
    else
    var factor=bbh/divWH

    var vbWH=divWH*factor

    var vbX=(bbw-vbWH)/2
    var vbY=(bbh-vbWH)/2

    mySVG.setAttribute("viewBox",vbX+" "+vbY+" "+vbWH+" "+vbWH)

    mySVG.setAttribute("width","100%")
    mySVG.setAttribute("height","100%")

}

Answer 2

If there's a difference in what content loads, that suggests you have some image that you reference from the svg file. Any such external references will be blocked by the browsers due to security restrictions when you use <img> for embedding the svg. However, the same svg will load all such resources when you use <object>.

If the difference is visible size, then this is perhaps a CSS problem, in which case tweaking the css until you get the svg to display at 815x815px should be enough. It is however possible that you need to add a viewBox attribute (set it to 0 0 815 815 if that's your coordinate system) to get the svg to automatically scale to the given css viewport.

Answer 3

You can use an svg tag and put it in an embed tag.

To scale your svg you can add attributes to the svg tag like so.

 <svg version="1.1" id="Container" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  x="0px" y="0px" width="1920px" height="1000px" viewBox="0 0 1920 1000" enable-background="new 0 0 1920 1000" xml:space="preserve">

This would scale your svg to 1920 x 1000.

In order to insure your links are clickable you can add an onclick attribute to the svg group you want to make clickable and have it call a javascript function that open the new window.

<g onclick="open_link('http://stackoverflow.com')">
   <!-- Your SVG geometry to click on goes here -->
</g>

function open_link(url)
{
  var win=window.open(url, '_blank');
  win.focus();
}

Whether the link will open in a new tab or a window is browser setting specific and you can't control it. Whether or not the svg will be rendered well or even at all is also browser specific. In my experience Chrome is best at rendering svg's followed by the recent versions of IE, Firefox is OK and Safari is slow (especially on transformations and redraws if you do those).