Week 11

Introduction to SVG

This week we will learn the basics of SVG in Illustrator and our code editors.

Outline

What are SVGs?

Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. SVG images are defined in XML text files. In this section, we are going to learn how to generate good SVG code using Adobe Illustrator and preparing it to be animated and used on the web as well as how to write our own SVG code from scratch.

SVGs are code

SVGs are purely vector graphics written in XML markup language. We can use a pure code editor to create an SVG. Let’s follow along this series of video tutorial and write SVG markup with VSCode.

Writing SVG Code

In this video we will learn to write SVG code from scratch and integrate it into an HTML document. Read SVG reference of Writing SVG code for basic syntax and SVG shapes.

SVG Attributes and CSS

It’s common practice to use both SVG style attributes and CSS to style SVGs. Watch this video to learn the why and how.

SVG Text

Using text directly inside our SVG has lots of benefits: We can apply web fonts, masking, gradients, and textures to them and they are fully accessible.

Reference: SVG text

Text & web fonts

We will follow along this video tutorial to practice using element to add live/accessible texts inside an embedded SVG and apply web fonts to it.

Masking text

Continue with this video to learn how to use element to mask out pieces of text to create different effects:

Gradients on text

In this video, we will apply gradients into the text letters using SVG.

These online tools let us generate code for SVG gradients, CSS gradients and edit their code.

Textures on text

We can also add image textures to text using SVG and the tag. In this video, we will make the pattern big enough to only show it once.

From AI to SVG

Using Adobe Illustrator (Ai) to design graphics and then export them in SVG format allows us to use that code directly on the web and animate it using CSS. The cleaner and more organized our Ai file is, the easier it will be to manipulate the SVG code later on. Follow this videos to exporting SVGs from Illustrator for animation.

Cleaning generated SVG

Now we know that if we use SVGs generated by a tool like Adobe Illustrator, Sketch, or Inkscape, there’s lots of extra cruft that we don’t need in the files. We can use some optimization tools to clean up the SVG. Here are the two popular online tools to use.

SVG Icons & Symbols

Animated SVGs are great for icons which can indicate micro-interactions and state changes and guide a user to the next action in an onboarding tour. They are commonly used to show status of loading, uploading, menu toggling, and playing/pausing a video. We will practice using SVG icons in this video tutorial.