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.

🚀 Quick Start (CDN)

<!-- 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
• jsdelivr

🧩 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 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:

<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, 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 — sSVG documentation and playground
• sSVG VS Code Extension
• @ssvg/core

📝 License

MIT