Create An SVG With JavaScript
JavaScript
document.addEventListener("DOMContentLoaded", () => {
const rect = document.createElementNS("http://www.w3.org/2000/svg", 'rect')
rect.setAttribute("width","100%")
rect.setAttribute("height","100%")
rect.style.stroke = "#aabbcc"
rect.style.strokeWidth = "5px"
rect.style.fill = "#338855"
const svg = document.createElementNS("http://www.w3.org/2000/svg", 'svg')
svg.setAttribute("width","200")
svg.setAttribute("height","200")
svg.appendChild(rect)
const wrapper = document.querySelector(".exampleWrapper")
wrapper.appendChild(svg)
})
This is the basic approach for adding an SVG to a page
via JavaScript. Note that
[TODO: Code shorthand span ]
is used
instead of
[TODO: Code shorthand span ]