SVG Graphics for the Web with Illustrator

Learn how to create Scalable Vector Graphics (SVG) files for websites and applications using Adobe Illustrator.

Introduction

• SVG—from Illustrator to screen
• What you should know

1. SVG: Underrated for Web Graphics

• What are SVG files?
• SVG files are everywhere
• Embedding SVG files in a webpage

2. Creating an SVG Environment in Illustrator

• Setting up an SVG work environment
• SVG-friendly units of measure and color modes
• Minimizing strokes
• Creating SVG-friendly artboards

3. Transparency and Gradients

• Introduction to transparency and gradients
• Exporting with transparent backgrounds
• Applying transparency effects
• Applying gradients

4. Applying SVG Filters

• SVG filters vs. raster effects
• Surveying and applying SVG filters
• Importing and applying SVG filters

5. Image Maps for SVG

• Image maps and SVG
• Creating image map links
• Using the SVG Interactivity panel

6. Optimizing Typography for SVG

• Saving type as SVG text
• Text on a path
• Integrating SVG text and files with generated code

7. Saving as SVG

• Syncing SVG artwork with scripts
• Saving as SVG basic options
• Saving SVG files with raster images
• Advanced Save Options

8. Exporting SVG for Screens

• When to export
• Using the SVG export option
• Advanced features of SVG export

9. Exporting to SVG from Photoshop

• Why use Photoshop?
• Exporting from Photoshop vs. saving in Illustrator
• Optimal workflow

10. From Illustrator to the Web

• Embedding SVG files in webpages
• Inserting SVG using HTML's native elements
• Meshing SVG with CSS styles
• Inserting and editing SVG code

Conclusion

• Next steps