CaraCarina | Creating animated SVG images for WordPress
This is the home of Caracarina Design & Art Studio that produces fine design for print and web, as well as fine art in the form of portrait paintings and drawings of humans and animals.
design, web design, print, print design, art, fine art, portraits, human portraits, pet portraits, dog portraits, animal portraits, caricatures, funny drawings, drawings, painting, sketch, brochure, billboard, pull up banner, flyer
15644
post-template-default,single,single-post,postid-15644,single-format-standard,ajax_fade,page_not_loaded,,qode-theme-ver-11.2,qode-theme-bridge,wpb-js-composer js-comp-ver-5.2.1,vc_responsive

Creating animated SVG images for WordPress

Creating animated SVG images for WordPress

This article explains how to create an SVG image from scratch, how to animate it (2D animation), and then implement the animated SVG on a WordPress page.

 

SVGs or Scalable Vector Graphics have been around for a while now, but for most print designers or hybrid print&web designers like me, it hasn’t been really exactly clear what their use was. Lately, though, i’ve been getting my teeth into SVGs and I am superexcited about the possibilities! 😀

So what makes SVG so supercool is that they are vector images for web. If this is your first meeting with that concept, allow that to sink in for a moment. Yes. Really! Never again do you have to manually resize and icon or a logo in e.g. Photoshop because the size at which you want to use it, is bigger than you had initially thought, and now it is pixelating. Your tiny little phone icon can be blown up to billboard size without losing a shred of clarity. Vector crispness at any size, across the board, at a teeny-tiny file size as compared to JPG or PNG. For the win!

And then to make them EVEN cooler, SVGs can animated too. Properties like colour, rotation, scale and position can be animated so you can bring your images, be they logos or icons or simple illustrations to life. SVG is an XML language and animation is written into the XML and then further manipulation is possible with CSS and JavaScript. In my opinion, SVG will become more and more ubiquitous on the web, so if this is all new to you, let’s jump in and get to know the humble SVG and how to use it 🙂

The Process:

Getting an animated SVG on your WordPress page is a process in 3 stages.
Stage 1: Create a vector image and export it as an SVG. (Alternatively, if you have a readymade SVG or vector, you can use that and proceed to Stage 2)
Stage 2: Upload the SVG to SVGator. SVGator is online software that allows you to animate your SVG and download it.
Stage 3: Install the correct plug in, activate it, upload your animated SVG to the WordPress Media Library, insert on your page or post et and voila!

Stage 1 – Create a vector from scratch that you will export as an SVG

You will need for this exercise:

Vector drawing software e.g. Adobe Illustrator (I know that CorelDraw and Ink Scape can export SVG but I cannot vouch for how those SVGs will behave – this tutorial is unfortunately therefore focused on vectors created in AI)
A basic level of proficiency is assumed for this tutorial, there is nothing tricky happening here, but you do need to be au fait with opening files, drawing shapes and exporting images.

  1. Open up a new document and draw your icon, logo or illustration using the shape and pen tools. It is good to at this point, already know what your plan is with the animation – you need to already start forming an idea of what you want to be happening with your animation so that you can plan the sections of your animation. To give you an example of what i mean – please refer to the drawing below that shows all my layers in the vector drawing and how they’ve been labelled accordingly
  2. To make your own job so much easier going forward, rename the objects in the Layers panel with names that will make sense to when you see them again later in the process. Arbitrarily named layers all blend together later on – do yourself the favour now 😀

    Screenshot of my AI page showing the illustration and the Layers panel

    In my mind, my plan is quite clear: this simple animation will do the following: we’ll start with just the midnight blue circle. In quick succession, the following will occur: the back line of trees will pop up, then then middle ground of trees, then the foreground of trees, the mountain and then the wolf, and from the top of the image the moon will drop down and the clouds draw in. Hidden at the moment, but something we will see, is a tiny rocket crossing the image. So knowing my plan, my layers are neatly ordered by trees, the mountain, the wolf, the clouds and the rocket. This way, when we import the SVG into SVGator, it will be crystal clear what we are looking at.

  3. Export the project to SVG. You can see the settings I used in the image below. Note that “Name as per layers” box is ticked – that way all the objects will be neatly named in Stage 2. Please also note the Styling: Presentation Attributes.

Export settings for exporting the SVG

 

Stage 2 – Upload your image to SVGator for creating the animations

  1. Navigate to SVGator at https://app.svgator.com
    This is a free and excellent resource for applying animation to individual elements in time line editing environment. If you familiar with editing software like Adobe Premier, Moviemaker or the like, it will be like a fish to water for you! Even if you are not familiar with editing software, the brilliant tutorial will make the process supereasy to understand.
    There is a fantastic tutorial video to watch at this link – the man explains the process beautifully and simply, you will know exactly what to do after watching the tutorial. Do that now and we’ll continue when you are done:
  2. The quick breakdown is that SVGator supplies a time line, a stage and an assets folder from where you can add objects to the time line to add animation affects. Position, scale, rotation and opacity can be edited with adding key frames to the time line and editing the properties for that key frame.
    Note: it seems that the stage’s maximum file display size is around 600px high, so keep your art work smaller than that for ease of editing in SVGator. There is a bit of a work around for taller images if you shrink the viewport on your browser (on PC you can hold down the Control key and ­­press the Minus key or roll the mouse wheel down – this will shrink the entire page to effectively create a bigger stage, but mind, all the controls and time line shrink too, so you don’t want to do too much of that.
  3. After creating an account and logging in, you will simply import your SVG that you’ve just compiled, and get the ball rolling in SVGator.
  4. Once you have completed your animation, download the now zwooshed up SVG and it is ready to upload to WordPress.

 

Stage 3 – Implement your animation on your WordPress page

WordPress does not have native capabilities for displaying SVGs – yet. Fortunately, until WP gets that sorted out, there are plug ins available to do the job!

A good one I like to use is SVG Support. Install the plug in on your Word presssite and activate it. This plug in allows you to upload SVG files to the Media Libray and you can even view the animation effects within the library.

Where you need to insert your image on the page, you can simply use the <img> tag. At the time of this writing, it did not yet work to use the image module in WP Bakery’s wizard to insert an SVG – you have to open the text editor and manually and insert the HTML. Once you have done that, WP Bakery will display the animation on the page editor in the little window where one views the architecture of the page, so you will be able to tell if it working.

It’s not a bad idea to specify a size when inserting your image – because it’s a vector, it could conceivable scale to the size of the world, and to be safe for responsibility across various device and screen sizes.

Note: don’t get a fright should you not see your newly uploaded SVG remain static – sometimes it takes the browser a moment to get it’s ducks in a row (or something) and then SVG will start animating in a short while.

And here is the finished product:

Resources about SVGs in general and where to find the SVGator tutorial and the plug in:
  • General reading on SVG and what/how/why: http://svgtutorial.com/what-is-svg/
  • Comprehensive elaboration on hand coding animation into the XML of your SVG (bb logo): https://svgontheweb.com/
  • Tutorial on using SVGator: https://www.youtube.com/watch?v=EBghzfllGjw&index=3&list=PLjWN23T3v1jGVFQO6apiaN2yz2HTvsa3B&t=0s
  • Plugin for implementing SVGs in your WordPress pages: https://wordpress.org/plugins/svg-support/

 

 

No Comments

Post A Comment