SVG Vectorial Graphics: Illustrate and Animate with Code
|
Learn to create vector illustrations for your website, from basic lines to interactive animations
If you’ve ever wanted to combine the technical power of web programming and the creative freedom of graphic design, this course is for you. Javier Usobiaga, web designer and cofounder of Swwweet studio, teaches you how to get the most out of scalable vector graphics (SVG), an interactive and responsive vector file format designed for web browsers as an alternative to JPG, PNG, and GIF file types. In this online course, discover the effects, filters, and animations you can use to create your own interactive illustrations with HTML, CSS, and JavaScript code.
Javier also teaches Introduction to Responsive Web Development with HTML and CSS on Domestika, a course that walks you through the fundamentals of front-end web development and helps you build the foundations you need for this course on SVG.
Start by exploring Javier Usobiaga’s work as well as his influences from the world of SVG illustration and animation.
Next, explore how the SVG format works at its simplest level to learn how to work with it and use it to your advantage. Get back to basics by writing code for an image using only a code editor, setting visual editors aside to understand the foundational mechanics. Learn to apply styles with attributes and CSS, and then delve into line, polyline, polygon, and path elements to create an endless variety of points, lines, and curves. Find out how to insert text tags and discover viewBox attributes to generate virtual windows allowing you to zoom in and define the visible portion of an image.
Once you’re familiar with the basics, it’s time to use other optimization features like vector editors and coding tools to group, define, and reuse SVG elements—effective and efficient alternatives to writing endless lines of code.
Then learn how to embed SVG elements in a website as Javier walks you through the various ways to incorporate content images, background images, and JavaScript coding. Explore ways to apply SVG to icons, its role in responsive websites, tips to improve legibility on screen, and methods for optimizing its application on all web browsers.
User Reviews
Be the first to review “SVG Vectorial Graphics: Illustrate and Animate with Code”
You must be logged in to post a review.
There are no reviews yet.