Design the Web: Using Symbols in SVG
20mIntermediate2014-10-07
Authors
Chris Converse
Applies design and UX principles to technology
Course details
Design the Web shows designers how to build efficient and beautiful graphics and layouts from the ground up. In this installment, Chris Converse explains how to create new SVG graphics and then convert them into reusable symbols with Adobe Illustrator. Then he shows how to customize the symbols to fit your layouts by editing the position, transformation, and color properties of each instance you place. This technique allows you to build complex graphics much more quickly than you could design them from scratch. Exercise files are available to all members, so download them and get started creating your own rich web graphics today.
Skills covered
Web GraphicsIllustratorWeb DesignLimited SeriesAdobe
Concepts
0. Introduction
- 01 - Preview the final project
- 02 - About the exercise files
1. Creating, Updating, and Reusing Symbols in SVG
- 03 - How SVG sizing works
- 04 - Adding a circle element to an SVG graphic
- 05 - Creating a symbol
- 06 - Creating multiple instances of a single symbol
- 07 - Updating the symbol source art
- 08 - Transforming instances of a symbol
- 09 - Recoloring instances of a symbol