Site icon Lean Execution

Lean Code – Web Graphics

Redge Shepherd
Advertisements

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:

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:

 

 

Exit mobile version