What is svg? Commonly used methods of svg (with code)-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

What is svg? Commonly used methods of svg (with code)

不言

Aug 08, 2018 pm 01:50 PM

svg

This article brings you what is SVG? The commonly used methods of svg (with code) have certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

What is SVG?
SVG stands for Scalable Vector Graphics
SVG is used to define vector-based graphics for the web
SVG uses XML format to define graphics
SVG images are enlarged or resized There will be no loss in graphic quality
SVG is a standard of the World Wide Web Consortium
SVG is an integral part of W3C standards such as DOM and XSL

Compared with other image formats, using SVG The advantage is:
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 losing image quality
Text in SVG images is scalable optional, and also searchable (great for making maps)
SVG can run with Java technology
SVG is an open standard

SVG files are pure XML

Code structure

<html xmlns:svg="http://www.w3.org/2000/svg">
<body>
 
<p>This is an HTML paragraph</p>
 
<svg:svg width="300" height="100" version="1.1" >
<svg:circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red" />
</svg:svg>
 
</body>
</html>

Copy after login

Use and operation of predefined shape elements provided by SVG:

tag can be used to create rectangles, as well as variants of rectangles

<rect x="20" y="20" rx="20" ry="20" width="250" height="250" style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9"/>

Copy after login

Code explanation:
1) The width and height attributes of the rect element can define the height and width of the rectangle
2) The style attribute is used to Define CSS properties
3)CSS fill property defines the fill color of the rectangle (rgb value, color name or hexadecimal value)
4)CSS stroke-width property defines the width of the rectangle border
5 )CSS stroke attribute defines the color of the rectangle border
6)x attribute defines the left position of the rectangle (for example, x="0" defines the distance from the rectangle to the left side of the browser window to be 0px)
7)y The attribute defines the top position of the rectangle (for example, y="0" defines the distance from the rectangle to the top of the browser window to be 0px)
8) The CSS fill-opacity attribute defines the fill color transparency (the legal range is: 0 - 1 )
9) The stroke-opacity attribute of CSS defines the transparency of the stroke color (the legal range is: 0 - 1)
10) The rx and ry attributes can make the rectangle have rounded corners.

tag can be used to create a circle

<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>

Copy after login

Code explanation:
1) The cx and cy attributes define the x and y coordinates of the point. If cx and cy are omitted, the center of the circle is set to (0, 0)
2)r. The r attribute defines the radius of the circle.

tag can be used to create ellipses

<ellipse cx="300" cy="150" rx="200" ry="80" style="fill:rgb(200,100,50); stroke:rgb(0,0,100);stroke-width:2"/>

Copy after login

Code explanation:

1 )cx attribute defines the x coordinate of the point
2)cy attribute defines the y coordinate of the point
3)rx attribute defines the horizontal radius
4)ry attribute defines the vertical radius

tag is used to create lines

<line x1="0" y1="0" x2="300" y2="300" style="stroke:rgb(99,99,99);stroke-width:2"/>

Copy after login

Code explanation:

1)x1 attribute defines the start of the line on the x-axis

2)y1 attribute defines the start of the line on the y-axis
3)x2 attribute defines the end of the line on the x-axis
4)y2 attribute defines the end of the line on the y-axis

tag is used to create graphics with no less than three sides

<polygon points="220,100 300,210 170,250" style="fill:#cccccc; stroke:#000000;stroke-width:1"/>

Copy after login

Code explanation:

1) The points attribute defines the x and y coordinates of each corner of the polygon

tag is used to create a shape containing only straight lines

<polyline points="0,0 0,20 20,20 20,40 40,40 40,60"  style="fill:white;stroke:red;stroke-width:2"/>

Copy after login

Code explanation:
1) The points attribute defines the x and y coordinates of each corner of each segment of the line

tag is used to define the path

<path d="M250 150 L150 350 L350 350 Z" />

Copy after login

The following commands can be used for path data:

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

Copy after login

Comments : All the above commands allow lowercase letters. Upper case means absolute positioning, lower case means relative positioning

SVG filter Available filters are:

feBlendfeColorMatrix

feComponentTransfer

feComposite
feConvolveMatrix
feDiffuseLighting
feDisplacementMap
feFlood
feGaussianBlur
feImage
feMerge
feMorphology
feOffset
feSpecularLighting
feTile
feTurbulence
feDistantLight
fePointLight
feSpotLight

Gaussian BlurGaussian Blur

标签用来定义 SVG 滤镜。标签使用必需的 id 属性来定义向图形应用哪个滤镜？
标签必须嵌套在标签内。标签是 definitions 的缩写，它允许对诸如滤镜等特殊元素进行定义。

<defs>
<filter id="Gaussian_Blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>
</defs>
<ellipse cx="200" cy="150" rx="70" ry="40" style="fill:#ff0000;stroke:#000000;stroke-width:2;filter:url(#Gaussian_Blur)"/>

Copy after login

代码解释：
1) 标签的 id 属性可为滤镜定义一个唯一的名称（同一滤镜可被文档中的多个元素使用）
2)filter:url 属性用来把元素链接到滤镜。当链接滤镜 id 时，必须使用 # 字符
3)滤镜效果是通过标签进行定义的。fe 后缀可用于所有的滤镜
4) 标签的 stdDeviation 属性可定义模糊的程度
5)in="SourceGraphic" 这个部分定义了由整个图像创建效果

可用来定义 SVG 的线性渐变

标签必须嵌套在的内部。标签是 definitions 的缩写，它可对诸如渐变之类的特殊元素进行定义。
线性渐变可被定义为水平、垂直或角形的渐变：
1)当 y1 和 y2 相等，而 x1 和 x2 不同时，可创建水平渐变
2)当 x1 和 x2 相等，而 y1 和 y2 不同时，可创建垂直渐变
3)当 x1 和 x2 不同，且 y1 和 y2 不同时，可创建角形渐变

<defs>
<linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1"/>
</linearGradient>
</defs>
<ellipse cx="200" cy="190" rx="85" ry="55"  style="fill:url(#orange_red)"/>

Copy after login

代码解释：
1) 标签的 id 属性可为渐变定义一个唯一的名称
2)fill:url(#orange_red) 属性把 ellipse 元素链接到此渐变
3) 标签的 x1、x2、y1、y2 属性可定义渐变的开始和结束位置
4)渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个标签来规定。offset 属性用来定义渐变的开始和结束位置。

用来定义放射性渐变

标签必须嵌套在中。标签是 definitions 的缩写，它允许对诸如渐变等特殊元素进行定义。

<defs>
<radialGradient id="grey_blue" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(200,200,200);stop-opacity:0"/>
<stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1"/>
</radialGradient>
</defs>
<ellipse cx="230" cy="200" rx="110" ry="100" style="fill:url(#grey_blue)"/>

Copy after login

代码解释：
1) 标签的 id 属性可为渐变定义一个唯一的名称，fill:url(#grey_blue) 属性把 ellipse 元素链接到此渐变，cx、cy 和 r 属性定义外圈，而 fx 和 fy 定义内圈渐变的颜色范围可由两种或多种颜色组成。每种颜色通过一个标签来规定。offset 属性用来定义渐变的开始和结束位置。

在svg中提供了如g元素这样的将多个元素组织在一起的元素。由g元素编组在一起的可以设置相同的颜色，可以进行坐标变

<svg width="100%" height="100%" version="1.1"
     xmlns="http://www.w3.org/2000/svg">

  <g fill="dodgerblue">
    <rect x="10" y="10" width="40" height="40" ry="10" />
    <rect x="80" y="80" width="40" height="40" ry="10" />
    <rect x="150" y="150" width="40" height="40" ry="10" />
  </g>

</svg>

Copy after login

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

What's New in Windows 11 KB5054979 & How to Fix Update Issues

3 weeks ago By DDD

How to fix KB5055523 fails to install in Windows 11?

2 weeks ago By DDD

InZoi: How To Apply To School And University

4 weeks ago By DDD

How to fix KB5055518 fails to install in Windows 10?

2 weeks ago By DDD

Roblox: Dead Rails – How To Summon And Defeat Nikola Tesla

1 months ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7849

Java Tutorial

1649

CakePHP Tutorial

1403

Laravel Tutorial

1300

PHP Tutorial

1241

Related knowledge

Let's talk about how to use SVG to achieve image mosaic effect Sep 01, 2022 am 11:05 AM

How to use SVG to achieve image mosaic effect without using Javascript? The following article will give you a detailed understanding, I hope it will be helpful to you!

How to convert svg to jpg format Nov 24, 2023 am 09:50 AM

svg can be converted to jpg format by using image processing software, using online conversion tools, and using the Python image processing library. Detailed introduction: 1. Image processing software includes Adobe Illustrator, Inkscape and GIMP; 2. Online conversion tools include CloudConvert, Zamzar, Online Convert, etc.; 3. Python image processing library, etc.

An in-depth analysis of how to use svg icons in vue3+vite Apr 28, 2022 am 10:48 AM

svg images are widely used in projects. The following article will introduce how to use svg icons in vue3 + vite. I hope it will be helpful to everyone!

Detailed explanation of using SVG to add logo to favicon Sep 07, 2022 am 10:30 AM

How to add logo to favicon using SVG? The following article will introduce to you how to use SVG to generate favicon with logo. I hope it will be helpful to you!

VUE3 introductory tutorial: Use Vue.js plug-in to play with SVG Jun 16, 2023 am 09:48 AM

With the continuous development of modern Web front-end development, more and more technologies are widely used in actual development. Among them, Vue.js is currently one of the most popular JavaScript frameworks. It is based on the MVVM model and provides a rich API and component library, making it easier to develop responsive, reusable, and efficient web applications. The latest version of Vue.js3 has better performance and richer features than the old version, which has attracted widespread attention and research. This article will introduce to you a

How to use svg method in vue3+vite2 May 11, 2023 pm 05:55 PM

1. Install vite-plugin-svg-icons. You also need to install fast-glob related dependencies. Otherwise, when vite runs npmrundev, it will report the Cannotfindmodule'fast-glob' error npmifast-glob@3.x-Dnpmivite-plugin-svg. -icons@2.x-D 2. Create a new component index.vueimport{computed}from'vue';cons under src/components/svgIcon

Draw SVG files on HTML5 canvas Sep 15, 2023 pm 03:09 PM

To draw HTMLImageElements on a canvas element, use the drawImage() method. This method defines an Image variable using src="mySVG.svg" and uses drawImage when loading. varmyImg=newImage();myImg.onload=function(){ ctx.drawImage(myImg,0,0);}img.src="http://www.example.com/files/sample.svg";

How to use svg in vue3+vue-cli4 May 11, 2023 pm 05:58 PM

1. Install svg-sprite-loadernpminstallsvg-sprite-loader--save-dev 2. Create a new component under src/components/svgIcon index.vueimport{computed}from"@vue/reactivity";exportdefault{name:"baseSvgIcon", props:{iconClass:{type:String},className:{type:String},},setup

See all articles