Course
Skills Expanded
Creating Responsive SVGs in Illustrator and CSS
Throughout these Illustrator and CSS tutorials, you'll learn how to make SVG (Scalable Vector Graphics) responsive. Software required: Adobe Illustrator CC 2014.
What you'll learn
Throughout these Illustrator and CSS tutorials, you'll learn how to make SVG (Scalable Vector Graphics) responsive. We'll first step inside of Adobe Illustrator to design custom SVGs for our project. Next, we'll export the SVGs and, through HTML and CSS, you'll learn how to manipulate the SVGs based on media queries. By the end of the Illustrator and CSS training, you'll understand how to make the SVGs interactive with hover and click events. Software required: Adobe Illustrator CC 2014.
Table of contents
Introduction and Project Overview
0mins
Creating Responsive SVGs in Illustrator and CSS
91mins
- Designing the First Icon 9m
- Replicating the Icon for Two Different Sizes 7m
- Creating the HTML Document 5m
- Making the Layout Responsive with CSS 8m
- Making the SVG Responsive with CSS 6m
- Designing a 'Satisfaction Guaranteed' Emblem 8m
- Designing the Center of the Emblem 9m
- Replicating the Emblem for Two Different Sizes 8m
- Writing the HTML and CSS 9m
- Making the Emblem Responsive 7m
- Making the SVG Interactive with Hover Effects 8m
- Making the SVG Interactive on Mouse Click 8m
