npm package: @ssvg/web-component
Description: Standalone SSVG Web Component bundle for CDN usage.
Author: Amit Sheen
Latest version: 0.1.0

# SSVG Web Component

Standalone Web Component for easy sSVG compilation — ready for CDN, browser, and modern JS projects.

If you don't know about sSVG, read all about it on [SimpleSVG.dev](https://simplesvg.dev).


---

## 🚀 Quick Start (CDN)

```html
<!-- Just one line! -->
<script src="https://unpkg.com/@ssvg/web-component/dist/ssvg-element.js"></script>

<ssvg-element>
  <var name="count" value="5"></var>
  <loop name="i" from="0" to="var(count)">
    <circle cx="calc(loop(i) * 30)" cy="50" r="10" fill="blue"/>
  </loop>
</ssvg-element>
```

The component will automatically replace itself with the compiled SVG.

---

## 🌍 CDN Links

- [unpkg](https://unpkg.com/@ssvg/web-component/dist/ssvg-element.js)
- [jsdelivr](https://cdn.jsdelivr.net/npm/@ssvg/web-component/dist/ssvg-element.js)

---

## 🧩 How It Works

- Place any *valid sSVG markup* inside `<ssvg-element>...</ssvg-element>`.
- On page load, the component compiles its inner HTML using [@ssvg/core](https://github.com/yairEO/ssvg) and replaces itself with the resulting SVG.
- All attributes on `<ssvg-element>` are passed to the root `<ssvg>`.

>
>
> **Important:**
>
> The `<ssvg-element>` is an HTML element, not an SVG element. This means it **cannot** accept self-closing tags. To ensure your markup is valid, always use explicit closing tags as required by HTML. For example:
> 
> ```html
> <ssvg-element class="closing-tags">
> 
>     <import src="my-elements.ssvg" custom-function="my-function"></import>  <!-- closing tag on import -->
>     
>     <my-function param="30"></my-function> <!-- closing tag on custom element -->
>     
>     <var name="count" value="42"></var> <!-- closing tag on var -->
>     
>     <list name="colors">
>         <item value="blue"></item> <!-- closing tags on items -->
>         <item value="green"></item>
>         <item value="yellow"></item>
>         <item value="orange"></item>
>         <item value="red"></item>
>     </list>
>     
>     <loop from="0" to="list-action(colors, length)">
>         <circle
>             cx="25"
>             cy="calc(loop(y) * 25)"
>             r="random(5, 25)"
>             fill="list(colors, [loop()])"
>         ></circle> <!-- closing tag on svg elements -->
>     </loop>
> 
> </ssvg-element>
> ```
> 
> **Note:**
> Using self-closing tags may cause issues. But we've got you covered: if you install the [sSVG VS Code extension](https://marketplace.visualstudio.com/items?itemName=AmitSheen.ssvg-vscode-extension), it will automatically fix closing tags for all `<ssvg-element>` blocks in your document every time you save.
>

---

## 📦 Files

- `dist/ssvg-element.js` — IIFE bundle for `<script src=...>` (CDN, browser, legacy)
- `dist/ssvg-element.esm.js` — ESM bundle for `import` or `<script type="module">` (for advanced/modern use only)

---

## ⚡ Why CDN?

This package is designed for direct use from a CDN. Just drop the script in your HTML and start using `<ssvg-element>`. No build tools, no npm install, no configuration.

- **No installation required**
- **No bundling needed**
- **Works everywhere**

If you want to use it as an ESM import (for advanced use), you can, but the main use case is CDN.

---

## ❓ FAQ

**Q: Can I use this with frameworks (React, Vue, etc)?**  
A: Yes! Just make sure the script is loaded before you use `<ssvg-element>`.

**Q: Can I use this offline?**  
A: Yes, just copy the `dist/` files to your project.

**Q: What browsers are supported?**  
A: All modern browsers, and any browser that supports Custom Elements.

---

## 📚 Resources

- [SimpleSVG.dev](https://simplesvg.dev) — sSVG documentation and playground
- [sSVG VS Code Extension](https://marketplace.visualstudio.com/items?itemName=AmitSheen.ssvg-vscode-extension)
- [@ssvg/core](https://www.npmjs.com/package/@ssvg/core)

---

## 📝 License

MIT