Integrate an SVG To Create a Progress Bar

  • Updated on Dec 13, 2024
  • Published on Oct 30, 2024
  • 3 minute(s) read
Prev Next

Introduction

Learn how to display a SVG file as a static image as well as use a more advanced way to integrate a dynamic SVG, that reacts according to the data. In the first example, the SVG image will replace the DAZZM logo, on the top left corner of the application. In the following one, the HTML component will allow the SVG code to react to the progress the user makes at completing its profile information.

Step-by-step instructions

1.Replacing the DAZZM Logo with an SVG Files Azure Portal

To integrate an SVG file as a static image, all you need is to select it through an Image component. In this step, let’s see how to replace the DAZZM logo, in the top left corner of the application by another SVG file. In layout mode, select the image component displaying the logo and from the Attribute tab, clear the file. Then, select your new SVG file.

From the style tab, adjust the width and height of the image component to 60px each. Integrating an SVG as an image is as simple as that.

2. Creating a Computed Field to Track Profile Completion

To use the full potential of an integrated SVG, an HTML component needs to be used, as opposed to an Image one.

In this example, the SVG progress bar will be added to the user profile page, to track the user progress, on completing their profile information.

So, before anything else, create a computed field, under the User Aggregate, that will calculate the percentage of the fields, from the user profile, that have been completed. In this example, this field’s name is “profileCompletedAt” and it’s of text type. Through the Property Panel, add this to the Code section:

let completion = 0;
if (data.firstName) {
  completion += 25;
}
if (data.lastName) {
  completion += 25;
}
if (data.email) {
  completion += 25;
}
if (data.imageProfil) {
  completion += 25;
}
return completion;

3. Displaying Profile Completion Percentage Using a Text Component

To add a text indicating the % completed, drag and drop a text component right under section title and change the value to: Profile completed at {{value}} %. Then, click on the value tag, in yellow, to associate the computed field created at the previous step here.

*Test the computed field by going Live and adding or removing information to the user profile.

4. Adding a Dynamic SVG Progress Bar to Visualize Profile Completion

To add a visual element to the progress made by the user, copy this SVG code in the value field (JS) of an HTML component added above the text from the previous step.

Here is the basic code of the SVG used in this example:

<svg xmlns="http://www.w3.org/2000/svg" width="1229" height="110" viewBox="0 0 1229 110">
  <g id="Groupe_2" data-name="Groupe 2" transform="translate(-174 -745)">
    <g id="Rectangle_1" data-name="Rectangle 1" transform="translate(174 745)" fill="#fff" stroke="#707070" stroke-width="1">
      <rect width="1229" height="110" rx="55" stroke="none"/>
      <rect x="0.5" y="0.5" width="1228" height="109" rx="54.5" fill="none"/>
    </g>
    <rect id="Rectangle_2" data-name="Rectangle 2" width="1207" height="90" rx="45" transform="translate(187 755)" fill="#d88181"/>
  </g>
</svg>

This code was changed from HTML to Javascript. In between the backticks symbols, the HTML code of the SVG can be found. In this code we have an interpolation. To make the interpolation work, you need the dollar sign, with the field’s path in between the curly-braces { } to retrieve the value of the field.

return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1229 110">
    <g id="Groupe_2" data-name="Groupe 2" transform="translate(-174 -745)">
      <g id="Rectangle_1" data-name="Rectangle 1" transform="translate(174 745)" fill="#fff" stroke="#707070" stroke-width="1">
        <rect width="1229" height="110" rx="55" stroke="none"/>
        <rect x="0.5" y="0.5" width="1228" height="109" rx="54.5" fill="none"/>
      </g>
      <rect id="Rectangle_2" data-name="Rectangle 2" width="${(data.profileCompletedAt / 100) * 1200}" height="90" rx="45" transform="translate(187 755)" fill="${(data.profileCompletedAt === 100 ?"#00cc00" : "#d88181")}"/>
    </g>
  </svg>`

Additional Tips / Notes

To avoid seeing “null” when the first or last name field are empty, simply change the code of the “name” computed field to:

return (this.firstName ? this.firstName : '') + ' ' + (this.lastName ? this.lastName : '');

Conclusion

By integrating SVG files into your application, you can enhance both the static and dynamic visual elements of your user interface. Using simple image components for static displays, such as logos, and more advanced HTML components for dynamic, data-driven visuals like progress bars, ensures a flexible and interactive user experience. The step-by-step process allows for easy implementation and customization, whether you're tracking user progress or handling conditional data display. SVG integration offers powerful, scalable graphics that can adapt seamlessly to different needs within your application, improving both functionality and user engagement.

Related articles