- Web templates
- E-commerce Templates
- CMS & Blog Templates
- Facebook Templates
- Website Builders
FAQs
General Tutorials
MonsterONE Subscrioption
How to create SVG animation
December 25, 2017
Have you heard about SVG images? SVG is Scalable Vector Graphics, which defines the graphics in XML format. The SVG image does not lose its quality if it is zoomed or resized. Unlike the other formats, SVG image could be easily animated with the help of CSS. To do that, follow a few simple steps:
Choose an image you wish to animate. Don’t pay attention to the image format. We will convert it to SVG further.
-
The image is selected! We can do the next step now, and convert it to SVG format. You can find a great variety of online SVG image converters on the Internet.We are going to use AConvert.com converter.
Converter page looks this way:
First of all, browse selected image from the computer or enter your image URL to the first field.
Select SVG from the Target form field.
-
This online tool allows you to change image dimensions. You can leave default image size or enter required dimensions to the Change image size to field.
Click Convert Now! button to start conversion.
-
Wait a minute and scroll down to the Conversion Results section and click Save button to save the result.
You will be redirected to the File information page. The output file can be downloaded to your computer or saved to an online storage services such as Google Drive or Dropbox.
Open the saved file with any code editor on your computer. We recommend using NotePad++ or Sublime code editors.
-
Copy the <svg> </svg> tags content.
Paste this code to the div tag with a class you have added to your image:
Where car is your class id.
-
Now we can add animation to your SVG image. To do that use one of the online tools available, for example, CSS Animate.
Enter your div class name to the Class name field.
Select an effect for your element from the Elements popup.
Change animation settings in the Keyframes window. You can set up animation speed, element position and frame properties here.
To check the result you can click on Play button in Timeline window.
Click Copy Code button to save generated CSS code.
-
Go back to your HTML file. Add <style> tag with copied css code to the <head> section in your HTML file.
-
You can use additional CSS styles for your SVG animation. Add CSS code for background to the same <style> tag. Save the file and check the result.
Want to add SVG support to your WordPress website? Learn how to do this!
