Tutorials and resources to learn and master SVG

---

The Practical Beginner’s Guide to SVG

Are you new to SVG? If yes, this article is a great starting point. It discusses the practical applications, pros and cons, browser support, and also provides a few resources for you to get started in no time.
Read: The Practical Beginner’s Guide to SVG

How to work with SVG icons

One of the most interesting use of the SVG format is definitely for making icons. This article explains in depth how to prepare your icons, make SVG sprites, adding icons to your pages, and styling icons using CSS. A must-read for every serious web designer or front-end developer.
Read: How to work with SVG icons

Optimizing SVGs for Web Use

You probably know that loading speed is a very important factor of the quality of a website. Every element of a web page – images, scripts, stylesheets, and so on – have to be optimized in order to save bandwidth and provide your users the best experience possible.

This article will show you how to optimize your SVG for the web.
Read: Optimising SVGs for Web Use

Inline SVG vs Icon Fonts

I’ve recently showcased some awesome icon fonts that you can use to replace .gif or .png images for icons. But as you’re in the process of mastering the art of SVG, what about a complete comparison of both SVG icons and icon fonts?
Read: Inline SVG vs Icon Fonts

Pure SVG progress circles

Enough theory for now, it’s time to get practical. What about pure SVG progress circles? Here’s a complete, well-written and explained tutorial on how to do it.
Read: Pure SVG progress circles

Distorted Button Effects with SVG Filters

Applying SVG filters on HTML elements gives you some great opportunity to get creative with click interactions. Adrien from Codrops shows us a still kind of experimental, but definitely promising technique to add a distortion effect on buttons using SVG filters.
Read: Distorted Button Effects with SVG Filters

Masking in the Browser with CSS and SVG

Masking is a technique that lets you display selected portions of an element or an image on the screen while hiding the rest. Web developers can use this technique in the browser via the mask property and the SVG mask element. This tutorial will show you how you can use various masking techniques with SVG and CSS.
Read: Masking in the Browser with CSS and SVG

Creative Typography with SVG

SVG allows incredible text manipulation for a top-notch typography. Here’s an article which will show you by the example how your website typography can benefit from SVG.
Read: Creative Typography with SVG

Pro tips for using scalable vector graphics

Let’s finish this round-up with a little guide full of useful tips to embed SVGs, structure your code, use effects, and more. A great addition to your new SVG skills!
Read: Pro tips for using scalable vector graphics

Thanks to: CatsWhoCode.com Permanent link