Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Vector Graphics with SVG & HTML - Complete course + projects

Name: Vector Graphics with SVG & HTML - Complete course + projects
Rating: 4.4 (120 reviews)

Create awesome 2D vector graphics with SVG (code) + HTML - over-the-shoulder training with multiple projects per module

Created byDigiFisk (Programming is fun)

Last updated 11/2021

English

English [Auto],

What you'll learn

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

Course content

7 sections • 50 lectures • 5h 59m total length

Introduction4:31
Learn to create 2-D scalable vector graphics with SVG, covering shapes, text, patterns, and animations for web graphics, icons, logos, charts, and real-world projects.

SVG tag and an intro to unit measurements in SVG8:39
Explore the SVG tag and how to set a drawing viewport with width and height, using pixels by default and units like cm, mm, in, and em for SVG shapes.
Displaying/Embedding SVG with HTML web pages - part 110:20
Learn how to display and embed SVG in HTML pages in part 1, using inline SVG or a separate SVG file, with proper namespaces, and resize without losing quality.
Displaying/Embedding SVG with HTML web pages - part 25:45
Learn to embed SVG in HTML pages using the img tag, iframes, and CSS backgrounds, adjusting width, height, and background-size to fit the display.
SVG coordinate system3:58
Discover how the SVG coordinate system differs from Cartesian coordinates, with x increasing to the right and y increasing downward, defining the visible image area and pixel-based coordinates.
SVG basics syntax notes0:14

Drawing Rectangles with SVG7:46
Draw rectangles in SVG with the rect element, set width and height in pixels by default, position via x and y coordinates, and use trailing slash to indicate empty tag.
Drawing Rectangles in SVG - part 212:02
Learn to draw and style rectangles in SVG using inline styles or CSS, set stroke and fill, and use rx and ry to round corners or convert rectangles to circles.
Drawing Rectangles in SVG - part 34:32
Stack rectangles in svg so the last drawn sits on top, and control visibility with the css opacity property, including separate transparency for fill and stroke.
SVG rectangles syntax notes0:45
Drawing Circles in SVG6:43
Draw circles in SVG with the circle tag, using cx, cy, and r for center and radius, default units as pixels, and style with fill, stroke, and opacity of 0.8.
Drawing Ellipses in SVG8:49
Learn how to draw ellipses in SVG using cx and cy (center coordinates), rx and ry radii, vary horizontal or vertical shape, and stack shapes with styling.
SVG circles & ellipses syntax notes0:26
Drawing Lines in SVG4:31
Draw lines in SVG by using the line element with x1, y1, x2, y2 coordinates, and style with stroke color and opacity.
Drawing Polylines in SVG7:46
Learn to draw polylines in SVG by using the polyline element to connect multiple points, creating open or closed shapes with stroke and optional fill.
Drawing Polygons in SVG6:00
Explore how polygons create closed shapes with straight lines using the polygon element, defining points with coordinates to draw triangles, rectangles, and more, unlike polylines, polygons automatically close.
SVG lines, polylines & polygons syntax notes0:25

Nesting SVG Elements7:31
Explore nesting svg elements to group shapes into nested svgs and move whole groups by adjusting child coordinates within the parent viewport.
Group Element in SVG12:22
Learn how to group shapes with the SVG g element to style and transform multiple shapes as a single unit, reuse grouped designs, and apply rotations, translations, and inline overrides.
Path Element in SVG4:42
Learn how the path element in SVG uses the d attribute to encode move to, line to, arc, quadratic and cubic bezier commands for drawing complex shapes.
Path Element in SVG - Moving the virtual pen4:38
Learn to move the pen in an SVG path using the M command for absolute coordinates and its relative variant, with x and y positions referenced to the viewport.
Path Element in SVG - Drawing Lines9:01
Learn to draw with the SVG path element by using move to and line commands, with absolute and relative coordinates, and style the strokes to reveal connected lines and fills.
Project #1 - Create Mail Box Icon with SVG code8:57
Create a mailbox icon in SVG using move to and line to commands to outline a box with an open flap, then assign a hex color and no fill.
Mail Box icon project code0:06
Path Element in SVG - Drawing Arcs11:51
Draw arcs in SVG paths with the A command, using absolute or relative positioning, x radius, y radius, rotation, large-arc and sweep flags, and end points.
Project #2 - Draw a Cartoon Animal Face with SVG code14:14
Create a cartoon animal face in SVG by using a circle for the face, ellipses for the eyes, and arc paths to fill the black eyes with strokes.
Project #2 - Draw a Cartoon Animal Face with SVG code - part 217:20
Create a cartoon animal face using SVG paths by combining lines and arcs, detailing nose, eyes, and mouth, and applying stroke and fill styles.
Animal face cartoon project code0:06
Path Element in SVG - Drawing Quadratic Bezier Curves10:09
Learn to draw quadratic bezier curves in SVG using the path element and the Q command with absolute or relative coordinates, and understand how the control point shapes the curve.
Path Element in SVG - Drawing Cubic Bezier Curves7:11
Explore cubic bezier curves in the SVG path element, using two control points with absolute or relative end points to create a wide range of complex shapes.

Creating Text with SVG code6:12
Learn to create text in SVG using the text element with start and end tags, and place it with x and y coordinates to set the bottom-left position.
Styling Text with SVG Style Attributes11:59
Learn to style SVG text with the style attribute, controlling text anchor, font size, stroke, fill, letter spacing, word spacing, and text decoration such as underline, overline, and line-through.
Styling Text with SVG Style Attributes - Part 28:02
Master rotating and styling text in SVG by applying the rotate transform directly to text elements, adjusting x, y, and anchor points, and using writing-mode and unicode-bidi for direction.
Creating Multiple Lines of Text5:52
Learn to create multiple lines of text in SVG by using the tspan inside a text element, with uniform styling and precise x and y positioning.

Embedding Bitmap Images in SVG Images9:16
Embed external bitmap images inside SVG with the image element by setting x, y, width, height, and an optional link to integrate images with your SVG.
Creating Links in SVG images6:25
Wrap shapes and text in an SVG image with an a tag to create links; specify href with xlink:href and use target to open in a new tab.
Creating Definitions in SVG8:39
Learn to create and reuse SVG definitions using the defs element, embed shapes, and render multiple instances with the use tag and relative x and y positioning.
SVG's Switch Element4:21
Use the switch element in SVG to display language-specific text or shapes by grouping content and detecting the browser's system language. Build language groups for English, French, and more.
Symbol And Use Elements10:51
Explore the symbol and use elements in SVG to create reusable shapes with independent IDs, reducing steps and enabling flexible styling and positioning.

Stroke Property in SVG and its Various Attributes10:20
Learn to style SVG shapes with the stroke property, including color, width, and opacity, and apply stroke line cap and line join settings including butt, square, round, miter, and bevel.
Stroke Property in SVG and its Various Attributes - Part 26:20
Explore how to control svg stroke with opacity and dash patterns, learning to create partially transparent outlines and dashed lines using stroke-dasharray with multiple patterns.
Creating FIll Patterns in SVG shapes10:55
Learn to fill SVG shapes with repeating patterns using the pattern element, pattern id, and def or symbol wrappers, including circle, diamond, and image patterns.
Creating FIll Patterns in SVG shapes - Part 210:54
Learn to create and nest fill patterns in SVG shapes by adjusting x, y, width, height, and spacing for rectangles and circles, including inner patterns inside outer patterns.
Creating FIll Patterns in SVG shapes - Part 35:41
Learn to create fill patterns in svg shapes and transform them with the pattern transform property, rotating patterns to diamonds while adjusting spacing with pattern width, height, and units.
Clip Paths in SVG7:45
Clip shapes in svg using the clipPath element to flip a shape along a path, and apply the clip to multiple shapes by referencing an id in the clipPath definition.
Clip Paths in SVG - Part 211:01
Learn how to apply clip paths to open and closed shapes in SVG, including rectangles, circles, text, and groups, to create diamonds and other clipped visuals.
Project #3 - Crown icon with clip paths11:02
Learn how to build a crown icon in SVG using clip paths, define a clipPath crown shape, and apply it to a shape to render a clipped crown.
Crown icon project code0:06
Project #4 - Mini icons11:53
design three mini icons on a 700 by 700 svg canvas, composing a circle, a triangle, and a second circle with precise cx, cy, and r, using fill and stroke.
Conclusion & Bonus - Continue your journey!!0:43

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!

Who this course is for:

If you want to delve into the world of creating SVG graphics for web pages
If you want to learn how to create awesome graphics with HTML and SVG codes and tags
If you are a beginner to web development and don't want to learn graphic designing the traditional way, but still create great graphics with pure Code

Vector Graphics with SVG & HTML - Complete course + projects

What you'll learn

Explore related topics

Course content

Introduction1 lecture • 5min

SVG Basics5 lectures • 29min

Creating various shapes with SVG - with multiple examples11 lectures • 1hr

SVG Paths and Groups + 2 projects13 lectures • 1hr 48min

Creating text with SVG4 lectures • 32min

Other SVG elements - images, definitions etc5 lectures • 40min

Styling SVG shapes and designs + 1 project11 lectures • 1hr 27min

Requirements

Description

Who this course is for: