SVG is the abbreviation of Scalable Vector Graphics, meaning scalable vector graphics. In 1998, the World Wide Web Alliance established a working group to develop a technology that expresses vector graphics through XML - SVG! Since SVG is also an XML file, SVG also inherits the advantages of openness, portability and interactivity of XML. This article introduces svg in html5. If you need it, please refer to the SVG background.
SVG is the abbreviation of Scalable Vector Graphics, meaning scalable vector graphics. In 1998, the World Wide Web Alliance established a working group to develop a technology that expresses vector graphics through XML - SVG! Since SVG is also an XML file, SVG also inherits the advantages of XML's openness, portability and interactivity. Nowadays, almost all mainstream browsers support SVG, and you can get more compatibility information from here, including:
Use <embed> or <object> elements to display basic SVG graphics;
Use <img> to display SVG graphics;
Apply SVG graphics as CSS background image;
Use the <svg> tag directly in HTML documents (requires HTML5 support);
Use SVG transformations, filters and other special effects for HTML elements that use CSS or external object elements;
Use photoshop-like effects on SVG objects, including blur and color processing;
Use animations for SVG images;
Use SVG fonts;
* SVG
* Basic content
* SVG is not exclusive to HTML5
* HTML5 provides content about SVG native
* Before HTML5 appeared, there was SVG content
* SVG, simply put it as a vector
* The SVG file has an extension of .svg
* SVG uses XML syntax
* concept
* SVG is a language that uses XML technology to describe two-dimensional graphics
* Features of SVG
* SVG drawing graphics can be captured by search engines
* SVG is enlarged when the image quality does not decrease
* The difference between SVG and Canvas
* SVG
* No resolution dependency
* Support event binding
* Programs for large rendering areas (such as Baidu Maps)
* Can't be used to implement web games
* Canvas
* Resolution-dependent
* Event binding is not supported
* The most suitable web game
* Save as .jpg format image
* Purpose
* Some small icons on the web page
* Dynamic effects on the web page (animation effect)
* Using SVG in HTML5
* Use <svg></svg> elements
* Function - Similar to <canvas> element
* The default size is 300px*150px
* Use CSS styles
* Use SVG to draw a graph, you must define the <svg> element.
* Draw a graph
* Rectangular elements
Copy the code