The <text> element defines a graphic consisting of text. Writing and editing <text> in SVG provides a very powerful ability to create scalable text as graphics that can be easily changed and edited within the SVG code. The use of the <text> element and…

Using SVG inline provides total access to the graphic for complete customization and control over its output. This is especially handy when creating shapes by hand in the browser, or making edits to an existing graphic. There are a number of stroke related attributes within SVG that allow us to…

I recently wrote a post on understanding SVG viewport and viewBox and figured this would be the perfect follow-up topic to quickly dig a little deeper. Understanding SVG workspace can be really tricky. There is a lot of customization to be had within this space and the more details we…

In using the <svg> element we are establishing a fragment consisting of nested details in our document. This fragment has its own viewport and coordinate system which can seem very complex and intimidating when first getting started. Understanding the workspace of SVG is helpful in properly rendering your…

I have been working with SVG gradients a lot lately. I wrote about getting started with SVG gradients over at SitePoint, and also an intro on animating SVG gradients over at Designmodo. While they are super neat and pretty straight forward, I ran into a couple cross browser issues that…

I recently did some experimenting with animating inline SVG icons and wanted to quickly review my process and the joys and frustrations I ran into. This demo is for Chrome only for now. Click to animate. See the Pen Animated Shopping Cart Icons by Joni Trythall (@jonitrythall) on CodePen. The…