@blockquote-web-components/blockquote-directive-svg-to-data-image v1.4.0

blockquoteDirectiveSvgToDataImage

This directive receives an <svg> HTML element from a Template Result and returns it as data URI (data:image/svg+xml).

svg-templates

Demo

Usage

Simple SVG

get _svgTag() {
  return html` <svg
    xmlns="htt://www.w3.org/2000/svg"
    viewBox="0 0 100 100"
    height="100px"
    width="100px"
  >
    <!-- ... (SVG content) ... -->
  </svg>`;
}

render() {
  return html`
    <div
      aria-hidden="true"
      style="background-image: url('${blockquoteDirectiveSvgToDataImage(this._svgTag)}');"
    ></div>
  `;
}

Complex SVG

get _bgTpl() {
  return svg` <circle fill="${this.bgFill}" cx="100" cy="100" r="100"></circle> `;
}

get _shapeTpl() {
  return svg`
    <g fill="#fff">
      <!-- ... (SVG content) ... -->
    </g>
  `;
}

get _svgTag() {
  return html`<svg
    id="${Math.random().toString(36).substring(2, 10)}"
    xmlns="http://www.w3.org/2000/svg"
    width="200"
    height="200"
    focusable="false"
    role="presentation"
    viewBox="0 0 200 200"
  >
    ${this._bgTpl} ${this._shapeTpl}
  </svg>`;
}

render() {
  return html`
    <div
      aria-hidden="true"
      style="background-image:var(--bgUrl, url('${blockquoteDirectiveSvgToDataImage(this._svgTag)}'));"
    ></div>
  `;
}

src/BlockquoteDirectiveSvgToDataImage.js:

Variables

Exports

src/index.js:

Exports