> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/web/browser/svg/svgelement.md).

# SVGElement()

[browser](/web/browser.md) ⟩ [SVG](/web/browser/svg.md) ⟩ SVGElement()

{% tabs %}
{% tab title="💾 程式" %}
:floppy\_disk: replit: [SVGElemnt()](https://replit.com/@pegasusroe/SVG-element-from-string#script.js)

```javascript
// ⭐ SVGElement
function SVGElement(tagName, attributes, config) {
    // create SVG element (<svg>, <path>, <rect>, <text> ...)
    let elem = document.createElementNS("http://www.w3.org/2000/svg", tagName);
    // set attributes (non-string value is converted automatically into string)
    Object.entries(attributes).forEach(([key, value]) => elem.setAttribute(key, value));
    // furthur configuration if necessary
    if (config) config(elem);
    // return the element
    return elem;
}
```

💈範例： [pie chart](/web/browser/svg/examples/pie-chart.md)

```javascript
// ⭐ create chart with <svg> element
let chart = SVGElement('svg', {
    width: width, height: height, 
    viewBox: `0 0 ${width} ${height}`,
    // text styles for the chart (can be set with CSS instead)
    'font-family': "sans-serif",
    'font-size': 18,
});
```

{% endtab %}

{% tab title="⬇️ 應用" %}

* [pie chart](/web/browser/svg/examples/pie-chart.md)
  {% endtab %}

{% tab title="📘 手冊" %}

* [Document](/web/browser/dom/type/document.md) ⟩ [.createElementNS()](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS) - to create SVG elements.
  {% endtab %}

{% tab title="👥 相關" %}

* [str.htmlToElement()](/web/js/val/prim/str/method/str.htmltoelement.md)
* [elem.wrappedWithHTML()](/web/browser/dom/type/element/+ext/elem.wrappedwithhtml.md)
  {% endtab %}
  {% endtabs %}