/* SVG Tutorial Book */

github

Top

Basic Shape(Basic) Shape(Double border) Effect(Filter, Gradient, Mask) Transform(Hover) Animation (Path, Scroll event) Animation (Shape)

[1] Basic

1. You can put 'style' and 'script' in svg, or you can subtract it separately.

2. Add '' when an error occurs in the xml parser when putting in svg.

3. Before Compression

Image

4. After Compression

Compression, Prettier

5. CSS

Animation

6. CSS + JS

Animation + Click event

[2] Shape(Basic)

1. Rectangle, Square, Circle, Ellipase
2. Line, Ployline(round, bevel), Polygon
3. Curve, textPath, tspan

[3] Shape(Double border)

1. Outline
2. Box-shadow
3. Re Use

[4] Effect (Filter, Gradient, Mask)

1. Gradient mask
2. filter blur (linear-gradient)
3. filter Blur (three node)

[5] Transform (Hover)

scale + transition
scale + rotate + transition
scale + skew + transition
scale + translate + transition
scale + transform-origin + transition
transform-origin + rotate + transition
scale + transition + color

[6] Animation (Path, Scroll event)

[7] Animation (Shape)

1. How to position : position or translate

2. Animate : color, transform(scale, rotate), translate, ,from/to(position) stroke, path shape, Gradient

1. Icon
2. Ball
3. Box
4. cloud