Overview
-
Learn how to create Scalable Vector Graphics (SVG) files for websites and applications using Adobe Illustrator.
Syllabus
-
Introduction
- SVG—from Illustrator to screen
- What you should know
- What are SVG files?
- SVG files are everywhere
- Embedding SVG files in a webpage
- Setting up an SVG work environment
- SVG-friendly units of measure and color modes
- Minimizing strokes
- Creating SVG-friendly artboards
- Introduction to transparency and gradients
- Exporting with transparent backgrounds
- Applying transparency effects
- Applying gradients
- SVG filters vs. raster effects
- Surveying and applying SVG filters
- Importing and applying SVG filters
- Image maps and SVG
- Creating image map links
- Using the SVG Interactivity panel
- Saving type as SVG text
- Text on a path
- Integrating SVG text and files with generated code
- Syncing SVG artwork with scripts
- Saving as SVG basic options
- Saving SVG files with raster images
- Advanced Save Options
- When to export
- Using the SVG export option
- Advanced features of SVG export
- Why use Photoshop?
- Exporting from Photoshop vs. saving in Illustrator
- Optimal workflow
- Embedding SVG files in webpages
- Inserting SVG using HTML's native elements
- Meshing SVG with CSS styles
- Inserting and editing SVG code
- Next steps
