SVG Example

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <style>
    body { margin:0;top:0;right:0;bottom:0;left:0; }
    #flexcont{
      display:flex;
    }
    
    #svgcont{
      flex:1;
    }
    
    #htmlcontent{
      flex:1;
    }
    
    #htmlcontent div{
      display:block;
    }
    
    
  </style>
</head>
<div id="flexcont">
  <div id="svgcont">
<svg width="500px" height="500px">
  <circle id="face" r=230 cx=250 cy=250 fill="yellow" stroke=black stroke-width=10px></circle>
  <circle id="lefteye" r=10 cx=180 cy=150 fill="black" stroke=black stroke-width=10px></circle>
  <circle id="righteye" r=10 cx=320 cy=150 fill="black" stroke=black stroke-width=10px></circle>
  <path id="mouth" d="M120,280 C100,400  400,400  380,280" fill="none" stroke="#000" stroke-width="8px"></path>
</svg>
  </div>
  <div id="htmlcontent">
    <h4>SVG Content:</h4>
  </div>
</div>
<body>
  <script>
    //https://thenewcode.com/assets/images/thumbnails/homer-simpson.svg
    
    console.log(d3.select('svg'),d3.select('svg').html().split('\n'))
    var htmllines = d3.select('#svgcont').html().split('\n');
    
    var div = d3.select("#htmlcontent")
		
    //render an initial container for the svg. 
    var svgcont = div.append('div')
    
    var htmltext = div.selectAll('div').data(htmllines)
    htmltext.enter()
      .append("div")
    	.style('padding-left',function(d,i){
      	if(i <= 1 || i >= htmllines.length -2){return 0}
      	else{return '20px'}
    	})
      .text((d)=>{return d})
    	.style('display','block')
	
    d3.select("#face").on('mouseover',function(){
     d3.select("#htmlcontent").selectAll('div').style('opacity',function(d,i){
        	if(i==2){return 1}
        else{return .4}
      })
    })
    
    d3.select("#lefteye").on('mouseover',function(){
     d3.select("#htmlcontent").selectAll('div').style('opacity',function(d,i){
        	if(i==3){return 1}
        else{return .4}
      })
    })
    
    d3.select("#righteye").on('mouseover',function(){
     d3.select("#htmlcontent").selectAll('div').style('opacity',function(d,i){
        	if(i==4){return 1}
        else{return .4}
      })
    })
   	
    d3.selectAll("#face, #righteye, #lefteye, #mouth")
    	.on('mouseout',function(){
      d3.select("#htmlcontent").selectAll('div').style('opacity',function(d,i){
        	return 1
      })
    })
    
    
    
    d3.select("#mouth").on('mouseover',function(){
     d3.select("#htmlcontent").selectAll('div').style('opacity',function(d,i){
        	if(i==5){return 1}
        else{return .4}
      })
    })
    
  </script>
</body>

https://d3js.org/d3.v5.min.js