Search Over 30,000 FREE Plugins from the Official WordPress Plugin Directory Repository

Calder SVG

Animate prepared SVG drawing as a mobile picture.

Animate prepared SVG drawing as a mobile picture. Uses Anime.js and Vivus.js

Examples:

Author Max UNGER
Profile
Contributors munger41
Tags animation, art, calder, svg
  1. calder-svg screenshot 1

    Maria Callas

  2. calder-svg screenshot 2

    Bob Marley

  3. calder-svg screenshot 3

    Franz Liszt

  4. calder-svg screenshot 4

    Joe Cocker

  5. calder-svg screenshot 5

    Amy Winehouse

  6. calder-svg screenshot 6

    Wolfgang Amadeus Mozart

  7. calder-svg screenshot 7

    Rod Stewart

Easy

  1. Search Calder SVG via plugins > add new.
  2. Find the plugin listed and click activate.
  3. Use the Shortcodes

Shortcode

Add desired prepared (see example) images in wordpress standard uploads folder (on multisite uploads/sites/#/), and add shortcode to any page, specifing svg folder to use and animate:

[caldersvg svgs="../../uploads/svg/my_folder_containing_svg/"]

with all your .svg files in last folder.

The svgs parameter DOES NOT contain a URL (starting by http://), but a relative path on the server.

You can test with default demo files, included inside plugin (under calder-svg/svg/), but you have to copy them under your uploads wordpress folder before, and use something like shortcode:

[caldersvg svgs="../../svg/musicians/"]

SVG file example

If using Inkscape to create the SVG files, please save your files as Optimized SVG, then check that your file is containing a stroke and no fill for each path (else you could experience strange displays). Like:

fill="none" stroke-width="1" stroke="#cecece"
<svg id="svg7876" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 571.25 650" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
    <g id="g8426">
        <path id="path8440" fill="none" stroke-width="1" stroke="#cecece" d="m0 596.79c0-44.452 0.29402-53.508 1.7857-55 0.9822-0.99

Examples

1.7 - Vivus 0.4.0

1.6 - Animejs 2.0

1.3 - More explanations after feedback

1.0 - First stable release.

Share  
Download
Version 1.7

Requires WordPress version: 4.0 or higher

Compatible up to: 4.7.2

Last Updated 11 Feb 2017

Date Added: 07 Oct 2016

Plugin Homepage

Evaluation
star1
star2
star3
star4
star5

5 stars
1 ratings
101 downloads

Compatibility

Not Enough Data

Reports:
Works: 0
Broken: 0