Link Search Menu Expand Document (external link)


<svg-chart> renders an SVG, modifying parts of it based on data using rules.

This is useful when creating:


Add this code anywhere in your HTML page:

<script src="" import="@svg-chart"></script>

<svg-chart src:urltext=""
     data:js="{ phone: 'iPhone', hours: 2.3 }"
       '.phone': { fill: == 'Android' ? 'pink' : 'yellow' },
       '.phone-name': { text: },
       '.hours': { width: data.hours * 60, fill: 'aqua' },
       '.hours-text': { text: data.hours }

This renders the following output:

svg-chart phone example output{.img-fluid}


<svg-chart> has 3 properties:

  • src:urltext (required). The SVG file or URL to render. For example:
    • src="" renders the SVG – provided CORS is enabled.
    • src:string="<svg><rect width='300' height='200' fill='red'></rect></svg>" treats the attribute value as a string (instead of a URL) and renders it as SVG.
    • src:js="myGlobalSvgString" renders the SVG in the JavaScript global variable myGlobalSvgString
  • rules:urljson (optional). The JSON rules to map data to SVG attributes. For example:
    • rules="" applies rules from the JSON file – if CORS is enabled.
    • rules:js="'.phone': { fill: == 'Android' ? 'pink' : 'yellow' } defines a rule inline as a JavaScript object
  • data:urljson (optional). The data to modify the SVG file.
    • data="" loads data from the JSON file – if CORS is enabled.
    • data:js="{ phone: 'iPhone', hours: 2.3 }" defines the data inline as a JavaScript object

Changing any property re-renders the component. For example:

// Re-render the component with new data
document.querySelector('svg-chart').data = { phone: 'Android', hours: 2.9}
// Re-render the component with a new SVG that has a tall blue rectangle
document.querySelector('svg-chart').src = "<svg><rect width='300' height='400' fill='blue'></rect></svg>"


Here’s an example rule:

  ".phone": {
    "fill": " == 'Android' ? 'pink' : 'yellow'"

Each rule has 3 parts:

  1. A CSS selector, like .phone. It applies this rule only to SVG elements matching class="phone"
  2. An attribute, like fill. It replaces the fill= attribute of the selected SVG elements
  3. A JavaScript expression, like == 'Android' ? 'pink' : 'yellow'. It replaces the fill= attribute with the result of this expression.
    • You can use data as a variable. This is the same data= property you defined.
    • You can use any global variables, like uifactory