Shulou(Shulou.com)06/03 Report--

This article shows you how to understand SVG in HTML5, which is concise and easy to understand. It will definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

SVG background

SVG is the abbreviation of Scalable Vector Graphics, which means scalable vector graphics. In 1998, the World wide Web Alliance set up a working group to develop a technology to express vector graphics through XML-SVG! Because SVG is also a kind of XML file, SVG also inherits the advantages of openness, portability and interaction of XML. Today, almost all major browsers support SVG, and you can get more compatibility information here, including:

Use or elements to display basic SVG graphics

Use

To display SVG graphics

Apply a SVG drawing as a CSS background map

Use tags directly in HTML documents (HTML5 support required)

Use SVG transformations, filters and other special effects on HTML elements that use CSS or external object elements

Use photoshop-like effects on SVG objects, including blur and color manipulation

Use animation with SVG images

Use fonts in SVG format

* SVG

* basic content

* SVG is not proprietary to HTML5

* HTML5 provides content about SVG natives

* before HTML5, there was SVG content

* SVG, in short, is a vector graph

* the SVG file has the extension ".svg"

* SVG uses XML syntax

* concept

* SVG is a language for describing two-dimensional graphics using XML technology

* characteristics of SVG

* SVG drawing graphics can be crawled by search engines

* SVG is enlarged without decreasing image quality

* the difference between SVG and Canvas

* SVG

* does not depend on resolution

* event binding is supported

* programs for large rendering areas (such as Baidu Maps)

* cannot be used to implement web games

* Canvas

* dependent on resolution

* event binding is not supported

* most suitable for web games

* Save pictures in ".jpg" format

* purpose

* some small icons in the web page

* dynamic special effects in web pages (animation effects)

* use SVG in HTML5

* use elements

* function-similar to elements

* default size is 300px*150px

* use CSS style

* drawing graphics using SVG must be defined in the element

* drawing graphics

* rectangular elements

The code is as follows:

SVG draws rectangle

* Circular elements

* Elliptic elements

* straight line element

* broken line elements

* Polygon element

* Special effects elements

* gradient-gradient elements are defined within the element

* Linetype gradient-

* this element is the starting element

* sector (ray) gradient-

* filter-Gaussian blur

* filter use elements

* element-Gaussian blur

* in= "SourceGraphic"

* stdDeviation-sets the blur level

The code is as follows:

* Note-defined in element

* TWO.js

* basic content

* introduction to JS Library

* three.js-specifically for drawing 3D graphics

* two.js-specifically for drawing two-dimensional graphics

* formats supported by two.js

* SVG-default

* Canvas

* WebGL-specifically for drawing images

* how to use two.js

* introduce two.js files into HTML pages

* define a container in the HTML page ()

* in javascript code

* get the container in the HTML page

* create a Two object and add it to the container

New Two (params) .appendto (Element)

* draw using the API method provided by two.js

* set up graphics using the methods provided by two.js

* use update () method to draw

* create Two object

* Constructor-new Two (params)

* params parameter-sets the information of the current object

* type-sets the format currently used (Two.Types.svg)

* svg-default

* canvas

* webgl

* width and height-set width and height

* fullscreen-sets whether the screen is full

* Boolean value, true indicates full screen

* graphic method

* makeLine ()-draw lines

* makeRectangle ()-draw a rectangle

* makeCircle ()-draw a circle

* makeEllipse ()-draw an ellipse

* Animation method

* update ()-Update animation

* play ()-add animation (loop)

* pause ()-Delete animation

* set the style of drawing

* when you call the drawing method of Two object to draw a graph, return the drawing object

* set the relevant attribute values through the drawing object

* grouping operation

* Two.Group

* Animation effect

* bind (event,callback) method-event binding

* event-bind event name

* update-corresponds to the role of the update () method

* all DOM events can be bound

* callback-event handler function

* expand content

* Front-end development tools

* Aptana Studio 3-Code hint

* Webstrom-domestic front-end developer artifact

* in actual development

* Multi-purpose SVG

* No distortion

* searchable

* Page optimization-reduce external links

*

*

* drawing graphics with Canvas-HTML

* in actual operation, it appears as a picture (.png)

* cannot be crawled by search engines

* distortion after amplification

* SVG content

* the amount of content is very large

* drawing graphics statically

* dynamic animation effects

* provide events specifically

* there is little information on SVG online (no books)

* specifications for SVG (W3C English)

* SVG or CANVAS is defined in the HTML page

* can only one element be defined, or can multiple elements be defined?

* multiple or elements can be defined on a HTML page

* both SVG and CANVAS allow multiple graphics to be defined (drawn) at the same time

* use in actual development

* the utilization rate of SVG in future work development is not high.

* SVG pictures are usually done by UI designers

* SVG even if we design (draw)

* at present, there are many websites on the Internet that provide ready-made SVG images.

* use the JS library

The above is how to understand SVG in HTML5. Have you learned any knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.