How do I make a cool dynamic icon with SVG? (code example)

This chapter introduces you how to use SVG to make cool dynamic icons in HTML5 (code example), there is a certain reference value, the need for friends can refer to, I hope to help you.

First, basic graphic elements

SVG has some predefined shape elements: rectangular <rect>, svg converter round <circle>, png to svg oval <ellipse>, straight <line>, polyline <polyline>, Polygon < Polygon>, path <path> and text <text>.free svg

<!--Viewbox define the canvas size width/height define the actual size--><svg xmlns= "http://www.w3.org/2000/svg" version= "1.1" width= "300" height= "viewbox=" 0 0 ">    <!--line (x1,y1) and (x2,y2) two point coordinates-    <line x1=" 0 "y1=" 0 "x2=" y2= " />    <!--polygons form closed graphics with coordinates of multiple points--    <polygon points= "5,5 100,100 50,200"/>    <!--rectangle (x, y) To the top left corner---    <rect x= "" y= "width=" "height=" "/>"    <!--Circle (cx,cy) Center point R Radius--    < Circle cx= "cy=" "r=" stroke= "Black"/>    <!--text (x, y) lower left coordinates--    <text x= "0" y= "20" Style= "Font-size:16px;font-weight:bold" >try svg</text></svg>

Second, style and effect

The SVG element's style can be written as a label attribute, or it can be written in a style. Here are some of the main styling properties:heart svg

Stroke: Stroke Color
Stroke-width: Stroke width
Stroke-opacity: transparency of strokes
Fill: filling color, i.e. background
Fill-opacity: transparency of Fill color
Transform: Graphic transformations, similar to CSS3 transform

SVG also supports many filter effects, such as gradients, Shadows, blur, image blending, and more. There is no need to know so much, for example, to draw a few colored circles and fill it with circle.

Note: The transform defaults to the upper-left corner of SVG as a base point, svg file not a center or other hub. The upper-left corner is the SVG coordinate system origin. Learn about the transform and coordinate systems, which you can refer to here.

Third, auxiliary elements

SVG has several auxiliary elements:<g> <defs> <symbol> <use>. They do not represent specific shapes, but rather help with the grouping, reuse, and so on of graphical elements.sunflower svg  Specific introduction can refer to here.

<g> elements are often used to group related graphic elements for uniform operation, such as rotation, zooming, or adding related styles.
<use> implement the reuse of SVG existing graphics, you can reuse a single SVG graphic element, or you can reuse <g><defs> defined group elements.
<defs> internally defined elements are not displayed directly, and can be defined without having to define the styles beforehand, but by using <use> instantiation.
<symbol> can create its own windows with <g> grouping and <defs> initial invisible features.

For the transform base point problem mentioned above, you can reset the base point by nesting <g> labeling and shifting <g> position. Draw several horizontal circles as follows, and set different scaling sizes

<svg width= "80px" height= "80px" xmlns= "http://www.w3.org/2000/svg" viewbox= "0 0" preserveaspectratio= " Xmidymid ">    <g transform=" translate ">        <circle cx=" 0 "cy=" 0 "r=" 7 "fill=" #e15b64 "transform= "Scale (0.99275 0.99275)"/>    </g>    <g transform= "translate" >        <circle cx= "0" cy= "0 "R=" 7 "fill=" #f47e60 "transform=" scale (0.773605 0.773605) "/>    </g>    <g transform=" Translate (60 50 ) ">        <circle cx=" 0 "cy=" 0 "r=" 7 "fill=" #f8b26a "transform=" scale (0.42525 0.42525) "/>    </g>    <g transform= "Translate" >        <circle cx= "0" cy= "0" r= "7" fill= "#abbd81" transform= "scale (0.113418 0.113418) "/>    </g></svg>

Iv. Realization of animation

The animation effect of SVG is based on an animated tag element:

<animate> realize the transition effect of single attribute;
<animateTransform> realize transform transform animation effect;
<animateMotion> achieve path animation effects.

SVG is very flexible, the style can be written as a tag property can also be written in style, animation tags can be specified by XLink elements, can also be written inside the animation elements. The following shows the xlink notation for Animatetransform:

<svg xmlns= "Http://www.w3.org/2000/svg" >    <rect id= "Animateobject" x= "a" y= "width=" "50" height= " Fill= "Blue" ></rect>    <animatetransform        xlink:href= "#animateObject" <!--specify animated elements        -- Attributename= "Transform"  <!--the property name that requires animation--        type= "scale"  <!--Specify the Transform property--        begin = "0s"    <!--start time, i.e. delay---        dur= "3s"      <!--animation time-        from= "1"      <!--start value        -- To= "2"        <!--end value        --repeatcount= "indefinite"   <!--repeat mode, indefinite infinite repeat--    ></svg>

The animation of the example above is a to B transition, to form a smooth loop, at least to define three key points. Animatetransform supports more and more flexible property settings:

Values: value of multiple keys, overriding from and to, e.g. values= "0;1;0"

Keytimes: Corresponds to values, point-in-time of each point

Calcmode: Animation Speed way. Discrete | Linear | paced | Spline

Keysplines: Sets the motion Bezier control Point, which is valid when the Calcmode is spline

V. Code examples

Circle Circle, fill color, wrap and position with G tag, transform set initial deformation, Animatetransform set animation. Now look at the code, and I'm sure it won't be confused anymore:

<svg class= "Lds-message" width= "80px" height= "80px" xmlns= "http://www.w3.org/2000/svg" viewbox= "0 0 100 100" preserveaspectratio= "Xmidymid" > <g transform= "translate" > <circle cx= "0" cy= "0" r= "7" fill= "# E15b64 "transform=" scale (0.99275 0.99275) "> <animatetransform attributename=" transform "type=" scale "begi N= " -0.375s" calcmode= "spline" keysplines= "0.3 0 0.7 1;0.3 0 0.7 1" values= "0;1;0" keytimes= "0;0.5;1" dur= "1s" repeatcount=        "Indefinite" ></animateTransform> </circle> </g> <g transform= "Translate" > <circle cx= "0" cy= "0" r= "7" fill= "#f47e60" transform= "scale (0.773605 0.773605)" > &LT;ANIMATETRANSFO RM attributename= "Transform" type= "scale" begin= " -0.25s" calcmode= "spline" keysplines= "0.3 0 0.7 1;0.3 0 0.7 1" values= "0; 1;0 "keytimes=" 0;0.5;1 "dur=" 1s "repeatcount=" indefinite "></animateTransform> </circle> </g&gt    ; <g transform= "Translate (60 "> <circle cx=" 0 "cy=" 0 "r=" 7 "fill=" #f8b26a "transform=" scale (0.42525 0.42525) "> <anima  Tetransform attributename= "transform" type= "scale" begin= " -0.125s" calcmode= "spline" keysplines= "0.3 0 0.7 1;0.3 0 0.7 1"    Values= "0;1;0" keytimes= "0;0.5;1" dur= "1s" repeatcount= "indefinite" ></animateTransform> </circle> </g> <g transform= "translate" > <circle cx= "0" cy= "0" r= "7" fill= "#abbd81" transform= "SCA Le (0.113418 0.113418) "> <animatetransform attributename=" transform "type=" scale "begin=" 0s "calcmode=" spl Ine "keysplines=" 0.3 0 0.7 1;0.3 0 0.7 1 "values=" 0;1;0 "keytimes=" 0;0.5;1 "dur=" 1s "repeatcount=" indefinite "></ani Matetransform> </circle> </g></svg>

：

You can also use JS to control the SVG properties, control the animation process of SVG, to be able to respond to clicks and other Events icon button.