Fundamental SVG for Beginners

Name: Fundamental SVG for Beginners
Rating: 4.4 (30 reviews)

Fundamental SVG training without CSS and Javascript

Created byLearVG . . .

Last updated 11/2021

English

What you'll learn

Creating a rectangle
Using rx and ry attribute in it
Introducing a good extension to change numberic values
Creating a line
Stroke attribute and other related attributes
Benefits of using the 'Alt' key in the text editor
Creating a circle
Using RGB color
Creating an ellipse
Creating a polyline
Using <g> tag
Difference between polyline and polygon
Using stroke-linejoin
Creating a path
Writing a text

Course content

5 sections • 19 lectures • 1h 9m total length

About This Course0:44
Master fundamental svg concepts for beginners, focusing on visual effects and concept transfer without JavaScript to create a richer learning experience for college students.

Why VSCode0:32
Compare free code editors and discover why VS Code is favored for beginners when learning fundamental SVG techniques.
Install VSCode0:51
Install VSCode for fundamental SVG for beginners, enabling automatic download and sending them all today.
Install Extensions1:52
Install extensions to enhance your SVG workflow, explore useful extensions and practical snippets, and preview essential tools for beginners.
Open File and Folder with VSCode1:11
Learn to manage your codebase by opening files and folders in VS Code, laying the groundwork for creating and editing scalable vector graphics in svg.
Work with Live Server Extension1:34

Rect - rx - ry3:54
Learn how to use the SVG rect element and apply rx and ry attributes to create rounded corners in scalable vector graphics.
Line and stroke9:19
Explore the basics of line and stroke in svg to create simple vector graphics. Develop foundational svg skills for beginners by applying line and stroke concepts.
Circle7:46
Explore the fundamentals of SVG by creating a circle element and learning its basic properties and styling.
Ellipse5:17
Explore the ellipse element in SVG and its role in foundational vector shapes for beginners.
Polyline6:15
Learn how polyline in svg enables drawing shapes, providing a beginner-friendly entry into scalable vector graphics.
Polygon5:04
Master the fundamentals of svg by drawing polygons and exploring basic properties and styling for beginners.
Path (1)4:20
Master the fundamentals of SVG by examining the path element, a core concept for beginners learning scalable vector graphics.
Path (2)7:22
Master the svg path basics by exploring path drawing techniques and practical examples, building on fundamental svg concepts for beginners.
Path (3)3:42
Master the fundamentals of the svg path element in this beginner course, exploring practical techniques for drawing precise vector shapes and paths.
Path (4)5:08
Explore the path in SVG in the fundamental SVG for beginners course, lesson four, to understand how the path element creates shapes.
Text1:58

Requirements

Having a Computer
Internet Connection

Description

In this course, you will learn how to write SVG (Scalable Vector Graphics) codes from scratch.

We have tried to provide you with better content. Content that is the product of experience and creativity and comes from the skill of working with a text editor (here VSCode).

This course has no special prerequisites.

We assume that our student has no knowledge of text editor programs and programming languages such as SVG, CSS and Javascript and now wants to start learning, so an introduction to the text editor space (VSCode) is provided at the beginning of the course.

In the Shapes section, look at the lectures in order, because the tutorial for each lecture is based on the previous lecture.

This section begins with the topic of regtangle.

We have tried to explain the concepts in each part clearly and with appropriate speed so that there is no ambiguity after watching it.

We have explained each topic of the Shapes section in one lecture, except for the path topic, because due to the complexity of this topic it had to be explained in several separate lectures.

This course is able to provide you with simple yet creative patterns to practice so that you can design your desired shape.

Finally, our suggestion is to be very curious, change the exercises to your liking and experiment.

We rely on visual effects to better convey concepts, and we also use background music to make learning more enjoyable.

We hope you enjoy this course and also learn.

Who this course is for:

Web Developers
UI Designers
Curious UX designers

Fundamental SVG for Beginners

What you'll learn

Explore related topics

Course content

About This Course1 lecture • 1min

Tag and Element1 lecture • 1min

SVG suffix And HTML suffix1 lecture • 2min

Start SVG by VSCode5 lectures • 6min

Shapes11 lectures • 1hr

Requirements

Description

Who this course is for: