Graphics and Animation
Over the past few weeks, I’ve been working on an application to simulate multiple production processes working in tandem and decided to re-introduce myself to the world of animation. In its present state, the application is working quite well using just the core HTML5, CSS3, and JavaScript web languages.
The HTML5 canvas makes it easy to render graphics where CSS3 and JavaScript are used to manage and manipulate various animation effects. Aside from the canvas element, OpenGL, WebGL / WebGL 2.0, SVG (Scalable Vector Graphics) and SMIL (Synchronized Multimedia Integration Language) or VML (Vector Markup Language) are also options to render graphics to your web page.
While HTML canvas is relatively easy to understand, working with SVG can be a little more complicated. Fortunately, a number of packages exist that can be used to create our shapes and several JavaScript libraries are available to work with the generated SVG files.
Creating Vector Graphics
Adobe Illustrator is a great product but also demands a monthly subscription fee which, unless you’re a professional web developer, isn’t something too many of us want to add to our monthly budget.
An SVG Editor (by henoc) is available for Microsoft’s Visual Studio Code that can simplify the task of working with SVG. You may also wish to consider using:
- Vectr, a free cross-platform vector graphics editor, that allows you to create scalable vector graphics in 2D. You can use the online version or download a copy of the application for your operating system (Windows, Mac, Linux, or Chromebook).
- Inkscape a professional vector graphics editor for Windows, Mac OSx and Linux. Free and open source.
- Gravit Designer is a very capable and powerful design tool. You can use the online version or download a copy of the application for your platform (Mac OSx, Windows, Linux, and Chrome OS).
- There are also a number of online SVG editors – easily found with a simple Google search – where you can create simple 2D SVG files online and save them locally to your machine.
- It is also worth noting that the WebStorm IDE by JetBrains, our IDE of choice for web-based applications, also provides a level of support for working with SVG files.
JavaScript Libraries for SVG
While we can manipulate and work with SVG data directly using CSS and native JavaScript, a number of libraries are available that provide significantly enhanced functionality and effects. Some commonly used libraries for working with SVG data include:
JavaScript libraries will save you a tremendous amount of time and effort so you can focus on your application. It is also possible to render 3D models using SVG with more highly capable JavaScript libraries.
Browser Support and Local Files
Browsers provide varying degrees of support for today’s web technologies and knowing what is or is not supported will determine whether your application will run as intended. IE (Internet Explorer) is one browser that is typically lacking in support for capabilities such as CSS transforms on SVG elements.
Remember: Browsers are NOT created equal.
Some browsers like Chrome do not permit access to files or data on your local drive and you may receive an error similar to the one pictured above if you make the attempt. Fortunately, I’m using the WebStorm IDE by JetBrains and have the option to run code either as a local file or using the built-in server.
Use a local server if you are using Chrome or another browser that does not provide access to data files that are local to your machine.
Responsive Websites
A responsive website is one of the more significant and noteworthy advantages of using SVG for your graphic elements. Scaling your site to accommodate devices of all shapes and sizes is less of a challenge with SVG. Images retain their original quality regardless of scale, can be created or edited with any text editor, and can be manipulated or enhanced using CSS and JavaScript. These reasons alone make learning SVG that much more rewarding for you and your visitors.
The options for animating your website are many and limited only by your imagination. As I’ve said many times before, “There’s always a better way and more one solution.” Working with SVG’s and the number of API’s available to animate them proves this statement to be true yet again.
Until Next Time – STAY lean!
Related Articles and Resources:
- SVG Tutorial – W3Schools.com
- Inkscape – Professional vector graphics editor for Windows, Mac OSx and Linux. Free and open source.
- Vectr, a free cross-platform vector graphics editor, that allows you to create scalable vector graphics in 2D. You use the online version or download a copy of the application for your operating system (Windows, Mac, Linux, or Chromebook).
- 6 Free Web-Based SVG Editors Compared, by Ada Ivanoff, Sitepoint.com
- Boxy SVG: A Fast, Simple, Insanely Useful, FREE SVG Editor, by Alex Walker, Sitepoint.com
- The Best Free Alternative to Adobe Illustrator 2018, by Tom May, TechRadar.com
- Adobe FrameMaker (2017)
- Mastering Web Animations Using SVG [Video], by Michel Marc Lacroix (Packt Publishing)
- Learning Raphael JS Vector Graphics, by Damian Dawber (Packt Publishing)
- SVG and Interactive Visualization in D3 [Video], by Nick Zhu (Packt Publishing)
- Web Animations API Concepts – MDN web docs (moz://a)
- Silky Smooth Web Animation with Velocity.js, by Thoriq Firdaus
- The WebGL API: 2D and 3D graphics for the web – MDN web docs (moz://a)