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

Provider Logo

SVG Graphics for the Web with Illustrator

via LinkedIn Learning

Overview

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

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.

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

Related Courses

Reviews

0.0 rating, based on 0 reviews

Start your review of SVG Graphics for the Web with Illustrator

Never stop learning Never Stop Learning!

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

Sign up for free