Vector Graphics with SVG & HTML - Complete course + projects
Created by DigiFisk (Programming Is Fun), Last Updated 13-Dec-2019, Language:English
Vector Graphics with SVG & HTML - Complete course + projects
Create awesome 2D vector graphics with SVG (code) + HTML - over-the-shoulder training with multiple projects per module
Created by DigiFisk (Programming Is Fun), Last Updated 13-Dec-2019, Language:English
What Will I Get ?
- Create cool SVG icons that can be used on your web pages, apps and projects
- Create Characters in SVG (with paths)
- Create multiple graphical elements with SVG code - shapes (rectangles, circles), lines, polygons, paths, groups, links, etc.
- Create eye catching SVG graphics by applying multiple and intricate style patterns on them
- Create scalable vector graphics with just pure HTML and SVG codes
- Edit your SVG graphics in seconds by editing your SVG code
- Create awesome graphics without mastering complicated graphic design software
Requirements
- A very basic understanding of HTML
Description
Are 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!
What more? These SVG codes are perfectly editable and can be easily embedded in your websites.
If you know the very basics of HTML and CSS, you're all set.
Spend a few hours learning a bunch of SVG syntaxes, and you'll be creating awesome graphics and designs in no time at all!
Every programmer can become a pro designer now!
What will you learn in our course?
1. How to create shapes, lines, text, polylines and so much more with SVG syntaxes.
2. How to create paths that can be used to design complicated structures, shapes, characters and scenes.
3. How to style every single SVG element you create professionally.
4. How to embed definitions, links, images and so much more in your SVG images.
5. How to create scalable vector icons and logos with SVG.
6. How to create 2D cartoon characters that can be used in web animations and games.
7. How to edit your SVG graphics in seconds by editing your SVG code
and so much more!
What are some real world applications of what you learn in this course?
By applying the concepts you learn in this course, you can code and design:
1. Graphics for your websites
2. 2D characters and scenes for web animations and web games
3. 2D graphs and pictorial reports that can be used in presentations
4. Bar charts, pie charts, etc.
5. Scalable vector icons and logos that can be displayed in websites, mobile browsers, ipads etc.
6. Flow charts, architectural designs etc.
Sky is the limit! You can apply what you learn here anywhere in the web space, in any sphere.
Your imagination is your only obstacle to how you apply what you learn here in your real world projects.
How is this course designed?
Our course has 6 modules, where each module will thoroughly explain the intricacies of one of the concepts in SVG with a wealth of over-the-shoulder examples.
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.
We also cover a lot of examples and projects, like:
1. Mail Box icon project - We'll be creating this project in the 3rd module, after you learn how to create lines in paths.
2. Cartoon animal face project - This project comes in the 3rd module as well. You'll be using circles, ellipses, paths, arcs etc to create a cute 2D animal face.
3. Crown icon project - We'll be creating this icon in the 6th module. We'll be clipping the crown icon from a black rectangle. This is a fun project that'll help you learn the clipping concept covered in the 6th module.
Why should you choose our course?
1. We 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.
2. 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.
3. If you follow along with our examples in our over-the-shoulder training, and code the graphics along with us, you'll be confident in embarking into the world of SVG and web graphic design/development by the time you finish our course. You'll be able to confidently add this as a skill in your resume.
4. We prefer creating fun projects to explain the concepts and to keep things interesting as well. You'll learn how to apply the concepts you learn in the course in these multiple projects and examples.
So, what are you waiting for? Enroll now and start creating awesome 2D vector graphics with SVG syntaxes in no time at all!
Course Content
-
Introduction
1 Lectures 00:04:31-
Introduction
Preview00:04:31
-
-
SVG Basics
4 Lectures 00:28:42-
SVG tag and an intro to unit measurements in SVG
Preview00:08:39 -
Displaying/Embedding SVG with HTML web pages - part 1
Preview00:10:20 -
Displaying/Embedding SVG with HTML web pages - part 2
00:05:45 -
SVG coordinate system
00:03:58
-
-
Creating various shapes with SVG - with multiple examples
8 Lectures 00:58:09-
Drawing Rectangles with SVG
Preview00:07:46 -
Drawing Rectangles in SVG - part 2
Preview00: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
-
-
SVG Paths and Groups + 2 projects
13 Lectures 01:47:56-
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 -
Mail Box icon project code
-
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 -
Animal face cartoon project code
-
Path Element in SVG - Drawing Quadratic Bezier Curves
00:10:09 -
Path Element in SVG - Drawing Cubic Bezier Curves
00:07:11
-
-
Creating text with SVG
4 Lectures 00:32:05-
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
-
-
Other SVG elements - images, definitions etc
5 Lectures 00:39:32-
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
-
-
Styling SVG shapes and designs + 1 project
10 Lectures 01:25:51-
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 -
Crown icon project code
-
Project #4 - Mini icons
00:11:53
-

DigiFisk (Programming Is Fun)
Hands-on practical training | Programming courses
Welcome to DigiFisk!
Here at DigiFisk, we aim to make programming fun and interactive for students.
If you're tired of boring theoretical classes, then you've come to the right place.
We start off with basics/beginner courses in a particular programming language or field, and continue on with a number of real-world project-based classes to equip you to thrive in the real world.
Our lectures tend to be very detailed. We leave nothing out, so beginners and advanced programmers alike can learn something from each of our courses.
Enjoy your journey into the fascinating world of programming with DigiFisk! We'll see you inside. :)