In my latest project, I want to create a small web element using D3.js. In this element, I want to make use of images defined as .svg files. This is quite trivial if I load in the .svg file from an external link.
My question: Instead of loading in the file via a link, it is possible to define it somewhere inline (see example below). But is it also possible to manipulate this svg afterwards (re-scale, translate, etc.) as I could do with an image I loaded from an external source? If so, how?
I have also create a jsfiddle for this question: https://jsfiddle.net/jyqasm58/3/. You can also run the code below: the upper nested circle is the one loaded from an external source, and the one I defined inline (much larger) is displayed below. I am quite a noob when it comes to HTML and JavaScript, so I apologize in advance for any obvious solutions or problems I did not see.
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="An example">
<title>An example</title>
<script src="https://unpkg.com/mathjs/lib/browser/math.js"></script>
<script src="https://d3js.org/d3.v5.min.js"></script>
<style>
</style>
</head>
<!-- Create a div where the graph will take place -->
<div id="my_dataviz">
<svg id="canvas" xmlns="http://www.w3.org/2000/svg" style="background-color:#ffffff">
<defs>
<g id="pointer" transform="scale(0.5)">
</g>
</defs>
</svg>
</div>
<!-- This is the inline definition of my svg -->
<svg width="550" height="550" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" overflow="hidden">
<defs>
<clipPath id="clip0"><rect x="973" y="426" width="550" height="550"/></clipPath>
<linearGradient x1="1248" y1="426.25" x2="1248" y2="975.75" gradientUnits="userSpaceOnUse" spreadMethod="reflect" id="stroke1"><stop offset="0" stop-color="#FFC000"/><stop offset="0.0052356" stop-color="#FFBF00"/><stop offset="0.0104712" stop-color="#FFBF00"/><stop offset="0.0157068" stop-color="#FFBF00"/><stop offset="0.0209424" stop-color="#FFBF00"/><stop offset="0.026178" stop-color="#FFBF00"/><stop offset="0.0314136" stop-color="#FFBF00"/><stop offset="0.0366492" stop-color="#FFBF00"/><stop offset="0.0418848" stop-color="#FFBF00"/><stop offset="0.0471204" stop-color="#FFBF00"/><stop offset="0.052356" stop-color="#FFBF00"/><stop offset="0.0575916" stop-color="#FFBF00"/><stop offset="0.0628272" stop-color="#FFBE00"/><stop offset="0.0680628" stop-color="#FFBE00"/><stop offset="0.0732984" stop-color="#FFBE00"/><stop offset="0.078534" stop-color="#FFBE00"/><stop offset="0.0837696" stop-color="#FFBE00"/><stop offset="0.0890052" stop-color="#FFBD00"/><stop offset="0.0942408" stop-color="#FFBD00"/><stop offset="0.0994764" stop-color="#FFBD00"/><stop offset="0.104712" stop-color="#FFBD00"/><stop offset="0.109948" stop-color="#FFBC00"/><stop offset="0.115183" stop-color="#FFBC00"/><stop offset="0.120419" stop-color="#FFBC00"/><stop offset="0.125654" stop-color="#FFBC00"/><stop offset="0.13089" stop-color="#FFBB00"/><stop offset="0.136126" stop-color="#FFBB00"/><stop offset="0.141361" stop-color="#FFBB00"/><stop offset="0.146597" stop-color="#FFBA00"/><stop offset="0.151832" stop-color="#FFBA00"/><stop offset="0.157068" stop-color="#FFBA00"/><stop offset="0.162304" stop-color="#FFB900"/><stop offset="0.167539" stop-color="#FFB900"/><stop offset="0.172775" stop-color="#FFB800"/><stop offset="0.17801" stop-color="#FFB800"/><stop offset="0.183246" stop-color="#FFB800"/><stop offset="0.188482" stop-color="#FFB700"/><stop offset="0.193717" stop-color="#FFB700"/><stop offset="0.198953" stop-color="#FFB600"/><stop offset="0.204188" stop-color="#FFB600"/><stop offset="0.209424" stop-color="#FFB500"/><stop offset="0.21466" stop-color="#FFB500"/><stop offset="0.219895" stop-color="#FFB400"/><stop offset="0.225131" stop-color="#FFB400"/><stop offset="0.230366" stop-color="#FFB300"/><stop offset="0.235602" stop-color="#FFB300"/><stop offset="0.240838" stop-color="#FFB200"/><stop offset="0.246073" stop-color="#FFB200"/><stop offset="0.251309" stop-color="#FFB100"/><stop offset="0.256545" stop-color="#FFB100"/><stop offset="0.26178" stop-color="#FFB000"/><stop offset="0.267016" stop-color="#FFAF00"/><stop offset="0.272251" stop-color="#FFAF00"/><stop offset="0.277487" stop-color="#FFAE00"/><stop offset="0.282723" stop-color="#FFAE00"/><stop offset="0.287958" stop-color="#FFAD00"/><stop offset="0.293194" stop-color="#FFAC00"/><stop offset="0.298429" stop-color="#FFAC00"/><stop offset="0.303665" stop-color="#FFAB00"/><stop offset="0.308901" stop-color="#FFAA00"/><stop offset="0.314136" stop-color="#FFAA00"/><stop offset="0.319372" stop-color="#FFA900"/><stop offset="0.324607" stop-color="#FFA800"/><stop offset="0.329843" stop-color="#FFA800"/><stop offset="0.335079" stop-color="#FFA700"/><stop offset="0.340314" stop-color="#FFA600"/><stop offset="0.34555" stop-color="#FFA500"/><stop offset="0.350785" stop-color="#FFA500"/><stop offset="0.356021" stop-color="#FFA400"/><stop offset="0.361257" stop-color="#FFA300"/><stop offset="0.366492" stop-color="#FFA200"/><stop offset="0.371728" stop-color="#FFA100"/><stop offset="0.376963" stop-color="#FFA100"/><stop offset="0.382199" stop-color="#FFA000"/><stop offset="0.387435" stop-color="#FF9F00"/><stop offset="0.39267" stop-color="#FF9E00"/><stop offset="0.397906" stop-color="#FF9D00"/><stop offset="0.403141" stop-color="#FF9D00"/><stop offset="0.408377" stop-color="#FF9C00"/><stop offset="0.413613" stop-color="#FF9B00"/><stop offset="0.418848" stop-color="#FF9A00"/><stop offset="0.424084" stop-color="#FF9900"/><stop offset="0.429319" stop-color="#FF9800"/><stop offset="0.434555" stop-color="#FF9700"/><stop offset="0.439791" stop-color="#FF9600"/><stop offset="0.445026" stop-color="#FF9500"/><stop offset="0.450262" stop-color="#FF9400"/><stop offset="0.455497" stop-color="#FF9400"/><stop offset="0.460733" stop-color="#FF9300"/><stop offset="0.465969" stop-color="#FF9200"/><stop offset="0.471204" stop-color="#FF9100"/><stop offset="0.47644" stop-color="#FF9000"/><stop offset="0.481675" stop-color="#FF8F00"/><stop offset="0.486911" stop-color="#FF8E00"/><stop offset="0.492147" stop-color="#FF8D00"/><stop offset="0.497382" stop-color="#FF8C00"/><stop offset="0.502618" stop-color="#FF8B00"/><stop offset="0.507853" stop-color="#FF8A00"/><stop offset="0.513089" stop-color="#FF8900"/><stop offset="0.518325" stop-color="#FF8800"/><stop offset="0.52356" stop-color="#FF8600"/><stop offset="0.528796" stop-color="#FF8500"/><stop offset="0.534031" stop-color="#FF8400"/><stop offset="0.539267" stop-color="#FF8300"/><stop offset="0.544503" stop-color="#FF8200"/><stop offset="0.549738" stop-color="#FF8100"/><stop offset="0.554974" stop-color="#FF8000"/><stop offset="0.560209" stop-color="#FF7F00"/><stop offset="0.565445" stop-color="#FF7E00"/><stop offset="0.570681" stop-color="#FF7C00"/><stop offset="0.575916" stop-color="#FF7B00"/><stop offset="0.581152" stop-color="#FF7A00"/><stop offset="0.586387" stop-color="#FF7900"/><stop offset="0.591623" stop-color="#FF7800"/><stop offset="0.596859" stop-color="#FF7700"/><stop offset="0.602094" stop-color="#FF7500"/><stop offset="0.60733" stop-color="#FF7400"/><stop offset="0.612565" stop-color="#FF7300"/><stop offset="0.617801" stop-color="#FF7200"/><stop offset="0.623037" stop-color="#FF7000"/><stop offset="0.628272" stop-color="#FF6F00"/><stop offset="0.633508" stop-color="#FF6E00"/><stop offset="0.638743" stop-color="#FF6D00"/><stop offset="0.643979" stop-color="#FF6B00"/><stop offset="0.649215" stop-color="#FF6A00"/><stop offset="0.65445" stop-color="#FF6900"/><stop offset="0.659686" stop-color="#FF6700"/><stop offset="0.664921" stop-color="#FF6600"/><stop offset="0.670157" stop-color="#FF6500"/><stop offset="0.675393" stop-color="#FF6400"/><stop offset="0.680628" stop-color="#FF6200"/><stop offset="0.685864" stop-color="#FF6100"/><stop offset="0.691099" stop-color="#FF5F00"/><stop offset="0.696335" stop-color="#FF5E00"/><stop offset="0.701571" stop-color="#FF5D00"/><stop offset="0.706806" stop-color="#FF5B00"/><stop offset="0.712042" stop-color="#FF5A00"/><stop offset="0.717277" stop-color="#FF5900"/><stop offset="0.722513" stop-color="#FF5700"/><stop offset="0.727749" stop-color="#FF5600"/><stop offset="0.732984" stop-color="#FF5400"/><stop offset="0.73822" stop-color="#FF5300"/><stop offset="0.743455" stop-color="#FF5100"/><stop offset="0.748691" stop-color="#FF5000"/><stop offset="0.753927" stop-color="#FF4E00"/><stop offset="0.759162" stop-color="#FF4D00"/><stop offset="0.764398" stop-color="#FF4B00"/><stop offset="0.769634" stop-color="#FF4A00"/><stop offset="0.774869" stop-color="#FF4800"/><stop offset="0.780105" stop-color="#FF4700"/><stop offset="0.78534" stop-color="#FF4500"/><stop offset="0.790576" stop-color="#FF4400"/><stop offset="0.795812" stop-color="#FF4200"/><stop offset="0.801047" stop-color="#FF4100"/><stop offset="0.806283" stop-color="#FF3F00"/><stop offset="0.811518" stop-color="#FF3E00"/><stop offset="0.816754" stop-color="#FF3C00"/><stop offset="0.82199" stop-color="#FF3B00"/><stop offset="0.827225" stop-color="#FF3900"/><stop offset="0.832461" stop-color="#FF3700"/><stop offset="0.837696" stop-color="#FF3600"/><stop offset="0.842932" stop-color="#FF3400"/><stop offset="0.848168" stop-color="#FF3300"/><stop offset="0.853403" stop-color="#FF3100"/><stop offset="0.858639" stop-color="#FF2F00"/><stop offset="0.863874" stop-color="#FF2E00"/><stop offset="0.86911" stop-color="#FF2C00"/><stop offset="0.874346" stop-color="#FF2A00"/><stop offset="0.879581" stop-color="#FF2900"/><stop offset="0.884817" stop-color="#FF2700"/><stop offset="0.890052" stop-color="#FF2500"/><stop offset="0.895288" stop-color="#FF2300"/><stop offset="0.900524" stop-color="#FF2200"/><stop offset="0.905759" stop-color="#FF2000"/><stop offset="0.910995" stop-color="#FF1E00"/><stop offset="0.91623" stop-color="#FF1D00"/><stop offset="0.921466" stop-color="#FF1B00"/><stop offset="0.926702" stop-color="#FF1900"/><stop offset="0.931937" stop-color="#FF1700"/><stop offset="0.937173" stop-color="#FF1500"/><stop offset="0.942408" stop-color="#FF1400"/><stop offset="0.947644" stop-color="#FF1200"/><stop offset="0.95288" stop-color="#FF1000"/><stop offset="0.958115" stop-color="#FF0E00"/><stop offset="0.963351" stop-color="#FF0C00"/><stop offset="0.968586" stop-color="#FF0B00"/><stop offset="0.973822" stop-color="#FF0900"/><stop offset="0.979058" stop-color="#FF0700"/><stop offset="0.984293" stop-color="#FF0500"/><stop offset="0.989529" stop-color="#FF0300"/><stop offset="0.994764" stop-color="#FF0100"/><stop offset="1" stop-color="#FF0000"/></linearGradient>
<linearGradient x1="1249" y1="504.25" x2="1249" y2="893.75" gradientUnits="userSpaceOnUse" spreadMethod="reflect" id="stroke2"><stop offset="0" stop-color="#00B050"/><stop offset="0.00595238" stop-color="#01B050"/><stop offset="0.0119048" stop-color="#03B051"/><stop offset="0.0178571" stop-color="#05B152"/><stop offset="0.0238095" stop-color="#07B152"/><stop offset="0.0297619" stop-color="#09B153"/><stop offset="0.0357143" stop-color="#0BB254"/><stop offset="0.0416667" stop-color="#0CB254"/><stop offset="0.047619" stop-color="#0EB255"/><stop offset="0.0535714" stop-color="#10B356"/><stop offset="0.0595238" stop-color="#12B356"/><stop offset="0.0654762" stop-color="#14B357"/><stop offset="0.0714286" stop-color="#15B458"/><stop offset="0.077381" stop-color="#17B458"/><stop offset="0.0833333" stop-color="#19B459"/><stop offset="0.0892857" stop-color="#1BB559"/><stop offset="0.0952381" stop-color="#1CB55A"/><stop offset="0.10119" stop-color="#1EB55B"/><stop offset="0.107143" stop-color="#20B65B"/><stop offset="0.113095" stop-color="#22B65C"/><stop offset="0.119048" stop-color="#23B65D"/><stop offset="0.125" stop-color="#25B75D"/><stop offset="0.130952" stop-color="#27B75E"/><stop offset="0.136905" stop-color="#28B75E"/><stop offset="0.142857" stop-color="#2AB85F"/><stop offset="0.14881" stop-color="#2CB860"/><stop offset="0.154762" stop-color="#2DB860"/><stop offset="0.160714" stop-color="#2FB961"/><stop offset="0.166667" stop-color="#30B961"/><stop offset="0.172619" stop-color="#32B962"/><stop offset="0.178571" stop-color="#34BA63"/><stop offset="0.184524" stop-color="#35BA63"/><stop offset="0.190476" stop-color="#37BA64"/><stop offset="0.196429" stop-color="#38BB64"/><stop offset="0.202381" stop-color="#3ABB65"/><stop offset="0.208333" stop-color="#3BBB65"/><stop offset="0.214286" stop-color="#3DBC66"/><stop offset="0.220238" stop-color="#3EBC67"/><stop offset="0.22619" stop-color="#40BC67"/><stop offset="0.232143" stop-color="#42BC68"/><stop offset="0.238095" stop-color="#43BD68"/><stop offset="0.244048" stop-color="#44BD69"/><stop offset="0.25" stop-color="#46BD69"/><stop offset="0.255952" stop-color="#47BE6A"/><stop offset="0.261905" stop-color="#49BE6A"/><stop offset="0.267857" stop-color="#4ABE6B"/><stop offset="0.27381" stop-color="#4CBE6B"/><stop offset="0.279762" stop-color="#4DBF6C"/><stop offset="0.285714" stop-color="#4FBF6D"/><stop offset="0.291667" stop-color="#50BF6D"/><stop offset="0.297619" stop-color="#51BF6E"/><stop offset="0.303571" stop-color="#53C06E"/><stop offset="0.309524" stop-color="#54C06F"/><stop offset="0.315476" stop-color="#55C06F"/><stop offset="0.321429" stop-color="#57C170"/><stop offset="0.327381" stop-color="#58C170"/><stop offset="0.333333" stop-color="#59C171"/><stop offset="0.339286" stop-color="#5BC171"/><stop offset="0.345238" stop-color="#5CC271"/><stop offset="0.35119" stop-color="#5DC272"/><stop offset="0.357143" stop-color="#5FC272"/><stop offset="0.363095" stop-color="#60C273"/><stop offset="0.369048" stop-color="#61C373"/><stop offset="0.375" stop-color="#62C374"/><stop offset="0.380952" stop-color="#64C374"/><stop offset="0.386905" stop-color="#65C375"/><stop offset="0.392857" stop-color="#66C475"/><stop offset="0.39881" stop-color="#67C476"/><stop offset="0.404762" stop-color="#69C476"/><stop offset="0.410714" stop-color="#6AC476"/><stop offset="0.416667" stop-color="#6BC477"/><stop offset="0.422619" stop-color="#6CC577"/><stop offset="0.428571" stop-color="#6DC578"/><stop offset="0.434524" stop-color="#6EC578"/><stop offset="0.440476" stop-color="#70C579"/><stop offset="0.446429" stop-color="#71C679"/><stop offset="0.452381" stop-color="#72C679"/><stop offset="0.458333" stop-color="#73C67A"/><stop offset="0.464286" stop-color="#74C67A"/><stop offset="0.470238" stop-color="#75C67B"/><stop offset="0.47619" stop-color="#76C77B"/><stop offset="0.482143" stop-color="#77C77B"/><stop offset="0.488095" stop-color="#78C77C"/><stop offset="0.494048" stop-color="#79C77C"/><stop offset="0.5" stop-color="#7AC87D"/><stop offset="0.505952" stop-color="#7BC87D"/><stop offset="0.511905" stop-color="#7CC87D"/><stop offset="0.517857" stop-color="#7DC87E"/><stop offset="0.52381" stop-color="#7EC87E"/><stop offset="0.529762" stop-color="#7FC87E"/><stop offset="0.535714" stop-color="#80C97F"/><stop offset="0.541667" stop-color="#81C97F"/><stop offset="0.547619" stop-color="#82C97F"/><stop offset="0.553571" stop-color="#83C980"/><stop offset="0.559524" stop-color="#84C980"/><stop offset="0.565476" stop-color="#85CA81"/><stop offset="0.571429" stop-color="#86CA81"/><stop offset="0.577381" stop-color="#87CA81"/><stop offset="0.583333" stop-color="#88CA81"/><stop offset="0.589286" stop-color="#89CA82"/><stop offset="0.595238" stop-color="#89CA82"/><stop offset="0.60119" stop-color="#8ACB82"/><stop offset="0.607143" stop-color="#8BCB83"/><stop offset="0.613095" stop-color="#8CCB83"/><stop offset="0.619048" stop-color="#8DCB83"/><stop offset="0.625" stop-color="#8ECB84"/><stop offset="0.630952" stop-color="#8ECB84"/><stop offset="0.636905" stop-color="#8FCC84"/><stop offset="0.642857" stop-color="#90CC85"/><stop offset="0.64881" stop-color="#91CC85"/><stop offset="0.654762" stop-color="#91CC85"/><stop offset="0.660714" stop-color="#92CC85"/><stop offset="0.666667" stop-color="#93CC86"/><stop offset="0.672619" stop-color="#94CC86"/><stop offset="0.678571" stop-color="#94CD86"/><stop offset="0.684524" stop-color="#95CD86"/><stop offset="0.690476" stop-color="#96CD87"/><stop offset="0.696429" stop-color="#96CD87"/><stop offset="0.702381" stop-color="#97CD87"/><stop offset="0.708333" stop-color="#98CD87"/><stop offset="0.714286" stop-color="#98CD88"/><stop offset="0.720238" stop-color="#99CD88"/><stop offset="0.72619" stop-color="#9ACE88"/><stop offset="0.732143" stop-color="#9ACE88"/><stop offset="0.738095" stop-color="#9BCE88"/><stop offset="0.744048" stop-color="#9BCE89"/><stop offset="0.75" stop-color="#9CCE89"/><stop offset="0.755952" stop-color="#9CCE89"/><stop offset="0.761905" stop-color="#9DCE89"/><stop offset="0.767857" stop-color="#9ECE89"/><stop offset="0.77381" stop-color="#9ECE8A"/><stop offset="0.779762" stop-color="#9FCF8A"/><stop offset="0.785714" stop-color="#9FCF8A"/><stop offset="0.791667" stop-color="#A0CF8A"/><stop offset="0.797619" stop-color="#A0CF8A"/><stop offset="0.803571" stop-color="#A1CF8B"/><stop offset="0.809524" stop-color="#A1CF8B"/><stop offset="0.815476" stop-color="#A1CF8B"/><stop offset="0.821429" stop-color="#A2CF8B"/><stop offset="0.827381" stop-color="#A2CF8B"/><stop offset="0.833333" stop-color="#A3CF8B"/><stop offset="0.839286" stop-color="#A3CF8B"/><stop offset="0.845238" stop-color="#A3D08C"/><stop offset="0.85119" stop-color="#A4D08C"/><stop offset="0.857143" stop-color="#A4D08C"/><stop offset="0.863095" stop-color="#A4D08C"/><stop offset="0.869048" stop-color="#A5D08C"/><stop offset="0.875" stop-color="#A5D08C"/><stop offset="0.880952" stop-color="#A5D08C"/><stop offset="0.886905" stop-color="#A6D08C"/><stop offset="0.892857" stop-color="#A6D08D"/><stop offset="0.89881" stop-color="#A6D08D"/><stop offset="0.904762" stop-color="#A6D08D"/><stop offset="0.910714" stop-color="#A7D08D"/><stop offset="0.916667" stop-color="#A7D08D"/><stop offset="0.922619" stop-color="#A7D08D"/><stop offset="0.928571" stop-color="#A7D08D"/><stop offset="0.934524" stop-color="#A7D08D"/><stop offset="0.940476" stop-color="#A8D08D"/><stop offset="0.946429" stop-color="#A8D08D"/><stop offset="0.952381" stop-color="#A8D08D"/><stop offset="0.958333" stop-color="#A8D08D"/><stop offset="0.964286" stop-color="#A8D08D"/><stop offset="0.970238" stop-color="#A8D08D"/><stop offset="0.97619" stop-color="#A8D08D"/><stop offset="0.982143" stop-color="#A8D08D"/><stop offset="0.988095" stop-color="#A8D08D"/><stop offset="0.994048" stop-color="#A8D08D"/><stop offset="1" stop-color="#A9D18E"/></linearGradient></defs>
<g clip-path="url(#clip0)" transform="translate(-973 -426)"><path d="M987 701C987 556.854 1103.85 440 1248 440 1392.15 440 1509 556.854 1509 701 1509 845.146 1392.15 962 1248 962 1103.85 962 987 845.146 987 701Z" stroke="url(#stroke1)" stroke-width="27.5" stroke-miterlimit="8" fill="none" fill-rule="evenodd"/><path d="M1068 699C1068 599.036 1149.04 518 1249 518 1348.96 518 1430 599.036 1430 699 1430 798.964 1348.96 880 1249 880 1149.04 880 1068 798.964 1068 699Z" stroke="url(#stroke2)" stroke-width="27.5" stroke-miterlimit="8" fill="none" fill-rule="evenodd"/></g></svg>
<body style='overflow:hidden'>
<script>
// Get the viewport height and width
const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
const vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0)
// Initiate new height and width variables
var height = vh;
var width = vw;
// Desired aspect ratio
const aspect = 1.5;
if (vw/aspect < vh) {
// Viewport width is limiting
var width = vw;
var height = vw/aspect;
} else {
// Viewport height is limiting
var width = vh*aspect;
var height = vh;
}
// Scale down height and width
height /= 2;
width /= 2;
// Minimum dimension for a square plot
var mindim = math.min([width,height]);
var distance_per_pixel = 0.75*height/100;
var svg = d3.select("#canvas") // This selects the div
.attr("width", width) // This defines the canvas' width
.attr("height", height) // This defines the canvas' height
// Loading the file like this works. Can I somehow load in the svg I defined above without having to download it from an external link?
svg.append("image")
.attr("xlink:href","https://svgshare.com/i/jCS.svg")
.attr("width", mindim*0.5)
.attr("height", mindim*0.5)
.attr("x",mindim*0.25)
.attr("y",mindim*0.25)
</script>
</body>
</html>