This site uses cookies for analytics. By continuing to browse this site, you agree to this use.

No `createElement` with SVG

No createElement with SVG (create-element-svg)

This hint informs users that they need to use createElementNS to create SVG elements instead of createElement.

Why is this important?

SVG-in-HTML is a fantastic addition to the web platform, but since SVG is an XML-based language there is some nuance to how it can be used. When parsing HTML, SVG elements are automatically created correctly so long as they are inside an <svg>...</svg> block. However, SVG elements cannot be dynamically created using createElement in the same way as HTML elements.

For example, calling document.createElement('circle') actually returns an HTML element named circle instead of an SVG element. This is for compatibility with existing web content which may have created custom (although invalid) HTML elements using these same names.

In order to dynamically create SVG elements, you must explicitly tell the browser you want SVG by using the SVG namespace with createElementNS. For example, to create an SVG circle call document.createElementNS('http://www.w3.org/2000/svg', 'circle').

What does the hint check?

This hint scans JavaScript source code to check if createElement is called with any known SVG element names.

Examples that trigger the hint

const container = document.getElementById('container');
const svg = document.createElement('svg');

container.appendChild(svg);

Examples that pass the hint

const container = document.getElementById('container');
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');

container.appendChild(svg);

How to use this hint?

To use it you will have to install it via npm:

npm install @hint/hint-create-element-svg

Note: You can make npm install it as a devDependency using the --save-dev parameter, or to install it globally, you can use the -g parameter. For other options see npm‘s documentation.

And then activate it via the .hintrc configuration file:

{
    "connector": {...},
    "formatters": [...],
    "parsers": [...],
    "hints": {
        "create-element-svg": "error"
    },
    ...
}

Further Reading

Document.createElementNS SVG: Scalable Vector Graphics