Auto closing tag

README.md

@@ -38,17 +38,20 @@ const element2 = node.line(/* ... */);
 const element3 = node.text(/* ... */);
 svg.appendChild(element1, element2, element3);
 
-// Add other element (advanced)
+// Add other/custom element (advanced)
 const gradient = RawElement.create(
-    'gradient', // Element/tag name
-    true, // Closing tag
-    { id: 'myGradient' } /* ... */
+    'gradient', // Element or tag name
+    { id: 'myGradient' }, // Attributes
+    [
+        /* Content or child element(s) inside this `gradient` element */
+    ]
 );
-const defs = RawElement.create('defs', true).appendChild(gradient);
+const defs = RawElement.create('defs').appendChild(gradient);
 svg.appendChild(defs);
 
-// Add styling
-const style = Style.create({}, '#myGradient { /* ... */ }');
+// Add style
+const style = Style.create({}, '#myText { font-weight: bold; }');
+svg.appendChild(style);
 
 // Render SVG
 const data = svg.render();

package.json

@@ -1,6 +1,6 @@
 {
   "name": "svg-artisan",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "description": "Simple SVG builder for Node.",
   "main": "./dist/index.js",
   "files": [

src/RawElement.ts

@@ -4,7 +4,6 @@ import { BaseElement } from './elements/BaseElement';
 export class RawElement extends BaseElement {
     constructor(
         public readonly name: string,
-        public readonly hasClosingTag = true,
         attributes?: ElementAttributes,
         content?: ElementContent
     ) {
@@ -13,10 +12,9 @@ export class RawElement extends BaseElement {
 
     public static create(
         name: string,
-        hasClosingTag: boolean,
         attributes?: ElementAttributes,
         content?: ElementContent
     ) {
-        return new RawElement(name, hasClosingTag, attributes, content);
+        return new RawElement(name, attributes, content);
     }
 }

src/Svg.ts

@@ -11,7 +11,6 @@ import { BaseElement } from './elements/BaseElement';
  */
 export class Svg extends BaseElement {
     public readonly name = 'svg';
-    public readonly hasClosingTag = true;
 
     /**
      * Creates a new SVG root element.

src/elements/BaseElement.ts

@@ -3,7 +3,6 @@ import { SvgElement } from '../interfaces';
 
 export abstract class BaseElement implements SvgElement {
     public abstract readonly name: string;
-    public abstract readonly hasClosingTag: boolean;
 
     protected attributesMap?: Map<string, AttributeValue>;
     protected content: string;
@@ -93,15 +92,15 @@ export abstract class BaseElement implements SvgElement {
         let attrs = '';
         if (this.attributesMap) {
             attrs = ` `;
-            attrs += [...this.attributesMap]
+            attrs += Array.from(this.attributesMap.entries())
                 .map(([key, value]) =>
                     value !== null ? `${key}="${value}"` : `${key}`
                 )
                 .join(' ');
         }
 
         let element = `<${this.name}${attrs}`;
-        if (this.hasClosingTag) {
+        if (this.content.length) {
             element += '>';
             element += this.content;
             element += `</${this.name}>`;

src/elements/Style.ts

@@ -3,7 +3,6 @@ import { BaseElement } from './BaseElement';
 
 export class Style extends BaseElement {
     public readonly name = 'style';
-    public readonly hasClosingTag = true;
 
     constructor(attributes?: ElementAttributes, content?: string) {
         super(attributes, content);

src/interfaces.ts

@@ -1,6 +1,5 @@
 export interface SvgElement {
     name: string;
-    hasClosingTag: boolean;
     render(): string;
 }
 

src/nodes.ts

@@ -2,46 +2,46 @@ import { RawElement } from './RawElement';
 import { ElementAttributes, ElementContent } from './types';
 
 export function a(attributes?: ElementAttributes, content?: ElementContent) {
-    return RawElement.create('a', true, attributes, content);
+    return RawElement.create('a', attributes, content);
 }
 
 export function g(attributes?: ElementAttributes, content?: ElementContent) {
-    return RawElement.create('g', true, attributes, content);
+    return RawElement.create('g', attributes, content);
 }
 
 export function circle(
     attributes?: ElementAttributes,
     content?: ElementContent
 ) {
-    return RawElement.create('circle', true, attributes, content);
+    return RawElement.create('circle', attributes, content);
 }
 
 export function text(attributes?: ElementAttributes, content?: ElementContent) {
-    return RawElement.create('text', true, attributes, content);
+    return RawElement.create('text', attributes, content);
 }
 
 export function tspan(
     attributes?: ElementAttributes,
     content?: ElementContent
 ) {
-    return RawElement.create('tspan', true, attributes, content);
+    return RawElement.create('tspan', attributes, content);
 }
 
 export function foreignObject(
     attributes?: ElementAttributes,
     content?: ElementContent
 ) {
-    return RawElement.create('foreignObject', true, attributes, content);
+    return RawElement.create('foreignObject', attributes, content);
 }
 
 export function line(attributes?: ElementAttributes, content?: ElementContent) {
-    return RawElement.create('line', true, attributes, content);
+    return RawElement.create('line', attributes, content);
 }
 
 export function rect(attributes?: ElementAttributes, content?: ElementContent) {
-    return RawElement.create('rect', true, attributes, content);
+    return RawElement.create('rect', attributes, content);
 }
 
 export function path(attributes?: ElementAttributes, content?: ElementContent) {
-    return RawElement.create('path', true, attributes, content);
+    return RawElement.create('path', attributes, content);
 }