Home

Create An SVG With JavaScript

April 2024

This is the basic approach for adding an SVG to a page via JavaScript. Note that document.createElementNS is used instead of document.createElement()

HTML

<div class="exampleWrapper"></div>

Output

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)
})
end of line

References