AI + SVG continuous learning

Source: Internet
Author: User
Tags manual writing polyline
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.


Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.