Animations are a ubiquitous part of the web. Unlike the flashing GIF images that plagued websites in the internet’s earlier days, today’s animations are more subtle and tasteful. Designers and front-end specialists use them to make websites look more polished, enhance the user experience, call attention to important elements, and convey information.
Web developers can benefit from combining the power of SVG and CSS to create animations without using external libraries. This SVG animation tutorial shows how to build custom animations for real-world projects.
SVG Animation: CSS and Core Concepts
Before using CSS to animate SVGs, developers need to understand how SVGs work internally. Fortunately, it’s similar to HTML: We define SVG elements with XML syntax and style them with CSS, just as if they were HTML.
SVG elements are purposely built for drawing graphics. We can use <rect> for drawing a rectangle, <circle> for drawing circles, etc.—SVG also defines <ellipse>, <line>, <polyline>, <polygon>, and <path>.
Note: The full list of SVG elements even includes <animate>, which allows you to create animations using synchronized multimedia integration language (SMIL). However, its future is uncertain and the Chromium team recommends using a CSS- or JavaScript-based approach to animating SVGs whenever possible.
The available attributes depend on the element, so while <rect> has width and height attributes, the <circle> element has the r attribute, which defines its radius.
Select basic SVG elements; coordinates are relative to the origin (the top-left corner of the SVG viewport).
While most HTML elements can have children, most SVG elements cannot. One exception is the group element <g>, which we can use in order to apply CSS styles and transformations to multiple elements at once.
The <svg> Element and Its Attributes
Another important difference between HTML and SVG is how we position elements, notably via the viewBox attribute of a given outer <svg> element. Its value consists of four numbers separated by whitespace or a comma: min-x, min-y, width, and height. Together, these specify how much of our SVG drawing we want the browser to render. That area will be scaled to fit the bounds of the viewport, as defined by the width and height attributes of the <svg> element.
When it comes to letterboxing, the ratio of the width and height attributes of the viewport may indeed differ from the ratio of the width and height parts of the viewBox attribute.
By default, the aspect ratio of the SVG canvas will be preserved at the expense of a larger-than-specified viewBox, thereby causing a smaller, letterboxed rendering within the viewport. But you can specify a different behavior via the preserveAspectRatio attribute.
This allows us to draw images in isolation and be confident that all elements will be positioned correctly no matter the context or rendering size.
Maintaining the aspect ratio of an image via letterboxing.
While you can code SVG images by hand, more complex images may require a vector graphics program (our SVG animation tutorial demonstrates both techniques). My editor of choice is Affinity Designer, but any editor should provide enough functionality for the simple operations covered here.
Post a Comment