SVG viewer

On Stackoverflow we can find some solutions on how to include an SVG picture into a web page and add some interaction options supported by the code in Javascript.

I selected the solution by Sven Liivak (Oct 6, 2018)

<html>
<h1>SVG viewer</h1>
<table bgcolor=lightskyblue width=90%>
<tr><td align=center>
<svg id="svgImage" width="900" height="500" viewBox="0 0 900 500">
  ... SVG picture
</svg>
<tr><td align=center>Touch the node or symbol to display its label.<br>
Touch the legend item to display cluster members, and click the legend item to turn the cluster on/off.<br>
Use the mouse position to select a location and the wheel to zoom in/out</tr><td>
</table>

<script>
// by Sven Liivak (Oct 6, 2018)
// https://stackoverflow.com/questions/52576376/how-to-zoom-in-on-a-complex-svg-structure
const svgImage = document.getElementById("svgImage");
const svgSize = {w:svgImage.clientWidth ,h:svgImage.clientHeight};
var oldScale = 1;

svgImage.onmousewheel = function(e) {
    e.preventDefault();
    
    var svgW     = svgSize.w,
        svgH     = svgSize.h,
        mX       = e.offsetX,
        mY       = e.offsetY,
        delta    = (e.wheelDelta) ? -e.wheelDelta : e.detail,
        newScale = oldScale + (oldScale*delta/1200); //1200: intensity

    var vb      = svgImage.getAttribute('viewBox').split(" ");
    var newW    = svgW * newScale,
        newH    = svgH * newScale,
        newX    = vb[0]*1 + (vb[2]*1 - newW) * (mX/svgW),
        newY    = vb[1]*1 + (vb[3]*1 - newH) * (mY/svgH);

    viewBox = { x:Math.round(newX), y:Math.round(newY), w:newW, h:newH };
    svgImage.setAttribute('viewBox', `${viewBox.x} ${viewBox.y} ${viewBox.w} ${viewBox.h}`);
    oldScale = newScale;
}
</script>
</html>

The svg tag has to contain <svg id=“svgImage” width=“900” height=“500” ….

There are different ways how to include an SVG picture in an HTML file. It seems that the only way to make the scheme work is to physically copy the picture into the template. This can be done with a short program.

> wdir <- "C:/Users/vlado/docs/papers/2023/mark/SVGviewer"
> setwd(wdir)
> makeSVGviewer <- function(svgFile,viewFile,width=0,height=0){
+   scr <- readLines("https://raw.githubusercontent.com/bavla/mark/main/R/script.txt")
+   svg <- readLines(svgFile)
+   i <- grep("<svg",svg)[1]
+   if(is.na(i)) {cat("bad SVG file\n"); return(NULL)}
+   head <- "<html>\n<h1>SVG viewer</h1>\n<table bgcolor=lightskyblue width=90%>\n<tr><td align=center>\n"
+   svgHead <- '<svg id="svgImage" '
+   if(width*height>0) svgHead <- paste(svgHead,'width=',width,' height=',height,sep="")
+   svg[i] <- gsub("<svg",svgHead,svg[i])
+   writeLines(c(head,svg,scr),viewFile)
+ }
> makeSVGviewer("tooltips2.svg","svgPajek.html",width=500,height=400)

I put the function makeSVGviewer on GitHub. To produce the HTML file we need two lines

> source("https://raw.githubusercontent.com/bavla/mark/main/R/SVGviewer.R")
> makeSVGviewer("tooltips2.svg","svgPajek.html",width=800,height=800)

Example 1; Example 2

This can be done also in the HTML file using Javascript - see W3schools or stackoverflow.

SVG viewer

URLs