Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

LinkedIn Learning

SVG Graphics for the Web with Illustrator

via LinkedIn Learning

Overview

Prepare for a new career with $100 off Coursera Plus
Gear up for jobs in high-demand fields: data analytics, digital marketing, and more.
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
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

Taught by

David Karlins

Reviews

4.7 rating at LinkedIn Learning based on 18 ratings

Start your review of SVG Graphics for the Web with Illustrator

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.