js-svglibrary
Library with some collected, free to use SVG images. The images can be loaded on demand and be applied as background-image. The library supports caching of images and enables the distribution of images within one JavaScript file (e.g., by using requireJs, minifying, or uglify).
Thanks a lot to the authors providing free SVG images.
- SamHerbert (https://github.com/SamHerbert/SVG-Loaders)
You should check, if your supported browsers can use SVGs and animated SVGs
- SVG (basic support), and
- SVG SMIL animation for animated image support.
How to Install
The library can be used with bower
, requireJs
or as individual JavaScript Import
. The following paragraphs
explain how to use the library in the different scenarios.
bower
Using js-svglibrary with bower install --save js-svglibrary
The library will be added to your bower-components
. By default the js-svglibrary.js
is selected as single main file, which is the
not minified version of the library (the minified/uglified version is js-svglibrary.min.hs
). Examples on how to use the library can
be found here.
requireJs
Using js-svglibrary with If you are building larger web-applications and you want to enjoy the advantage of requireJs, you
need to include the sources (and not the optimized libraries). To do so, you may download the tarball or a zip-archive from
GitHub and place it into your scripts
folder. You can then require the needed library as following:
;
It is also possible to integrate images directly into your distribution package. Let's assume that you defined a module,
which shows a popup and you would like to add a loading spinner, without having to add additional files to your one .min.js
distribution. In the following example the path/to/spinner
points to a file containing a SVG definition, like these.
;
JavaScript Import
Using js-svglibrary with If you simple want to use the library within your web-site, you can easily do so by downloading it, deploying it on your
server and adding <script>...</script>
tags:
The library is bound to the window
instance and thus is directly available for any other script:
If you'd like to have this library available through a CDN, please Star the project.
Usage Examples
Here are some jsFiddle examples utilizing the library. All examples are purely based on this library, no additional dependencies needed.
A Simple Example (div-container with spinning circle)
https://jsfiddle.net/pmeisen/sLvyzjdp/
This example demonstrates how easy it is to use the integrated SVG elements:
- LoadingCircles
- LoadingCircleSpin
- LoadingSpin
Just play around and change the data-svgimage='LoadingCircleSpin'
:
It is also easy to modify the size of the image by adding an additional CSS attribute:
Using external SVGs
https://jsfiddle.net/pmeisen/w2ar9p2a/
It is also possible to load SVG from other URLs and also from files located on your own server. This examples shows how to load a SVG from a CDN. You can easily change the location by specifying a different url.
Assign SVG by Name
https://jsfiddle.net/pmeisen/j81d76h7/
The previous examples used attributes to specify what image to show. In this example, the image is assigned to the container based on a name.
Add new SVG Images
https://jsfiddle.net/pmeisen/uL9rs04z/
This example adds a new SVG image to the library and applies it to a container.