SVG Graphics for the Web with Illustrator

SVG Graphics for the Web with Illustrator

English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 2h 02m | 253 MB

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.

Topics include:

  • 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
Table of Contents

Introduction
1 SVG from Illustrator to screen
2 What you should know

SVG – Underrated for Web Graphics
3 What are SVG files
4 SVG files are everywhere
5 Embedding SVG files in a webpage

Creating an SVG Environment in Illustrator
6 Setting up an SVG work environment
7 SVG-friendly units of measure and color modes
8 Minimizing strokes
9 Creating SVG-friendly artboards

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

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

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

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

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

Exporting SVG for Screens
27 When to export
28 Using the SVG export option
29 Advanced features of SVG export

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

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