[SVG] For the beauty of the front-end page, I choose to learn SVG

Blog description

The information involved in the article comes from the Internet and personal summary, which is intended to summarize personal learning and experience. If there is any infringement, please contact me to delete it, thank you!

illustrate

In the previous self-study process of SVG, in fact, it has always been very deep and dare not touch it, but you will eventually come to this point if you want to understand it. :blush: No matter how difficult it seems, the techniques are accumulated from simple knowledge points.

What is SVG?

SVG means Scalable Vector Graphics (Scalable Vector Graphics).
It uses XML format to define images.
SVG images will not lose their graphic quality when they are enlarged or changed in size.
SVG is a standard of the World Wide Web Consortium.
SVG is integrated with W3C standards such as DOM and XSL.

In general, SVG is a file defined by XML. Because it is a vector graphic, its graphic quality is very high.

Since SVG is an XML file, SVG images can be created with any text editor, but complex graphics still have to use graphics editing tools.

Advantages of SVG

SVG can be read and modified by many tools (such as Notepad).
Compared with JPEG and GIF images, SVG is smaller in size and more compressible.
SVG is scalable.
SVG images can be printed with high quality at any resolution.
SVG can be enlarged without degradation of image quality.
The text in the SVG image is optional and also searchable (good for making maps).
SVG is an open standard.
SVG files are pure XML.

The main competitor of SVG is Flash. Compared with Flash, the biggest advantage of SVG is its compatibility with other standards (such as XSL and DOM). Flash is a proprietary technology that is not open source.

A small example

Sample code

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx="100" cy="50" r="40" stroke="black"
  stroke-width="2" fill="red" />
</svg>

Effect

Code analysis

<xml> first line of 0619252d511ccb contains the XML declaration.
The standalone attribute specifies whether the SVG file is "standalone" or contains a reference to an external file, standalone="no" means that the SVG document will refer to an external file-here, it is a DTD file.
<svg> and </svg> are SVG codes, which are equivalent to the start tag and the end tag. This is the root element.
The width and height attributes can set the width and height of this SVG document.
The version attribute defines the SVG version used.
The xmlns attribute can define the SVG namespace.
<circle> used to create a circle. The cx and cy attributes define the x and y coordinates of the center of the circle. If these two attributes 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 the shape is displayed. We set the outline of the circle to be 2px wide with a black border.
The fill attribute sets the color inside the shape. We set the fill color to red.
The function of the close tag is to close the SVG element and the document itself.

Note: must have closing labels!

`How to use SVG in HTML?`

There are 5 ways to embed SVG files in HTML documents: <img> , <embed> , <object> , <iframe> , and directly embed in HTML code.

`Use <img> tag`

Introduced as a picture, background

Syntax:

<img src="circle1.svg" alt=""/>

`Use <embed> tag`

Advantages: all major browsers support and allow scripting
Disadvantages: Not recommended for use in HTML4 and XHTML (but allowed in HTML5)

Syntax:

<embed src="circle1.svg" type="image/svg+xml" />

`Use the <object> tag`

Advantages: all major browsers support and support HTML4, XHTML and HTML5 standards
Disadvantages: scripts are not allowed.

Syntax:

<object data="circle1.svg" type="image/svg+xml"></object>

`Use <iframe> tag`

Advantages: all major browsers support and allow scripting
Disadvantages: Not recommended for use in HTML4 and XHTML (but allowed in HTML5)

Syntax:

<iframe src="circle1.svg"></iframe>

`Embed SVG code directly in HTML`

Advantages: convenient operation, dynamic adjustment
Disadvantages: HTML pages are too long and not friendly to coding

Syntax:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>

`The basic shape of SVG`

`Rectangle <rect>`

example one :

Normal rectangle

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect width="300" height="100" style="fill:rgb(122,122,0);stroke-width:2;stroke:rgb(0,0,0)" />
</svg>

effect:

code analysis:

The width and height attributes of the rect element can define the height and width of the rectangle
The style attribute is used to define CSS properties
The fill property of CSS defines the fill color of the rectangle (rgb value, color name or hexadecimal value)
The CSS stroke-width property defines the width of the rectangular border
The CSS stroke property defines the color of the rectangle border

example two:

Transparency of fill and border

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect x="50" y="20" width="150" height="150" style="fill:blue;stroke:red;stroke-width:5;fill-opacity:0.5;stroke-opacity:0.5" />
</svg>

effect:

code analysis:

The x attribute defines the left position of the rectangle (for example, x="0" defines that the distance from the rectangle to the left side of the browser window is 0px)
The y attribute defines the top position of the rectangle (for example, y="0" defines that the distance between the rectangle and the top of the browser window is 0px)
The fill-opacity property of CSS defines the transparency of the fill color (the legal range is: 0-1)
The stroke-opacity property of CSS defines the transparency of the outline color (the legal range is: 0-1)

example three:

Transparency of the entire element

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500px" height="500px">
  <rect x="50" y="20" width="150" height="150" style="fill:blue;stroke:pink;stroke-width:5;opacity:0.4" />
</svg>

effect:

code analysis:

The CSS opacity property is used to define the transparency value of the element (range: 0 to 1).

example four:

Rounded Rectangle

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500px" height="500px">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="160" style="fill:red;stroke:black;stroke-width:1;opacity:0.5" />
</svg>

effect:

code analysis:

The rx and ry attributes can round the corners of the rectangle.

`Round <circle>`

example:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <circle cx="100" cy="50" r="40" stroke="red" stroke-width="2" fill="blue" />
</svg>

effect:

code analysis:

The circle tag can be used to create a circle
The cx and cy attributes define the x and y coordinates of the dot. If cx and cy are omitted, the center of the circle will be set to (0, 0)
The r attribute defines the radius of the circle

`Oval <ellipse>`

example:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500">
  <ellipse cx="300" cy="80" rx="100" ry="50" style="fill:red;stroke:purple;stroke-width:2" />
</svg>

effect:

code analysis:

The ellipse tag can be used to create an ellipse
The x coordinate of the center of the ellipse defined by the CX attribute
The y coordinate of the center of the ellipse defined by the CY attribute
The horizontal radius defined by the RX attribute
The vertical radius defined by the RY attribute

`Line <line>`

example:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <line x1="0" y1="0" x2="200" y2="200" style="stroke:black;stroke-width:5" />
</svg>

effect:

code analysis:

The line tag can be used to create a straight line
The x1 attribute defines the start of the line on the x-axis
The y1 attribute defines the start of the line on the y axis
The x2 attribute defines the end of the line on the x axis
The y2 attribute defines the end of the line on the y axis

`Polyline <polyline>`

example one:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polyline points="20,20 40,25 60,40 80,10 120,140 200,180" style="fill:none;stroke:black;stroke-width:3" />
</svg>

effect:

code analysis:

polyline is used to create any shape with only straight lines
points is a collection of points

example two:

Draw a five-pointed star

<svg style="height:300px;width:300px;" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <polyline points="100 10,40 180,190 60,10 60,160 180" style="fill:blue;stroke:blue;stroke-width:1" />
</svg>

effect:

code analysis:

Fill in the blanks are used, because the line segment is not closed

`Polygon <polygon>`

Example 1:

<svg  height="210" width="500">
  <polygon points="200,10 250,190 160,210"
  style="fill:red;stroke:purple;stroke-width:1"/>
</svg>

effect:

code analysis:

The polygon tag is used to create graphics with no less than three sides
points is a collection of points

example two:

Draw a five-pointed star

<svg style="height:300px;width:300px;" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <polygon points="100 10,40 180,190 60,10 60,160 180" style="fill:none;stroke:black;stroke-width:5"/>
</svg>

effect:

code analysis:

The last point will be closed automatically, which is also a difference from polyline

`Path <path>`

Path data:

M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto
A = elliptical Arc
Z = closepath

example:

Draw a triangle

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <path d="M150 0 L75 200 L205 270 Z" />
</svg>

effect:

code analysis:

A path is defined, it starts at position 150 0, reaches position 75 200, then starts from there to 205 270, and finally closes the path at 150 0.

`Summarize`

The basic part of SVG has already been introduced, but the use of path has just begun. Follow-up will specifically talk about path, and of course some "advanced" attributes of SVG.

In fact, all the way through the operation, we found that the operation of SVG is roughly similar to the principle of using PS, AI and other drawing tools. It is also helpful for us to understand the drawing of such graphics.

thanks

Universal network
Novice Tutorial
And the hardworking self, personal blog , GitHub test , GitHub
Public Account-Guizimo, Mini Program-Xiaogui Blog

[SVG] For the beauty of the front-end page, I choose to learn SVG