Graphics and Animation
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.
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.
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)