SVG Manipulation
What is an SVG?
SVG, short for Scalable Vector Graphics, is a graphic file that uses mathematical formulas to display an image. Opening the file in a text editor will display XML-like code that can be modified to change the how the image looks. Additionally, sofware such as Inkscape can be used to generate and modify these type of files visually.
?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="210mm"
height="297mm"
viewBox="0 0 210 297"
version="1.1"
id="svg1"
inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
sodipodi:docname="drawing.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview1"
pagecolor="#505050"
bordercolor="#ffffff"
borderopacity="1"
inkscape:showpageshadow="0"
inkscape:pageopacity="0"
inkscape:pagecheckerboard="1"
inkscape:deskcolor="#505050"
inkscape:document-units="mm"
inkscape:zoom="0.65655864"
inkscape:cx="396.76578"
inkscape:cy="561.25984"
inkscape:window-width="1680"
inkscape:window-height="983"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="layer1" />
<defs
id="defs1" />
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="change">
<ellipse
style="fill:#782121;stroke-width:0.264999"
id="path1"
cx="119.68656"
cy="120.08955"
rx="59.641788"
ry="52.388062" />
</g>
</svg>
Using javascript with SVG
SVGs can be modified dynamically using javascript when certain conditions are met. In order to ensure that SVGs are correctly modified, it is should be imported as objects and ensure that they are completley loaded.
circle.addEventListener("load", () => {
})
Any modification wanted to be made will be placed within the funtion, such as changing the color of the circle when hovering over it.
const circle = document.querySelector("#circle");
circle.addEventListener("load", () => {
const change = circle.contentDocument.querySelector("#path1");
circle.addEventListener("mouseover", () => {
change.setAttribute("style","fill: #000; stroke-width: 0.264999");
})
circle.addEventListener("mouseout", () => {
change.setAttribute("style","fill: #782121; stroke-width: 0.264999");
})
})