整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
SVG（Scalable Vector Graphics）是一种基于XML的2D矢量图形格式，可以实现图像的无损缩放和高清晰度显示。在HTML中嵌入SVG图像，可以使网页更加生动有趣，提高用户体验
<svg width="54" height="54" class="c-nav--footer__svgicon c-slackhash" viewBox="0 0 54 54" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd">
<path d="M19.712.133a5.381 5.381 0 0 0-5.376 5.387 5.381 5.381 0 0 0 5.376 5.386h5.376V5.52A5.381 5.381 0 0 0 19.712.133m0 14.365H5.376A5.381 5.381 0 0 0 0 19.884a5.381 5.381 0 0 0 5.376 5.387h14.336a5.381 5.381 0 0 0 5.376-5.387 5.381 5.381 0 0 0-5.376-5.386" fill="#44BEDF">
</path>
<path d="M53.76 19.884a5.381 5.381 0 0 0-5.376-5.386 5.381 5.381 0 0 0-5.376 5.386v5.387h5.376a5.381 5.381 0 0 0 5.376-5.387m-14.336 0V5.52A5.381 5.381 0 0 0 34.048.133a5.381 5.381 0 0 0-5.376 5.387v14.364a5.381 5.381 0 0 0 5.376 5.387 5.381 5.381 0 0 0 5.376-5.387" fill="#2EB67D">
</path>
<path d="M34.048 54a5.381 5.381 0 0 0 5.376-5.387 5.381 5.381 0 0 0-5.376-5.386h-5.376v5.386A5.381 5.381 0 0 0 34.048 54m0-14.365h14.336a5.381 5.381 0 0 0 5.376-5.386 5.381 5.381 0 0 0-5.376-5.387H34.048a5.381 5.381 0 0 0-5.376 5.387 5.381 5.381 0 0 0 5.376 5.386" fill="#ECB22E">
</path>
<path d="M0 34.249a5.381 5.381 0 0 0 5.376 5.386 5.381 5.381 0 0 0 5.376-5.386v-5.387H5.376A5.381 5.381 0 0 0 0 34.25m14.336-.001v14.364A5.381 5.381 0 0 0 19.712 54a5.381 5.381 0 0 0 5.376-5.387V34.25a5.381 5.381 0 0 0-5.376-5.387 5.381 5.381 0 0 0-5.376 5.387" fill="#E01E5A">
</path>
</g>
</svg>
们经常在一些页面中遇见svg格式的绘图，通常是一脸懵逼，别急，看完这篇文章你就能很好地了解它了。
SVG 意为可缩放矢量图形（Scalable Vector Graphics），是使用 XML 来描述二维图形和绘图程序的语言，后缀是“.svg”。它的优点是图像在放大或改变尺寸的情况下其图形质量不会有所损失。
SVG 文件可通过以下标签嵌入 HTML 文档：<embed>、<object> 或者 <iframe>。但是在html5中，直接用内联的方式嵌入，方便太多了。各种方式的嵌入如下：
// 使用 <embed> 标签
<embed
src="rect.svg"
width="300"
height="100"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/"
/>
// 使用 <object> 标签
<object
data="rect.svg"
width="300"
height="100"
type="image/svg+xml"
codebase="http://www.adobe.com/svg/viewer/install/"
/>
// 使用 <iframe> 标签
<iframe src="rect.svg" width="300" height="100"></iframe>// 在 HTML5 中， SVG 元素直接嵌入 HTML 页面中
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
<polygon
points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"
/>
</svg>1.矩形
<svg>
<rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/>
</svg>
// width="矩形的宽度"。必需的。
// height="矩形的高度"。必需的。
// x="矩形的左上角的x轴"
// y="矩形的左上角的y轴"
// rx="x轴的半径（round元素）"
// ry="y轴的半径（round元素）"
// + 显现属性:Color, FillStroke, Graphics2.圆形
<svg>
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>
// cx="圆的x轴坐标"
// cy="圆的y轴坐标"
// r="圆的半径". 必需.
// + 显现属性：颜色，FillStroke，图形3.椭圆
<svg>
<ellipse cx="300" cy="80" rx="100" ry="50"
style="fill:yellow;stroke:purple;stroke-width:2"/>
</svg>
// cx="椭圆x轴坐标"
// cy="椭圆y轴坐标"
// rx="沿x轴椭圆形的半径"。必需。
// ry="沿y轴长椭圆形的半径"。必需。
// + 显现属性：颜色，FillStroke，图形4.直线
<svg>
<line x1="0" y1="0" x2="200" y2="200"
style="stroke:rgb(255,0,0);stroke-width:2"/>
</svg>
// x1="直线起始点x坐标"
// y1="直线起始点y坐标"
// x2="直线终点x坐标"
// y2="直线终点y坐标"
// + 显现属性:Color, FillStroke, Graphics, Markers5.多边形
<svg>
<polygon points="200,10 250,190 160,210"
style="fill:lime;stroke:purple;stroke-width:1"/>
</svg>
// points="多边形的点。点的总数必须是偶数"。必需的。
// fill-rule="FillStroke演示属性的部分"
// + 显现属性:Color, FillStroke, Graphics, Markers6.多段线
<svg>
<polyline points="20,20 40,25 60,40 80,120 120,140 200,180"
style="fill:none;stroke:black;stroke-width:3" />
</svg>
// points=折线上的"点"。必需的。
// + 显现属性:Color, FillStroke, Graphics, Markers7.路径
<svg>
<path d="M150 0 L75 200 L225 200 Z" />
</svg>
// d="定义路径指令"
// pathLength="如果存在，路径将进行缩放，以便计算各点相当于此值的路径长度"
// transform="转换列表"
// + 显现属性:Color, FillStroke, Graphics, Markers8.文本
<svg>
<text x="0" y="15" fill="red">这是文本</text>
</svg>
// x="列表的X -轴的位置。在文本中在第n个字符的位置在第n个x轴。如果后面存在额外的字符，耗尽他们最后一个字符之后放置的位置。 0是默认"
// y="列表的Y轴位置。（参考x）0是默认"
// dx="在字符的长度列表中移动相对最后绘制标志符号的绝对位置。（参考x）"
// dy="在字符的长度列表中移动相对最后绘制标志符号的绝对位置。（参考x）"
// rotate="一个旋转的列表。第n个旋转是第n个字符。附加字符没有给出最后的旋转值"
// textLength="SVG查看器将尝试显示文本之间的间距/或字形调整的文本目标长度。（默认：正常文本的长度）"
// lengthAdjust="告诉查看器，如果指定长度就尝试进行调整用以呈现文本。这两个值是'spacing'和'spacingAndGlyphs'"
// + 显现属性:Color, FillStroke, Graphics, FontSpecification, TextContentElements主要分滤镜和渐变效果。
<defs> 和 <filter>
所有互联网的SVG滤镜定义在<defs>元素中。<defs>元素定义短并含有特殊元素（如滤镜）定义。<filter>标签用来定义SVG滤镜。<filter>标签使用必需的id属性来定义向图形应用哪个滤镜。
1.滤镜可以做一些模糊的效果和阴影，效果有很多，也可以自己尝试地做一做。
比如做个简单的边缘模糊效果。
<svg>
<defs>
<filter id="f1" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="15" /> //<feGaussianBlur> 元素是用于创建模糊效果
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3" fill="green" filter="url(#f1)" />
</svg>2.渐变有线性渐变，放射性渐变,下面是个线性渐变的例子。
<svg>
<defs>
<linearGradient id="grad1" 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>
<rect width="200" height="90" fill="url(#grad1)" />
</svg>
// 把上面的
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
......
</linearGradient>
// 替换成
<radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:0" />
<stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
</radialGradient>
// 变成放射性渐变众多示例：https://www.runoob.com/svg/svg-examples.html
SVG 是一种使用 XML 描述 2D 图形的语言。 SVG DOM 中的每个元素都是可用的。它的绘制不依赖分辨率,可以为某个元素附加 JavaScript 事件处理器，不过事件添加过多会影响渲染速度。如果 SVG 对象的属性发生变化，浏览器能够自动重现图形。最适合带有大型渲染区域的应用程序（比如谷歌地图）。
Canvas 通过 JavaScript 来绘制 2D 图形。它的绘制是依赖分辨率的，不能单独为其中元素添加事件。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。能够以 .png 或 .jpg 格式保存结果图像。最适合图像密集型的游戏，其中的许多对象会被频繁重绘
点赞 + 关注 + 收藏 = 学会了
技术一直在演变，在网页中使用 SVG 的方法也层出不穷。每个时期都有对应的最优解。
所以我打算把我知道的 7种 SVG 的使用方法列举出来，有备无患~
如果你还知道其他方法，可以在评论区补充~
<?xml version="1.0" ?>
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<title>雷猴</title>
<circle cx="50" cy="50" r="50" fill="hotpink"></circle>
</svg>
xml 是浏览器能读取的格式，但如果希望 svg 能在浏览器中渲染出来，需要使用 xmlns 声明渲染规则。
所以必须使用 xmlns="http://www.w3.org/2000/svg"。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>svg demo</title>
</head>
<body>
<div>
<!-- 内嵌到 HTML 中 -->
<svg width="100%" height="100%" version="1.1">
<circle cx="50" cy="50" r="50" fill="hotpink"></circle>
</svg>
</div>
</body>
</html>
可以看到上面的代码中，<svg> 标签并没有使用 xmlns="http://www.w3.org/2000/svg" 声明命名空间，这是因为 HTML 5 文档使用 <!DOCTYPE html> 标记，它允许跳过 SVG 命名空间声明，HTML 解析器会自动识别 SVG 元素和它的子元素，除了 <foreignObject> 元素的子元素。
在写本文时，将 SVG 内嵌到 HTML 中 的做法是最常见的，也是比较推荐的方式之一。
做特效时，这种使用方式也是比较轻松的。
<style>
.svg_bg_img {
width: 100px;
height: 100px;
background: url('./case1.svg') no-repeat;
background-size: 100px 100px;
}
</style>
<div class="svg_bg_img"></div>
SVG 也是一种图片格式，所以按理说是能当做背景图来使用的。
一试，果然可以~
<img src="./case1.svg" width="100" height="100">
既然 SVG 可以在 CSS 中当背景图使用，那也可以在 <img> 标签里使用咯~
<iframe
src="./case1.svg"
width="100"
height="100"
></iframe>
iframe 可以在网页里再嵌套一个网页，既然 SVG 可以直接在浏览器打开，那使用 <iframe> 引用 SVG 同样也是可以的。
需要注意的是，<iframe> 默认是有个边框样式的，如果你使用这种方式引入 SVG 可能还需要自己手动调节一下样式。
<embed
src="./case1.svg"
width="100"
height="100"
/>
<embed> 标签定义了一个容器，用来嵌入外部应用或者互动程序。它也可以插入各种媒体资源。
<embed> 标签已经被标准采用了。但它不能包含任何子内容，因此如果嵌入失败就没有备用选项了。所以现阶段来看，我不太推荐使用 embed 的方式引入 SVG 。
<object
data="./case1.svg"
type="image/svg+xml"
codebase="http://www.adobe.com/svg/viewer/install"
></object>
<object> 是通过 data 属性引入资源的。它可以用于嵌入图像，类似 <img> ，也可以用于嵌入独立的 HTML 文档，类似 <iframe> 。
使用 <object> 嵌入 SVG 可以让那些不能直接显示 SVG 但又有 SVG 插件的老旧浏览器展示 SVG。
需要注意的是，在某些现代浏览器中，type 和 codebase 是可以不写的。
type 用来声明当前引入的资源是属于什么类型。
在写本时，我推荐使用 内嵌到 HTML 的方式来做日常开发。
其他方式按照你实际需求去使用即可。
最后的 embed 和 object 这两种方式可以当做备用方案去使用。
⭐雷猴 SVG
《Canvas 从入门到劝朋友放弃（图解版）》
《Fabric.js 从入门到膨胀》
《『Three.js』起飞！》
《console.log也能插图！！！》
《纯css实现117个Loading效果》
《视差特效的原理和实现方法》
《这18个网站能让你的页面背景炫酷起来》
*请认真填写需求信息，我们会在24小时内与您取得联系。
