Home
Head's Up: I'm in the middle of upgrading my site. Most things are in place, but there are something missing and/or broken including image alt text. Please bear with me while I'm getting things fixed.

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 ]

Footnotes And References