snippets

render an svg

• Render an SVG from the collection in b.svgs.
• The same type of find/replace that can be done when rendering HTML can be applied to SVGs.
• SVGs can be loaded from script tags on the page or they can be pulled in via b.getTemplates().

html

<div data-r="renderSVG"></div>

<script type="image/svg" data-template="snippet-svg">
  <svg version="1.1" width="60" height="40" xmlns="http://www.w3.org/2000/svg">
    <text x="30" y="24" font-size="20" text-anchor="middle" fill="goldenrod">__TEXT__</text>
  </svg>
</script>

javascript

export const b = { init: "renderSVG" };

export function renderSVG(_, __, el) {
  const subs = { __TEXT__: "svg" };
  el.replaceChildren(
    b.render("snippet-svg", subs),
  );
}