Into SVG

WBOY
Release: 2016-09-29 09:19:07
Original
1322 people have browsed it

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>
Copy after login

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 element, including the opening tag and the closing tag . This is the root element. The width and height properties set the width and height of this SVG document. The version attribute defines the SVG version used, and the xmlns attribute defines the SVG namespace.

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: , or