Into SVG
What is SVG? Maybe many people have heard of SVG now, but they don’t necessarily know what SVG is: SVG (Scalable Vector Graphics A lot of incomprehensible English ) Scalable vector graphics, which is defined in XML format Vector-based graphics for the web, and its characteristic is that the graphics quality will not be lost when the image is enlarged or changed in size. At the same time, it is a W3C standard like DOM.
Bitmaps and vector graphics are explained here:
Bitmap, which is the picture we often see, is a collection of stores densely arranged on a plane, which means that it is composed of dots. And if you enlarge it, the corresponding points will be enlarged, which will make the picture look very unclear and rough.
A vector image, also known as an object-oriented image or a drawing image, is mathematically defined as a series of points connected by lines. Graphic elements in vector files are called objects. Each object is a self-contained entity with properties such as color, shape, outline, size, and screen position. Its characteristic is that the image will not be distorted after magnification and has nothing to do with resolution. It is suitable for graphic design, text design, some logo design, layout design, etc. Vector graphics formats include CGM, SVG, AI (Adobe Illustrator), CDR (CorelDRAW), PDF, SWF, VML, etc.
(ps: The content below this essay is partly from W3Cschool)
A simple SVG
<span style="color: #0000ff;"><?</span><span style="color: #ff00ff;">xml version="1.0" standalone="no"</span><span style="color: #0000ff;">?></span> <span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">svg </span><span style="color: #ff0000;">xmlns</span><span style="color: #0000ff;">="http://www.w3.org/2000/svg"</span><span style="color: #ff0000;"> version</span><span style="color: #0000ff;">="1.1"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">circle </span><span style="color: #ff0000;">cx</span><span style="color: #0000ff;">="100"</span><span style="color: #ff0000;"> cy</span><span style="color: #0000ff;">="50"</span><span style="color: #ff0000;"> r</span><span style="color: #0000ff;">="40"</span><span style="color: #ff0000;"> stroke</span><span style="color: #0000ff;">="black"</span><span style="color: #ff0000;"> stroke-width</span><span style="color: #0000ff;">="2"</span><span style="color: #ff0000;"> fill</span><span style="color: #0000ff;">="red"</span> <span style="color: #0000ff;">/></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">svg</span><span style="color: #0000ff;">></span>
SVG code analysis:
The first line contains the XML declaration. Please note the standalone attribute! This property specifies whether this SVG file is "stand-alone", or contains references to external files. standalone="no" means that the SVG document will reference an external file - in this case, a DTD file.The second and third lines refer to this external SVG DTD. The DTD is located at "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd". This DTD is located at W3C and contains all allowed SVG elements.
SVG code starts with the