SVG not displaying

I have a function that returns an SVG element like so:

const svg = document.createElement(`svg`)
svg.className = `logoField`
svg.setAttributeNS(`http://www.w3.org/2000/svg`, `viewBox`, `0 0 95.65 48`)
svg.innerHTML = `
  <path d="M297.83,226l-17.35,40.36a12.61,12.61,0,0,1-11.6,7.64H247.21l4.73-11h12.78a4.94,4.94,0,0,0,4.53-3l9.89-23H263.09l4.72-11Z" transform="translate(-202.17 -226)"></path>
  <polygon points="19.92 11 15.95 11 20.68 0 24.65 0 19.92 11"></polygon>
  <polygon points="35.09 26.98 22.01 37 44.72 37 39.99 48 0 48 0 47.99 0.4 47.07 4.74 36.98 10.67 32.44 16.64 27.87 25.57 21.03 38.67 11 23.88 11           28.61 0 60.66 0 55.93 11.02 35.09 26.98"></polygon>
`
return svg

const svg = document.createElement(`svg`)
svg.className = `logoField`
svg.setAttributeNS(`http://www.w3.org/2000/svg`, `viewBox`, `0 0 95.65 48`)
svg.innerHTML = `
  <path d="M297.83,226l-17.35,40.36a12.61,12.61,0,0,1-11.6,7.64H247.21l4.73-11h12.78a4.94,4.94,0,0,0,4.53-3l9.89-23H263.09l4.72-11Z" transform="translate(-202.17 -226)"></path>
  <polygon points="19.92 11 15.95 11 20.68 0 24.65 0 19.92 11"></polygon>
  <polygon points="35.09 26.98 22.01 37 44.72 37 39.99 48 0 48 0 47.99 0.4 47.07 4.74 36.98 10.67 32.44 16.64 27.87 25.57 21.03 38.67 11 23.88 11           28.61 0 60.66 0 55.93 11.02 35.09 26.98"></polygon>
`
return svg

That code works fine with the VS code live server. But when I use it in a local dev server, the <path> and <polygon> elements' width and height become 0. this is my CSS code:

.logoField {
  position: relative;
  fill: rgb(200, 200, 200);
  height: 3rem;
  margin-bottom: 40px;
}

.logoField {
  position: relative;
  fill: rgb(200, 200, 200);
  height: 3rem;
  margin-bottom: 40px;
}

NOTE: in the VS code live server, the SVG element is hardcoded into the HTML, it is not rendered by a JavaScript function, but the SVG element code is identical in both cases. Any idea what could be doing wrong? Thanks in advance.

13 Replies

b1mind•10mo ago

mmm it should create the correct nameSpace but you could try just creating it with to make sure.

b1mind•10mo ago

https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS

Document: createElementNS() method - Web APIs | MDN

Creates an element with the specified namespace URI and qualified name.

b1mind•10mo ago

oh you did I'm blind xD well you are setting it... yea I'd createElementNS('http://www.w3.org/2000/svg', 'svg') or what not

Zidan•10mo ago

okay, i'll try thing is, i did this many times before, i even have a function that toggles between to SVGs to show and hide a text in a password input like so :

  const target = e.target
  const input = target.previousElementSibling
  if (target.className === `active`) {
    target.innerHTML = `
      <svg viewBox="0 0 20 20">
        <polygon points="20 8 20 12 0 12 0 8 2 8 2 10 18 10 18 8 20 8"/>
      </svg>
    `
    target.className = ``
    target.title = `show`
    input.type = `password`
  } else {
    target.innerHTML = `
      <svg viewBox="0 0 20 20">
        <polygon points="20 16 20 20 0 20 0 16 2 16 2 18 18 18 18 16 20 16"/>
        <polygon points="20 0 20 4 18 4 18 2 2 2 2 4 0 4 0 0 20 0"/>
        <path d="M20,15l-5,5,5,5,5-5Zm-1,5,1-1,1,1-1,1Z" transform="translate(-10 -10)"/>
      </svg>
    `
    target.className = `active`
    target.title = `hide`
    input.type = `text`
  }

  const target = e.target
  const input = target.previousElementSibling
  if (target.className === `active`) {
    target.innerHTML = `
      <svg viewBox="0 0 20 20">
        <polygon points="20 8 20 12 0 12 0 8 2 8 2 10 18 10 18 8 20 8"/>
      </svg>
    `
    target.className = ``
    target.title = `show`
    input.type = `password`
  } else {
    target.innerHTML = `
      <svg viewBox="0 0 20 20">
        <polygon points="20 16 20 20 0 20 0 16 2 16 2 18 18 18 18 16 20 16"/>
        <polygon points="20 0 20 4 18 4 18 2 2 2 2 4 0 4 0 0 20 0"/>
        <path d="M20,15l-5,5,5,5,5-5Zm-1,5,1-1,1,1-1,1Z" transform="translate(-10 -10)"/>
      </svg>
    `
    target.className = `active`
    target.title = `hide`
    input.type = `text`
  }

and its working fine..

b1mind•10mo ago

right but injecting html string with innerHTML != to creatingElement that is going to take any valid html string and inject it the other one you are creating the node that is probably why you had to do the nameSpace when setting the attribute ya? cause it was trying to uncamel case viewBox? NameSpaces are a w3c standard so like if you wanted to create xml you would have to tell JS the namespace too

b1mind•10mo ago

https://en.wikipedia.org/wiki/Namespace

Namespace

In computing, a namespace is a set of signs (names) that are used to identify and refer to objects of various kinds. A namespace ensures that all of a given set of objects have unique names so that they can be easily identified. Namespaces are commonly structured as hierarchies to allow reuse of names in different contexts. As an analogy, consid...

b1mind•10mo ago

learning RDF really opened my eyes to how all that worked but I've had to do it with both xml/svg when creating elements. createElement assumes html nameSpacing but I thought it would do SVG proper but maybe not its elements inside.

Zidan•10mo ago

i see.. what is RDF?

b1mind•10mo ago

https://en.wikipedia.org/wiki/Resource_Description_Framework

Resource Description Framework

The Resource Description Framework (RDF) is a World Wide Web Consortium (W3C) standard originally designed as a data model for metadata. It has come to be used as a general method for description and exchange of graph data. RDF provides a variety of syntax notations and data serialization formats, with Turtle (Terse RDF Triple Language) currentl...

b1mind•10mo ago

a rabbit hole...

Zidan•10mo ago

b1mind•10mo ago

Zidan•10mo ago

i'll read about, thanks a lot

Gaming

Programming

SVG not displaying