AI + SVG continuous learning

Today, I tried to use SVG to create an animation.

The implementation result is as follows:

Images related to this topic

The animation code is as follows:

<Animatemotion Path = "M0, 300 s150, 100 200,200 s400, 400, 0" Dur = "8 s" repeatcount = "INDEFINITE" Rotate = "Auto "/

But I decided so far to learn animation, because I didn't have the support of powerful tools (I didn't find it in AI), it was a nightmare to completely write an animation using code, currently, vector animation of SVG can only be used as an aid, and its animation capability should be good. However, it may not be popular because it is not supported by flash.

For all the code, see the attachment:
This topic-Related File 161417.zip

Use of basic graphics Circle, elliptical, square, rectangular, line, irregular figure, and text are used together: Images related to this topic The Code is also simple: <Circle Cx = "50" Cy = "50" r = "25"/> <Ellipse Cx = "75" Cy = "125" RX = "50" ry = "25"/> <Rect x = "155" Y = "5" width = "75" Height = "100"/> <Rect x = "250" Y = "5" width = "75" Height = "100" RX = "30" ry = "20"/> <Line X1 = "0" Y1 = "150" X2 = "400" y2 = "150" Stroke-width = "2" stroke = "blue"/> <Polyline points = "50,175 150,175 150,125 250,200"/> <Polygon points = "379,175 355,175 355,200 345,200 345,175 321,175 "/> <Rect x = "0" Y = "0" width = "600" Height = "400" Fill = "NONE" stroke = "red" stroke-width = "3"/> <Text x = "10" Y = "300" font-size = "40" fill = "yellow" stroke = "red"> breeze </text> The path usage is also simple: <Path d = "M 100 100 L 300 50 L 300 250 L 100 300 Z" Fill = "red" stroke = "blue" stroke-width = "3"/> Images related to this topic OK, the SVG code is quite understandable and well mastered. However, if you use code to manually write complicated images, it will vomit blood, so our goal is to understand it, then, use AI to create images and manually optimize the generated code. Use AI to create several basic images: Images related to this topic The generated code 15.3kb is also messy when opened in notepad, but with the above learning base, we will perform some optimization. If you delete the data in <metadata> </metadata>, there is no big difference between the SVG file and the handwritten file. The deleted size is only 1.33kb. The key code is just as follows: <Rect x = "17.362" Y = "0.5" fill = "# ffffff" stroke = "#000000" width = "92.667" Height = "48.667"/> <Circle fill = "# bfc9ff" stroke = "#000000" Cx = "197.695" Cy = "54.833" r = "49.667"/> <Line fill = "NONE" stroke = "#000000" X1 = "28.695" Y1 = "143.167" X2 = "288.696" y2 = "143.167"/> <Text transform = "Matrix (0.8988 0 0 1 81.3618 219.8857) "> <tspan x =" 0 "Y =" 0 "fill =" # ff843f" Font-family = "'simsun'" A: Adobe-font-script = "chinesesimplified" Font-size = "35"> breeze </tspan> </text> <Ellipse fill = "# bfc9ff" stroke = "#000000" Cx = "308.029" Cy = "77.5" RX = "32" ry = "69"/> <Polyline fill = "# bfc9ff" stroke = "#000000" points = "0.029, 80.5 46.029, 77.833 60.695, 117.167"/> It is basically the same as manual writing. OK. Now I want to learn how to create AI charts. It is also the strength of SVG.