SVG (Scalable Vector graphics)

    SVG Scalable vector graphic (Scalable Vector graphics) is a graphic format for describing two-dimensional vector graphics based on Extensible Markup Language (XML). SVG is a new two-dimensional vector graphics format developed in August 2000 by the World Wide Web ConSortium, or the "Internet Standards Organization", and is also the network vector graphics standard in the specification. SVG strictly conforms to the XML syntax and describes the image content in a descriptive language of the text format, so it is a vector graphics format independent of the image resolution.      digitization of images. There are two scenarios for storing pictures as data. One is a bitmap, also known as a raster diagram. That is, the image is viewed as a collection of densely spaced points on the plane in a natural optical vision. The light emitted at each point has an independent frequency and intensity, which is reflected in the visual color and brightness. This information has different coding schemes, the most common on the internet is RGB. Depending on your needs, the encoded information can have a different bit (bit) number--bit depth. The higher the number of digits, the clearer the color, the higher the contrast, and the greater the space occupied. The other determines the granularity of the bitmap, which is the number of points. A bitmap file is a collection of all the data that makes up its point, and its size is naturally equal to the number of points multiplied by the bit depth. The bitmap format is a huge family, including Common Jpeg/jpg, GIF, TIFF, PNG, BMP. The second scenario is a vector diagram. It looks at the graphics in an abstract way, documenting the patterns shown in them rather than the original data at each point. It sees the image as a combination of "objects", a curve that records the outline of an object, a pattern of a color that describes the pattern inside the object (such as gradients, for example). A photograph, for example, is seen as a combination of various characters and backgrounds. This more advanced perspective is precisely the reflection of human beings in consciousness when they look at the world. Vector Chart formats include CGM, SVG, AI (Adobe Illustrator), CDR (CorelDRAW), PDF, SWF, VML, and more. A simple geometry in a vector diagram can be determined with only a few characteristic values. For example, a triangle, you only need to determine the coordinates of three vertices. The circle only needs to determine the coordinates and radii of the center. A curve that describes its function can be determined by just a few parameters. such as sinusoidal, various spiral and so on. If you use bitmaps to record these geometric patterns, you need to include data for each pixel that makes up the line. In addition to space-saving, vector images also have the perfect scalability. Because the record is the characteristic of the graph, the size of the graph changes arbitrarily, it just does the similarity transformation, does not appear the blur and the distortion. Conversely, when a bitmap's picture is enlarged beyond its original size, there is a gap between the dots, even if populated with an algorithm, the BlurSawtooth and so on, not as accurate as vector images. Vectors are therefore well suited for recording simple graphics such as symbols, icons, and so on. And the bitmap is suitable for no obvious law, color rich and delicate picture.  svg has some pre-defined shape elements that can be used and manipulated by developers:

• Rectangle <rect>
• Round <circle>
• Oval <ellipse>
• Line <line>
• Line <polyline>
• Polygon <polygon>
• Path <path>

What is SVG?

SVG refers to a scalable vector graphic (Scalable vector graphics)
SVG is used to define vector-based graphics for the network
SVG defines graphics using XML format
SVG images have no loss of graphics quality when zoomed in or changed size
SVG is the standard of the World Wide Web Consortium
SVG is a whole with a broad standard such as DOM and XSL

the difference between Canvas and SVG:
Svg
SVG is a language that uses XML to describe 2D graphics.
SVG is based on XML, which means that every element in the SVG DOM is available. You can attach a JavaScript event handler to an element.
In SVG, each drawn shape is treated as an object. If the properties of the SVG object change, the browser can automatically reproduce the graphic.
Characteristics:
Not dependent on resolution
Support for event handlers
Best for applications with large rendering areas (e.g. Google Maps)
High complexity slows rendering speed (any applications that overuse the DOM are unpleasant)
Not suitable for gaming applications
Canvas
Canvas uses JavaScript to draw 2D graphics.
The Canvas is rendered per pixel.
In the canvas, once the drawing is drawn, it will not continue to get the attention of the browser. If its position changes, the entire scene also needs to be redrawn, including any objects that might have been overwritten by the graphic.
Characteristics:
Dependent resolution
Event handlers are not supported
Weak text rendering capabilities
The ability to save result images in. png or. jpg format is best suited for image-intensive games where many objects are redrawn frequently

<svg width="100%"height="100%"> <circle cx=" -"cy=" -"R=" -"Stroke="#ff0"Stroke-width="3"Fill="Red"/></svg> "Kiwi.svg"alt="New Zealand snipe Ostrich"><a href="/" class="logo"style="Background:url (kiwi.svg); Display:block;text-indent: -9999px;width:100px;height:82px;background-size:100px 82px;"> New Zealand </a>

Icon Font: The advantage of using the Font icon font icon in addition to image clarity, there are more advantages than bitmaps.

Applicability: An icon font is smaller than a series of images (especially if you use double-sized images in the retina screen). Once the icon font is loaded, your icon will be rendered immediately, without the need to download an image.

Extensibility: Icon fonts can be set to any size using the Font-size property. This allows you to output icons of different sizes at any time, however, using bitmaps, you must output a different file for each image of a different size.

Flexibility : text effects can be easily applied to your icons, including effects such as color, shading, and flipping. They can also be displayed in any context.

Compatibility: Web fonts support all modern browsers, including the low version of IE.

Disadvantages:

1, the browser treats it as text for anti-aliasing optimization, and sometimes the effect is not as sharp as you might expect. In particular, there are different algorithms for anti-aliasing of text in different systems, which may result in different display effects.

2, icon font as a font, icon display size and location may be affected by, and font-size line-height word-spacing so on CSS properties. The CSS style of the icon's container may have an impact on the position of the icon, which is inconvenient to adjust.

3, the use of the inconvenience. First, loading an icon Font with hundreds of icons, but using only a few of them, is a waste of load time. It is also inconvenient to make an icon font yourself and integrate the icons used in multiple icon font into a single font. Of course, the use of the Ali UX Vector icon Library can solve this problem

4, in order to achieve maximum browser support, you may want to provide at least four different types of font files. Includes TTF, WOFF, EOT, and a font defined using the SVG format. If you make it yourself, you might have a headache.

Reference: http://www.w3school.com.cn/svg/index.asphttps://icomoon.io/http://www.iconfont.cn/

SVG (Scalable Vector graphics)