OpenCourser
Learn skills that shape your future
Visit OpenCourser.com
Do you want to learn Scalable Vector Graphics (SVG)? Perhaps you already have basic knowledge and want to deepen and expand it? Congratulations. You are on the right track.
This course provides the most complete and detailed information on the Scalable Vector Graphics standard of the W3C (World Wide Web Consortium) specification.
Today, 99% of the World Wide Web sites actively use this standard. Take a look at some of the benefits of SVG:
Do you want to learn Scalable Vector Graphics (SVG)? Perhaps you already have basic knowledge and want to deepen and expand it? Congratulations. You are on the right track.
This course provides the most complete and detailed information on the Scalable Vector Graphics standard of the W3C (World Wide Web Consortium) specification.
Today, 99% of the World Wide Web sites actively use this standard. Take a look at some of the benefits of SVG:
- scales without loss in image quality, which means it is ideal for responsive sites (graphic elements of such sites should be displayed without distortion at any screen resolution);
- has a small "weight" due to the ability to good compression (any site, ideally, should load quickly);
- supported by all modern browsers (SVG is fully compatible with web technologies and therefore becomes an organic part of sites);
- easy to use and easy to modify (the format allows you to set the necessary settings for color, shadow, blur and other design effects, both in a graphics editor and on the page itself using CSS, JavaScript);
- animated and made interactive (adding objects to the digital description of the picture and connecting scripts of the Javascript programming language to them);
- SVG is a text format, so you can optimize the file for SEO without external meta tags by directly entering keywords into the image code
And believe me, that's not all. To appreciate all the advantages of SVG, you need to work with it. But first, you should study it.
A classic academic learning model awaits you, allowing you to activate thinking, creativity and create new things.
In the video lessons of this course, you will become familiar with the theory of Scalable Vector Graphics (language elements, syntax, structure, algorithms, data types).
All the practical part is attached to the lessons. Here you will find pdf documents summarizing lecture materials as well as homework modules (HTML & CSS files), where specific practical goals will be set for you. You will also find modules with answers (showing one of the possible options for the implementation of the task).
The academic model of training has proven itself all over the world for a long time and today there is no alternative to it in terms of the effectiveness of training specialists.
Basically, if you are looking for a hands-on course to learn a few tricks using SVG then DON'T take the course. Find the course where the instructor types the code and repeat. Everyone else: you should take the course, today.
The simplest concepts:
- coordinate system features in SVG;
- container element concept;
- <svg> element [first simplified approach to the concept of viewport].
Types of basic shapes. Application of basic shapes [painting (fill stroke markers), clipping mask]
- <rect> element and it’s geometric properties [x,y, width, height, rx, ry].
1. Primitives based on the geometry of radius
- <circle> element and it’s geometric properties [cx, cy, r];
- <ellipse> element and its geometric properties [cx, cy, rx, ry].
2. <line> element and its geometric properties [x1,y1,x2,y2]
Primitives based on the geometry of points
- <polyline> element and its geometric properties [points = “x1,y1,x2,y2 … xn,yn”];
- <polygon> element and its geometric properties [points = “x1,y1,x2,y2 … xn,yn”].
<path> element. Application [shape creation, clipping path, creating an animation, create text on a path]
- current point concept [cpx, cpy];
- path command [moveTo(M,m), lineTo(L,l), curveTo(C,c,S,s), curveTo(Q,q,T,t), arc(A,a), closePath(Z,z)];
- “d” property. Path data syntax [d=”M..L..C..A..Q..Z”];
- concise syntax [speed up rendering by minimizing file sizes using syntax features];
- open & closed path.
The cubic Bezier curve, Smooth cubic poly Bezier curve commands and its geometric properties
Quadratic Bezier Curve, Smooth Quadratic poly Bezier and its geometric properties
Elliptical arc curve commands and its arguments [Rx, Ry, x-axis-rotation, large-arc-flag, sweep-flag, x, y]
Options for changing styles of graphic elements
- adding style element inside svg element;
- external stylesheet using the link element;
- add the style attribute to the element;
- adding a style attribute to the required element;
- presentation attributes.
The CSS rules specificity.
- specificity calculation;
- priority of applied styles.
Presentation attributes
- using of presentation attributes
- limitations
Geometry properties: in-depth [Part1]
- rx and ry geometry properties in detail;
- rx, ry calculation algorithm.
Geometry properties: in-depth [Part2]
- algorithm of the constructing a rectangle with the rounded corners
Geometry properties: in-depth [Part3]
- algorithm of the ellipse rendering
All the image customization options in the SVG
- the concept of viewport in SVG;
- viewBox and its parameters [x, y, width, height];
- viewport initial coordinate system;
- local coordinate system
The relationship of viewport and viewBox in SVG.
- transformation of coordinate system in image rendering;
- the effect of the viewport and viewBox settings on the final image;
- pan and zoom functions.
The viewBox and transformations:
- image rendering in cases (viewport=viewBox, viewport>viewBox, viewport<viewBox)
- transform scale function in the internal user agent mechanism
In this lesson, you will learn the role of the <preserveAspectRatio> attribute and how it effects on a displaying graphics.
The <preserveAspectRatio> attribute:
- parameter <align>
- parameter <meetOrSlice>
Establishing a new SVG viewport
- nested viewport;
- units and percentage calculation algorithm.
Document structure
- SVG fragment;
- types of elements [structural elements, structural external elements, graphics elements, graphics referencing elements]
In this lesson, we will learn how to use a group element and why we should do it
Grouping
- <g> element
- properties of <g> element as a container element
Reusable content
- <defs> element;
- <use> element;
- <symbol> element;
- table comparing attributes and properties reusable content elements.
Application features of the <use> element
Painting
- types of graphic elements
- <fill> attribute
- <stroke> attribute
- different ways of painting [single color, gradient, pattern]
- <paint> values
- SVG color units [CSS Color Module Level 3]
Fill properties.
- color control flexibility in fill methods
- fill algorithm in case of value fill-rule property: <nonzero>
- fill algorithm in case of value fill-rule property: <evenodd>
- flexible control of opacity
Stroke properties [stroke, stroke-width, stroke-opacity, paint order]
Stroke properties:
- stroke-linecup values [but, round, square]
- stroke-linejoin values [bevel, round, miter, arcs, miter-clip]
- miter [miter-length calculation, miter-limit]
Stroke properties:
- stroke-dasharray ;
- stroke-dashoffset.
Markers
- table comparing attributes and properties of markers & symbol elements
- marker creation algorithm [code example]
Bounding boxes
- three kinds of bounding boxes [object, stroke, decorated]
- examples of revealing bounding boxes of various elements in code
Paint Servers:
- types of paint servers [gradients, patterns]
- paint servers properties
- paint server user agent algorithm
Gradients:
- types of gradients [linear, radial]
- concepts of vector and normals
- color stops, color transitions
linear Gradient: the vector of attributes [x1,x2,x3,x4]
- Gradient stops [stop elements]
- <offset> attribute
- stop-color properties
- stop-opacity properties
- algorithm for constructing a linear gradient by a user agent during rendering
linear Gradient: other Attributes
- gradientUnits [objectBoundingBox, userSpaceOnUse]
- gradientTransform [translate, skew, rotate, scale]
- spreadMethod [pad, reflect, repeat]
- href
Radial gradient
- vector [inner & outer circumference]
- inner circumference [cx, cy, r]
- outer circumference [fx, fy, r]
- stop color in radial gradient
patterns [fill, stroke]
- tile concept
- pattern attributes [x,y,height,width, patternUnits, viewBox, preserveAspectRatio, patternTransform, href, patternContentUnits]
Information about the continuation of the course with the new section "SVG animation"
This tutorial will introduce you to SVG animation elements (Part1):
animate,
animateMotion,
animateTransform
This tutorial will introduce you to SVG animation elements (Part2):
discard [«Discard» element has been discontinued by browsers to improve security]
set
Attribute to identify the target element for an animation [href = “URL”].
Attributes to control the timing of the animation [begin, dur, min, max, restart, repeatcont, repeatdur, fill].
In this lesson, you will learn about attributes that define animation values over time [from, to, by, keyTimes, keySplines, calcMode, values]
In this lesson, you will learn about attributes that control whether animations are additive [additive & accumulate].
Morphing example.
And we will analyze clock values in detail
SVG elements which can be animated by an <animateMotion>
Data types used in the attributes and properties of the SVG animation.
In this lesson, you will learn about pointing device events with which you can start or stop SVG animation.
Information about the composition of this bonus section
Capabilities of Web Animation using masks & clip path. Part1
In this lesson we will work with a clip path. In the first example, a raster image integrated into the SVG container will be used as the basis.
Capabilities of Web Animation using masks & clip path. Part2
In this lesson we will work with the mask. In the second example, we’ll work directly with SVG
Capabilities of Web Animation using masks & clip path. Part3
In this lesson, we will work with the clipping frame again. The third example will demonstrate the video content placed in the SVG container.
CSSPlugin [Part4: xPercent, yPercent]
Possibilities of use, advantages and disadvantages of using the “xPercent”, “yPercent” properties. Simplest practical example. Building an interactive animation "Eyes are watching you".
Canvas & Web Audio API [Audio Visualizer]. Part1
1. Basic html document settings for the project.
2. The 'audio' element. Purpose, use.
3. 'input' element. Purpose, use.
4. 'onchange' event
5. 'AudioContext' interface
6. The properties of the object to create the animation.
Canvas & Web Audio API [Audio Visualizer]. Part2
1. 'loadAudio()' method
2. FileReader interface
3. 'readAsDataURL()' method
4. Web Audio API: audio nodes, inputs and outputs, audio routing graph
5. audio initialization [part 1]
Canvas & Web Audio API [Audio Visualizer]. Part3
1. Audio initialization [part 2]
2. 'Uint8Array()' method
3. Building the first type of Audio Visualizer
4. The first version of the audio visualizer
Canvas & Web Audio API [Audio Visualizer]. Part4
1. Errors are related to the established connections between audio nodes and their elimination using the WeakMap object.
2. Setting up the first version of the audio visualizer.
Canvas & Web Audio API [Audio Visualizer]. Part5
1. Frequency audio test.
2. The second kind of audiovisualizer [based on the analysis of one of the set of frequencies].
3. Changes in transformation matrix.
4. Third kind of audiovisualizer.
SaveSaveOpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.
Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.
Find this site helpful? Tell a friend about us.
We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.
Your purchases help us maintain our catalog and keep our servers humming without ads.
Thank you for supporting OpenCourser.
