snippets

style SVGs

• Styles can be applied to SVGs using b.render() and substituting class names into the template.

html

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

<script type="image/svg" data-template="snippetSVG">
  <svg version="1.1" width="200" height="100" xmlns="http://www.w3.org/2000/svg">
    <circle class="__COLOR__" cx="100" cy="50" r="50" />
  </svg>
</script>

javascript

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

const colors = ["red", "green", "blue"];

export function loadSVG(_, __, el) {
  el.replaceChildren(
    ...colors.map((color) => {
      const subs = { __COLOR__: color };
      return b.render("snippetSVG", subs);
    }),
  );
}

styles

.red { fill: red; }
.green { fill: green; }
.blue { fill: blue; }