Lynda Organizing and Storing Digital Photos and Videos
Lynda Organizing and Storing Digital Photos and Videos
July 6, 2022
Lynda Pastel Drawing with Photoshop
Lynda Pastel Drawing with Photoshop
July 6, 2022

Lynda Web Icons with SVG

Lynda Web Icons with SVG

As designers and developers of the web, we want graphics to look sharp, but we need to keep file sizes down for performance. How do you get the best of both worlds? There is pretty much only one way to go: SVG.

SVG is an XML-based method for instructing the browser to draw scalable vector graphics based on defined shapes and coordinates. The challenge with SVGs is they are not like other graphic files: Rather than a grid of pixels, they are code instructions interpreted by the browser on the fly. This poses some unique challenges and unique opportunities when it comes to implementation. In this course, you’ll learn various methods to deploy SVG icons in webpages, each with its own use cases, benefits, and drawbacks. Morten Rand-Hendriksen shows how to insert individual SVG images, add SVGs as inline elements and SVG sprites via the command line, and automate SVGs with Grunticon. Plus, get tips on making your graphics backward-compatible and accessible, and using SVG icons in WordPress.

Topics include:
SVG vs. icon fonts
Getting existing SVG icons
Creating your own icons
Adding individual SVG icons to webpages
Adding SVG as an inline element or background image
Using external and inline SVG sprites
Automating SVG generation with Grunticon
Using SVG icons in WordPress

 

Author Morten Rand-Hendriksen
level Intermediate
Duration 1h 44m
File siza 282 MB

 

Lynda Web Icons with SVG

 

DOWNLOAD