Skip to content
Loading icons and small animations built with pure SVG.
HTML
Branch: master
Clone or download
Pull request Compare This branch is even with SamHerbert:master.

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
site-assets/images
svg-loaders
.gitignore
LICENSE.md
README.md
bower.json
index.html

README.md

Example

All loaders may be previewed at:

http://samherbert.net/svg-loaders

NOTE: Chrome 45 intended to deprecate SMIL icons but has since suspended that deprecation.

Usage

Download or bower install svg-loaders

<img src="svg-loaders/puff.svg" />

An icon's color can be manipulated by changing the fill attribute in the SVG file.

<svg fill="#fff" width="140" height="64" viewBox="0 0 140 64" xmlns="http://www.w3.org/2000/svg">

Note: Not all browsers support SVG, or more specifically, animated SVGs. Check (http://caniuse.com/#feat=svg-smil) to make sure you're good to go. If not, you may want to implement a fallback.

Minify

All SVG files are fairly small in size, but you can make them even smaller by minifying with something like SVGO.

Adaptations

React components by ajwann

You can’t perform that action at this time.