Over a million developers have joined DZone.

Tutorials and Resources to Learn and Master SVG

SVG is an ideal format for storing some types of images because information stored as a vector may assume any rendered size yet is encoded once. This is a collection of resources for learning techniques and tools.

· Web Dev Zone

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. As a web developer or designer, using SVG online has numerous advantages: bandwidth-friendly, open format, easy to style using CSS, and many more. Here’s a round-up of useful tutorials and resources to learn and master the art of using 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

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.

Topics:
images ,svg ,tutorials ,web developer ,vector

Published at DZone with permission of Jean-Baptiste Jung, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}