I have an image in the format .svg like the one below.

I want to make a webpage where the user can interact with a image like this, but with more nodes. The structure will be similar to a tree.

Is it possible to interact with this .svg image directly, using javascript/html/css?

If so, how?

Note: By interact I mean being able to click on the nodes -and the webpage recognizing it- and when one node is selected the color of the other nodes change.

Note2: I just have the .svg file, I don't know if I'm able to define this as a inline svg on html.

Note3: This image will have many nodes (80+), so I would rather not having to define a clickable area for each one of them and so on... But if this is the only solution, no problem.

Edit: Here is the content of my .svg file:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 ".1/DTD/svg11.dtd">
<!-- Generated by graphviz version 2.38.0 (20140413.2041)
 -->
<!-- Title: g Pages: 1 -->
<svg width="134pt" height="116pt"
 viewBox="0.00 0.00 134.00 116.00" xmlns="" xmlns:xlink="">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 112)">
<title>g</title>
<polygon fill="white" stroke="none" points="-4,4 -4,-112 130,-112 130,4 -4,4"/>
<!-- a -->
<g id="node1" class="node"><title>a</title>
<ellipse fill="none" stroke="black" cx="27" cy="-90" rx="27" ry="18"/>
<text text-anchor="middle" x="27" y="-86.3" font-family="Times New Roman,serif" font-size="14.00">a</text>
</g>
<!-- b -->
<g id="node2" class="node"><title>b</title>
<ellipse fill="none" stroke="black" cx="27" cy="-18" rx="27" ry="18"/>
<text text-anchor="middle" x="27" y="-14.3" font-family="Times New Roman,serif" font-size="14.00">b</text>
</g>
<!-- a&#45;&gt;b -->
<g id="edge1" class="edge"><title>a&#45;&gt;b</title>
<path fill="none" stroke="black" d="M27,-71.6966C27,-63.9827 27,-54.7125 27,-46.1124"/>
<polygon fill="black" stroke="black" points="30.5001,-46.1043 27,-36.1043 23.5001,-46.1044 30.5001,-46.1043"/>
</g>
<!-- c -->
<g id="node3" class="node"><title>c</title>
<ellipse fill="none" stroke="black" cx="99" cy="-18" rx="27" ry="18"/>
<text text-anchor="middle" x="99" y="-14.3" font-family="Times New Roman,serif" font-size="14.00">c</text>
</g>
<!-- b&#45;&gt;c -->
<g id="edge2" class="edge"><title>b&#45;&gt;c</title>
<path fill="none" stroke="black" d="M54,-18C56.6147,-18 59.2295,-18 61.8442,-18"/>
<polygon fill="black" stroke="black" points="61.9297,-21.5001 71.9297,-18 61.9297,-14.5001 61.9297,-21.5001"/>
</g>
</g>
</svg>

I have an image in the format .svg like the one below.

I want to make a webpage where the user can interact with a image like this, but with more nodes. The structure will be similar to a tree.

Is it possible to interact with this .svg image directly, using javascript/html/css?

If so, how?

Note: By interact I mean being able to click on the nodes -and the webpage recognizing it- and when one node is selected the color of the other nodes change.

Note2: I just have the .svg file, I don't know if I'm able to define this as a inline svg on html.

Note3: This image will have many nodes (80+), so I would rather not having to define a clickable area for each one of them and so on... But if this is the only solution, no problem.

Edit: Here is the content of my .svg file:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Generated by graphviz version 2.38.0 (20140413.2041)
 -->
<!-- Title: g Pages: 1 -->
<svg width="134pt" height="116pt"
 viewBox="0.00 0.00 134.00 116.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 112)">
<title>g</title>
<polygon fill="white" stroke="none" points="-4,4 -4,-112 130,-112 130,4 -4,4"/>
<!-- a -->
<g id="node1" class="node"><title>a</title>
<ellipse fill="none" stroke="black" cx="27" cy="-90" rx="27" ry="18"/>
<text text-anchor="middle" x="27" y="-86.3" font-family="Times New Roman,serif" font-size="14.00">a</text>
</g>
<!-- b -->
<g id="node2" class="node"><title>b</title>
<ellipse fill="none" stroke="black" cx="27" cy="-18" rx="27" ry="18"/>
<text text-anchor="middle" x="27" y="-14.3" font-family="Times New Roman,serif" font-size="14.00">b</text>
</g>
<!-- a&#45;&gt;b -->
<g id="edge1" class="edge"><title>a&#45;&gt;b</title>
<path fill="none" stroke="black" d="M27,-71.6966C27,-63.9827 27,-54.7125 27,-46.1124"/>
<polygon fill="black" stroke="black" points="30.5001,-46.1043 27,-36.1043 23.5001,-46.1044 30.5001,-46.1043"/>
</g>
<!-- c -->
<g id="node3" class="node"><title>c</title>
<ellipse fill="none" stroke="black" cx="99" cy="-18" rx="27" ry="18"/>
<text text-anchor="middle" x="99" y="-14.3" font-family="Times New Roman,serif" font-size="14.00">c</text>
</g>
<!-- b&#45;&gt;c -->
<g id="edge2" class="edge"><title>b&#45;&gt;c</title>
<path fill="none" stroke="black" d="M54,-18C56.6147,-18 59.2295,-18 61.8442,-18"/>
<polygon fill="black" stroke="black" points="61.9297,-21.5001 71.9297,-18 61.9297,-14.5001 61.9297,-21.5001"/>
</g>
</g>
</svg>

• javascript
• html
• css
• svg

• If you know nothing at all, you should probably start with a book rather than a really general question. Try this w3.org/Graphics/SVG/IG/resources/svgprimer.html – Robert Longson Commented Jun 19, 2015 at 15:00
• Thanks for your suggestion. So far I'm just looking at how complex would it be to interact with the svg image. I'm not even sure if I'll really do what I have in mind. Also, what I plan to do isn't really complex, I just need to somehow know which nodes are selected and change the color of some nodes based on that. After looking at @Paulie_D code, I might give it a try this weekend. :) – Xaphanius Commented Jun 19, 2015 at 15:15

4 Answers 4

The SVG would need to be inline to have interaction on a page. If you embed an image then the image (.svg) is treated as a single object. For the inline SVG each node should have a separate ID if you want to select them individually.

Here's one I created for another answer.

svg {
  display: block;
  width: 20%;
  margin: 25px auto;
  border: 1px solid grey;
  stroke: #006600;
}
#buttons polygon:hover {
  fill: orange;
}
#buttons rect:hover {
  fill: blue
}
#center {
  fill: #00cc00;
}
#top {
  fill: #cc3333;
}
#right {
  fill: #663399;
}
#left {
  fill: #bada55;
}

<svg viewbox="0 0 100 100">
  <g id="buttons">
    <rect id="center" x="25" y="25" height="50" width="50" />
    <polygon id="top" points="0,0 100,0 75,25 25,25" />
    <polygon id="right" points="100,0 75,25 75,75 100,100" />
    <polygon id="bottom" points="0,100 25,75 75,75 100,100" />
    <polygon id="left" points="0,0 25,25 25,75 0,100" />
  </g>
</svg>

You don't necessarily need to have the svg inline, you could have it in an object tag.

So the html would look like...

   <div id="svgdiv">
     <object id="svgobject" data="objectclicktest.svg"></object>
   </div>

and correspending js

    var mySvg = document.getElementById("svgobject").contentDocument.querySelectorAll('svg');

    var myNodes = mySvg[0].querySelectorAll('.node');

    for( var i = 0; i < myNodes.length; i++ ) {
            myNodes[i].addEventListener('click', changeStyle );
    }

    function changeStyle() {
            this.style.fill="blue";
    }

Example Click on letters and they should go blue. Note, (I don't think this would work in a setup like a fiddle though)

inline svg elements can interact like other html elements, you can set css rules on them and apply js on them too, you dont need areas

svg is a markup language, meaning that you can use css selector libraries such as jquery to interact with the given svg. You can query the svg in order to get an element by its id, or get an array of elements selected by class. You can attach event handlers to them such as click, mouseover, mouseenter, etc. You can even style them with css.