Progressive Web Apps (PWAs) are a new and exciting way to build web applications. With interest in PWAs growing among clients and developers alike, we need to rethink our development process to accommodate PWA performance. Let’s dive into managing SVG assets!
How to use SVGJar
The bird's eye view description of this method is that we include every SVG on our app inline. The plugin Ember SVGJar gives you a clean interface where you can interact with every icon added to the plugin. Which allows you to include every SVG inline on the app.
Having inline SVG injection management with SVGJar offers a few advantages right away:
- SVG assets used with CSS background property
- SVG assets are included inline so you have full creative control over the SVG with CSS styling
- Most performant way of including optimized SVGs on a page
We organize our SVG assets in an asset folder linked to SVGJar. The plugin inserts the SVG assets into the page where you include the handlebar helper.
{{svg-jar "asset-name"}}
The result is that the Ember app sees what SVGs are needed and, thanks to SVGJar, pulls the asset from the asset folder, injecting the SVG code directly into the HTML before it gets sent to the server and then browser.
For developers working within React, you can easily make a SVG include component that holds all SVG assets. You then include that component into any template that needs a SVG and freely insert that inline SVG. Same method, just different tooling.
PWA Benefits
When developing a PWA, it’s important to keep asset management as lean as possible. Utilizing a performant way of including an SVG that is easily cached within HTML can significantly improve PWA performance. No tree shaking, no sending a large icon asset folder to the user, just clean and performant HTML files that get cached on the device.
In the past, managing hundreds of inline SVGs was a development blocker but, with modern tooling, we can create SVG management tools that scale. These tools (SVGJar and a React SVG component) enable the developer to focus on the quality of their SVG assets over an implementation solution that is easier for the developer but less ideal for the performance of an application.
Now you can get creative with SVGs and enhance how you develop PWAs.
This post originally appeared on DockYard, where I currently work as a Senior UX Developer. DockYard is a digital product agency offering exceptional strategy, design, full stack engineering, web app development, and custom software services, consulting, and training.
Top comments (0)