Creating a basic SVG image
Before we can learn how to integrate SVG into an HTML document we need to know the basics of how to work with SVG. In this lesson we will learn how to define and create an SVG element.
Keynotes:
- Declaring the SVG format.
- Defining a version to our SVG.
- Drawing out a rectangle with a fill and stroke.
Ready to Level Up Your Skills?
Join thousands of learners on 02GEEK and start your journey to becoming a coding expert today!
Enroll Now for Free!Creating a basic SVG image
In this lesson we will learn how to define and create an SVG element.
08:22
Drawing a circle in SVG
In the last lesson we created an SVG image and filled it up with a red rectangle. In this lesson we will learn how to add more elements into our stage starting with a circle.
06:01
Integrating SVG into HTML5
In this lesson we will learn about the process, see the relationship between styling and rules and position our SVG exactly where we want it to be.
04:58
Creating a polygon
Up until now all the shapes we created in SVG where pre-made shapes. In this lecture we will learn how to create a polygon by defining as many points as we want into it.
06:26
Animating SVG
By the end of this lesson you will know how to work with the animate and animateTransform nodes of SVG.
05:36