In this tutorial you’ll learn three ways to create easy angled edges using SVG. To begin with we’ll use an inline SVG, then we’ll use an SVG background on a pseudo-element, before finishing off with a Sass mixin. Let’s dive in!
In this tutorial you’re going to learn how to make a very simple loader icon using SVG animations. What we’ll be covering is different from CSS animations—SVG animations reside in the actual SVG markup. Let’s kick things off by taking a look at the syntax.
SVG patterns offer a more flexible approach to repeating a background image on a web page than CSS tiling. Let’s look at why that is, and how you can use them.
In this quick tip we’re going to break down exactly what viewport and
viewBox are in SVG. You’ll learn:
Clipping and masking is a feature of SVG that has the ability to fully or partially hide portions of an object through the use of simple or complex shapes. Over the years many developers have taken these abilities and pushed them in various directions. In this article we’ll take a look at some advanced methods along with demos that showcase clipping and masking to great effect. Let’s get started!
Using SVG to handle the icons in your website designs can provide a number of advantages over using icon fonts. In our new course, Switching From Font Icons to SVG, you’ll learn what those advantages are, when they make SVG a better choice, and the practical steps to switch from font icons to SVG.
One of the great things about scalable vector graphics (aside from their being infinitely scalable without quality loss) is that once you know the fundamentals you can hand-code simple shapes quite easily, without needing to open a graphics application.
Bitmap images like JPEGs, GIFs, and PNGs all look awful when you scale them up, so if you want to maintain quality at large dimensions you have to increase file size. SVG images however (which stands for Scalable Vector Graphics) look exactly the same, regardless of the dimensions they’re scaled to and they keep the same file size.