by Aarthi Elumalai | Publisher: Packt Publishing | Release Date: February 2019 | ISBN: 9781838645991

Create awesome 2D vector graphics with SVG (code) + HTML - over-the-shoulder training with multiple projects per module.About This VideoWe like to be thorough in our teaching. You'll find everything you need to start creating awesome 2D vector graphics with SVG code/syntaxes in this course. You won't have to look anywhere else.We strongly advocate learning by doing, rather than just listening or reading. Our lectures are filled with a wealth of examples that explain every concept clearly.In DetailAre you a programmer who hates graphic design? But do you still want to create awesome 2D vector graphics for your web projects? SVG (Scalable Vector Graphics) is way to go! Forget mastering complicated graphic design software that have nothing to do with programming. You can now create every kind of vector graphics with just a few lines of code. No design skills needed, at all! Here are the modules:Module 1 - SVG basics - This is the foundations module. You'll learn how to create SVG files, how to embed the codes/images in your HTML websites, how the SVG coordinate system works and every other thing you need to get started with creating SVG. Module 2 - Creating various shapes with SVG - You'll learn how to create rectangles, circles, ellipses, lines, polylines and polygons with a wealth of examples in every single lessons. You'll be coding the shapes along with me in every single module so you understand the concepts better. You'll also learn how to style the shapes in multiple ways to get the best possible result. Module 3 - SVG Paths and Groups - This module handles some very important concepts in SVG - Paths and Groups. You'll learn how to group multiple elements in SVG so they can be manipulated together. Also, you'll learn how to create very complicated graphics with the Path element. Module 4 - Creating text with SVG - In this module, you'll learn how to literally draw text on your SVG images, design them, manipulate them and so much more. Module 5 - Other SVG elements - SVG elements that don't really come under a particular category are included in this module. Some of the lessons include embedding bitmap images, creating links, definitions, symbols etc. Module 6 - Styling your SVG elements - This is a very important module when you take the design aspect of the course into account. In this module, we'll go over the various design attributes and properties offered by SVG. You'll use these properties to create multiple designs for your shapes and elements, designs that'll give your graphics the professional touch they need. All the code and supporting files for this course are available at: https://github.com/PacktPublishing/Vector-Graphics-with-SVG-HTML---Complete-Course-with-ProjectsDownloading the example code for this course: You can download the example code files for all Packt video courses you have purchased from your account at http://www.PacktPub.com. If you purchased this course elsewhere, you can visit http://www.PacktPub.com/support and register to have the files e-mailed directly to you.

1. Chapter 1 : Introduction
   • Introduction 00:04:31
2. Chapter 2 : SVG Basics
   • SVG tag and an intro to unit measurements in SVG 00:08:39
   • Displaying/Embedding SVG with HTML web pages - part 1 00:10:20
   • Displaying/Embedding SVG with HTML web pages - part 2 00:05:45
   • SVG coordinate system 00:03:58
3. Chapter 3 : Creating various shapes with SVG - with multiple examples
   • Drawing Rectangles with SVG 00:07:46
   • Drawing Rectangles in SVG - part 2 00:12:02
   • Drawing Rectangles in SVG - part 3 00:04:32
   • Drawing Circles in SVG 00:06:43
   • Drawing Ellipses in SVG 00:08:49
   • Drawing Lines in SVG 00:04:31
   • Drawing Polylines in SVG 00:07:46
   • Drawing Polygons in SVG 00:06:00
4. Chapter 4 : SVG Paths and Groups + 2 projects
   • Nesting SVG Elements 00:07:31
   • Group Element in SVG 00:12:22
   • Path Element in SVG 00:04:42
   • Path Element in SVG - Moving the virtual pen 00:04:38
   • Path Element in SVG - Drawing Lines 00:09:01
   • Project #1 - Create Mail Box Icon with SVG code 00:08:57
   • Path Element in SVG - Drawing Arcs 00:11:51
   • Project #2 - Draw a Cartoon Animal Face with SVG code 00:14:14
   • Project #2 - Draw a Cartoon Animal Face with SVG code - part 2 00:17:20
   • Path Element in SVG - Drawing Quadratic Bezier Curves 00:10:09
   • Path Element in SVG - Drawing Cubic Bezier Curves 00:07:11
5. Chapter 5 : Creating text with SVG
   • Creating Text with SVG code 00:06:12
   • Styling Text with SVG Style Attributes 00:11:59
   • Styling Text with SVG Style Attributes - Part 2 00:08:02
   • Creating Multiple Lines of Text 00:05:52
6. Chapter 6 : Other SVG elements - images, definitions etc
   • Embedding Bitmap Images in SVG Images 00:09:16
   • Creating Links in SVG images 00:06:25
   • Creating Definitions in SVG 00:08:39
   • SVG's Switch Element 00:04:21
   • Symbol and Use Elements 00:10:51
7. Chapter 7 : Styling SVG shapes and designs + 1 project
   • Stroke Property in SVG and its Various Attributes 00:10:20
   • Stroke Property in SVG and its Various Attributes - Part 2 00:06:20
   • Creating Fill Patterns in SVG shapes 00:10:55
   • Creating Fill Patterns in SVG shapes - Part 2 00:10:54
   • Creating Fill Patterns in SVG shapes - Part 3 00:05:41
   • Clip Paths in SVG 00:07:45
   • Clip Paths in SVG - Part 2 00:11:01
   • Project #3 - Crown icon with clip paths 00:11:02
   • Project #4 - Mini icons 00:11:52