We’re pretty excited by tools such as SVGator, which really speed up the process when you’re making simple SVG animations. Animated SVG files have become very popular, because they are entirely scalable, small and 100% code-based, which allows for so many transformations and tweaks. This, however, comes at a price: the steep learning curve for complete beginners. In this article, Vitaly Friedman will show you how easy it is to use and how you can get a great-looking animation in no time.
Read more…
SVG supports the same kind of interactivity we’re used to with HTML. And with the addition of pointer-events, we can improve the way our SVG documents behave in response to user interaction. Every browser that supports SVG supports the property for SVG documents and elements. When used with HTML elements, support is slightly less robust. It isn’t available in Internet Explorer 10 or its predecessors, or any version of Opera Mini. In this article, Tiffany Brown will scratch the surface of pointer-events.
Read more…
For the Build 2016 conference, David Rousset had to create a small 8-bit drum machine, with 8-bit sounds and graphics. Building it might sound trivial, but it raises some interesting questions. For instance, how do you guarantee the same experience across all devices and browsers, accounting for resolution and touch support? In this article, David Rousset is going to share some tips he followed to build it.
Read more…
How far can we push SVG animation? At the time, designer Chris Halaska and Michael Ngo were colleagues working on an illustration-heavy campaign website. While aesthetically pleasing, the designs lacked the required “oomph” that all creatives search for. Their idea was to create a data-driven process that enables designers to quickly prototype animations from static illustrations. In this article, Michael will take a look at how you can use SVGs to create seemingly complex animations from simple illustrations.
Read more…
Image filters are a fun and effective way to provide visual unity and aesthetic appeal on the web. Keep in mind that they do come with a slight performance hit, but also with the benefits of speedy design in the browser and the opportunity to design interactions with. In this article, Una Kravets will take a look at one of the most popular image effects, grayscale, and assess both the ease of implementation and performance implications of HTML canvas, SVG, CSS filters, and CSS blend modes. Which one will win?
Read more…
Using external SVG sprite maps to deliver lossless scalable vector images is widely used in responsive web design today and well-supported by tools like svg4everybody. At German newspaper Zeit Online, we embraced this technique quite a lot. However, we recently changed this workflow back to completely inlining the SVG into the HTML owing to a bug in Apple’s Safari browsers– the same way GitHub is doing with its octicons.
Read more…
In this article, Cosima Mielke will provide you with tools and resources to simplify editing, converting, optimizing, and delivering SVGs. She’ll take a look at what you can do to make your SVG code lean and performant, dive deeper into dealing with browser bugs, and provide tips for designing an icon system. This piece boils the key takeaways from the mentioned resources down to easily digestible bits that you can squeeze into a coffee break for some in-between SVG enlightenment.
Read more…
In this article, Ilya Zayats will show you that, from React’s perspective, there is no difference at all in what to render. React helps to organize an application into small, human-digestible chunks. You can avoid any complex internal interactions between small components, while your application continues to be blazingly fast due to the DOM-diffing that React does under the hood. Trying to grasp what’s wrong with a graph or visualization just by looking at SVG generator templates is often overwhelming, and attempts to maintain internal structure or separation of concerns are often complex and tedious. So, can we apply the same techniques to web graphics — SVG in particular? Yes!
Read more…
Clip paths open up a wide array of exciting possibilities. Understanding the simple mechanics and how everything moves relative to each other can help you create some powerful and captivating interactions for your users. In this article, Dennis Gaebel Jr explains the difference between an SVG clipPath and a CSS clip-path, including examples to guide and inform you through this journey. Finally, he’ll share a few demos both personal and in the wild to help you better understand clipPath animation and inspire your visions.
Read more…
In this article, Heydon Pickering mixes old with new, taking a somewhat primitive art and breathing new life into it. With the help of Sass, he streamlines the necessary workflow and hopefully demonstrating that automation can, sometimes, be a friend to creativity. The reason he conceived the technique and wrote the necessary code for this article is because he really wanted to make cel animations of his drawings. There was already a goal. The design part is in determining what we want to make in the first place, for whom, and whether it’s really such a good idea.
Read more…
