SVG Graphics for the Web with Illustrator

Course details

The Scalable Vector Graphics (SVG) format is everywhere these days. SVG is used for data-driven infographics, interactive maps, icons, searchable type, architectural renderings, and anywhere you need scalable, animated, or interactive artwork. Want to create your own? Adobe Illustrator is the designer-friendly environment for creating SVG files for the web. This course teaches you how to create, save, and modify SVG files in Illustrator, with the occasional assist from other Adobe Creative Cloud products. Instructor David Karlins covers the basics of SVG—what it is and how it's used—and shows how to configure Illustrator for optimal productivity with SVG. He explains how to incorporate scalable transparency and gradients, apply SVG filters, add interactivity, and generate styled, searchable graphical type. He also shows the best settings for saving and exporting your artwork as SVG, and reviews the process for embedding SVG files or code into webpages and applications.

Learning objectives
What are SVG files?
Embedding SVG files in a webpage
Setting up an SVG-friendly environment in Illustrator
Scalable transparency and gradients
Applying SVG filters
Generating links with scalable, programmable image maps
SVG typography
Saving as SVG
Exporting to SVG
Publishing Illustrator SVG images on the web

Concepts

0. Introduction

01 - SVG from Illustrator to screen
02 - What you should know

1. SVG - Underrated for Web Graphics

03 - What are SVG files
04 - SVG files are everywhere
05 - Embedding SVG files in a webpage

2. Creating an SVG Environment in Illustrator

06 - Setting up an SVG work environment
07 - SVG-friendly units of measure and color modes
08 - Minimizing strokes
09 - Creating SVG-friendly artboards

3. Transparency and Gradients

10 - Introduction to transparency and gradients
11 - Exporting with transparent backgrounds
12 - Applying transparency effects
13 - Applying gradients

4. Applying SVG Filters

14 - SVG filters vs. raster effects
15 - Surveying and applying SVG filters
16 - Importing and applying SVG filters

5. Image Maps for SVG

17 - Image maps and SVG
18 - Creating image map links
19 - Using the SVG Interactivity panel

6. Optimizing Typography for SVG

20 - Saving type as SVG text
21 - Text on a path
22 - Integrating SVG text and files with generated code

7. Saving as SVG

23 - Syncing SVG artwork with scripts
24 - Saving as SVG basic options
25 - Saving SVG files with raster images
26 - Advanced Save Options

8. Exporting SVG for Screens

27 - When to export
28 - Using the SVG export option
29 - Advanced features of SVG export

9. Exporting to SVG from Photoshop

30 - Why use Photoshop
31 - Exporting from Photoshop vs. saving in Illustrator
32 - Optimal workflow

10. From Illustrator to the Web

33 - Embedding SVG files in webpages
34 - Inserting SVG using HTML's native elements
35 - Meshing SVG with CSS styles
36 - Inserting and editing SVG code

Conclusion

37 - Next steps