SVGInjector

Scalable Vector Graphics (SVG)

Documentation and examples of the SVG components.

SVGInjector

A fast, caching, dynamic inline SVG DOM injection library.

Overview

There are a number of ways to use SVG on a page (object, embed, iframe, img, CSS background-image) but to unlock the full potential of SVG, including full element-level CSS styling and evaluation of embedded JavaScript, the full SVG markup must be included directly in the DOM.

Wrangling and maintaining a bunch of inline SVG on your pages isn't anyone's idea of good time, so SVGInjector lets you work with simple img tag elements (or other tag of your choosing) and does the heavy lifting of swapping in the SVG markup inline for you.

How it works

Any DOM element, or array of elements, passed to SVGInjector with an SVG file src or data-src attribute will be replaced with the full SVG markup inline. The async loaded SVG is also cached so multiple uses of an SVG only requires a single server request.
Any embedded JavaScript in the SVG will optionally be extracted, cached and evaluated.

Development tip

The dynamic injection process uses AJAX calls to load SVG. If you are developing locally without running a local webserver, be aware that default browser security settings may block these calls.

IE support

IE doesn't properly scale SVG files. The issue can be resolved by adding fixed height. Each case must be approached individually.

How to use?

Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.

            
              <script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>

Copy-paste the following <script> near the end of your pages under JS Front to enable it.

            
              <script src="../../assets/js/components/hs.svg-injector.js"></script>

Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.

            
              <script>
                $(document).on('load', function () {
                  // initialization of svg injector module
                  $.HSCore.components.HSSVGIngector.init('.js-svg-injector');
                });
              </script>

Add some SVG img tags.

            
              <img class="js-svg-injector" src="../../path/to/svg-file.svg">

Load SVG elements with Preloader - is important interface element that let visitors know that the website hasn't crashed, it's just processing data.

            
              <figure id="usageExampleID" class="svg-preloader">
                <img class="js-svg-injector" src="../../path/to/svg-file.svg"
                     data-parent="#usageExampleID">
              </figure>

                  
                    <figure id="basicExampleIcon" class="svg-preloader max-width-8 mx-auto">
                      <img class="js-svg-injector" src="../../assets/svg/icons/icon-1.svg" alt="SVG"
                           data-parent="#basicExampleIcon">
                    </figure>