Tutorials and Resources to Learn and Master SVG
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.
Join the DZone community and get the full member experience.
Join For FreeBugsnag monitors application stability, so you can make data-driven decisions on whether you should be building new features, or fixing bugs. Learn more.
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.
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
Monitor application stability with Bugsnag to decide if your engineering team should be building new features on your roadmap or fixing bugs to stabilize your application.Try it free.
Like This Article? Read More From DZone
Published at DZone with permission of Jean-Baptiste Jung , DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.
{{ parent.title || parent.header.title}}
{{ parent.tldr }}
{{ parent.linkDescription }}
{{ parent.urlSource.name }}