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

SVG’s is used to create a circle. The cx and cy properties define the x and y coordinates of the center of the circle. If these two properties are omitted, the dot will be set to (0, 0). The r attribute defines the radius of the circle.

The

stroke and stroke-width properties control how the outline of a shape is displayed. We set the circle's outline to 2px wide, with a black border. The fill property sets the color within the shape. We set the fill color to red.

The closing tag closes the SVG element and the document itself.

Note: All open tags must have a closing tag!

Advantages of SVG

SVG can be read and modified by many tools (Notepad can also be easily opened and modified)
SVG is smaller and more compressible than JPEG and GIF images.
SVG is scalable
SVG images can be printed with high quality at any resolution
SVG can be enlarged without losing image quality
Text in SVG images is optional and searchable (great for making maps)
SVG can run with technologies like Java
SVG is an open standard
SVG files are pure XML

SVG files can be embedded in HTML documents via the following tags: ,