What You Will Learn!
- Create SVG files in a text editor
- Create SVG files from existing vector data
- Animate and script SVG
- Work with SVG as static images
- Work with SVG as CSS
- Work with SVG as an element in HTML document
- Work with SVG as a scripted part of animations
Description
In this course you will learn:
1-basic shapes: you will learn how to construct drawings using the basic shapes available in SVG including lines, circles, ellipses, rectangles, rounded rectangles, polygons, polylines and stroke characteristics.
We will also discuss stroke characteristics including: Stroke, stroke-width, stroke-opacity, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin.
2-Transformation: you will learn how to move, rotate, scale, and skew the coordinate system to affect the shapes drawn on it.
3-Paths: which include moveto, Lineto, closepath, the Q subcommand quadratic Bezier curves and the marker element.
4-Pattern and Gradients we will be discussing how to create a color gradient using linear gradient and radial gradient, or a fill pattern.
5-Text add text to a drawing, both in a straight line and following a path.
6-Working with SVG and CSS which includes how to use internal and external CSS style sheet, basic animation using CSS and animating multiple CSS properties at one time.
7-Animating and scripting SVG, you will learn how to use
SVG's built-in animation capabilities by learning animation basics, time and repeated action and motion along path.
This course is for you if you are a web developer who is interested in exploring Scalable Vector Graphics., and if you have experience with JavaScript, CSS, and XML.
At the end of this course you will be able to:
Know how to work with SVG as static images,
in CSS,
inline as elements in an HTML document,
and as a scripted part of animations or visualizations
Who Should Attend!
- Web developers who are interested in exploring Scalable Vector Graphics SVG
