踏入SVG，让前端变得优美！一起学习吧

学习SVG的用处

• 做数据可视化
• iconfont
• 图表视图(echart)、地图视图(WEB-GIS)
• 形象(AI)的全网应用
• UI 产品的设计
• SVG 动画

介绍

SVG（Scalable Vector Graphics）是一种基于XML的标记语言，用于描述二维矢量图形，它可以在Web浏览器中进行展示。

SVG优点是：可伸缩、分辨率无损失，不管是电脑还是手机屏幕上都能够清晰地显示，支持互动和动画等特效；

缺点是：不支持复杂的渲染效果，如模糊、阴影和透明度，文件大小比位图格式相对较大，开发者需要掌握一定的SVG绘图基础知识。

SVG可以在任何地方编写哦~

SVG 与 Canvas 区别

不同形状元素

基本通用的属性

• fill：定义矩形的填充颜色
• stroke-width：定义边框宽度
• stroke：定义矩形边框的颜色
• fill-opacity：定义填充颜色的不透明度（0-1取值范围）
• stroke-opacity：定义描边颜色的不透明度（0-1取值范围）
• opacity：整个元素的不透明度

矩形 rect

基础案例

//案例矩形
<svg width="100" height="100">
    <rect width="100" height="100" fill="red" stroke-width="2" stroke="#ccc"></rect>
</svg>

标签的属性

• width：定义矩形的宽度
• height：定义矩形的高度
• fill：定义矩形的填充颜色
• stroke-width：定义矩形的边框宽度
• stroke：定义矩形边框的颜色
• x：定义矩形左边位置
• y：定义矩形顶部位置
• fill-opacity：定义填充颜色的不透明度（0-1取值范围）
• stroke-opacity：定义描边颜色的不透明度（0-1取值范围）
• opacity：整个元素的不透明度
• rx：定义圆角X轴方向的半径长度
• ry：定义圆角y轴方向的半径长度

圆形 circle

基础案例

 //案例圆形
 <svg width="100" height="100" >
        <circle cx="50" cy="50" r="40" stroke-width="3" stroke="#000" fill-opacity="0"></circle>
   </svg>

标签的属性

• cx：定义椭圆中心的X坐标
• cy：定义椭圆中心的y坐标
• rx：定义椭圆的水平半径
• ry：定义椭圆的垂直半径

椭圆 ellipse

基础案例

<svg width="500" height="140" >
        <ellipse cx="200" cy="80" rx="80" ry="20" stroke-width="3" stroke="#000" fill-opacity="0" />
</svg>

椭圆xy是不同，这样可以形成椭圆

标签的属性

• cx：定义椭圆中心的X坐标
• cy：定义椭圆中心的y坐标
• rx：定义椭圆的水平半径
• ry：定义椭圆的垂直半径

线条 line

基础案例

//线条的案例
<svg width="500" height="210">
        <line x1="0" y1="0" x2="200" y2="200" stroke-width="3" stroke="#000"></line>
 </svg>

标签的属性

• x1：定义x轴上直线的起点坐标
• y1：定义y轴上直线的起点坐标
• x2：定义x轴上直线的末端坐标
• y2：定义y轴上直线的末端坐标

多线条 polyline

多边形 polygon

路径 path

SVG各个小案例

注意事项

我们可以在html文件中去编写我们的SVG标签，方便我们进行练习，可以在浏览器更加直观的去看到我们所写的效果，并且可以编写多个SVG

当要使用我们所写的SVG时

如果要使用我们所写的SVG，可以创建SVG文件
在文件中头部添加

<?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标签上添加

//注意哦！在SVG文件编写并使用的时候，尽量不要去添加它的宽高
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    //里面编写不同形状元素
</svg>

1.通过矩形和圆形制作添加图案

效果

代码

<?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 width="100" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <circle cx="50" cy="50" r="40" stroke-width="3" stroke="#000" fill-opacity="0"></circle>
    <rect width="60" height="5" fill="#000" x="20" y="46" rx="3" ry="3"></rect>
    <rect width="5" height="60" fill="#000" x="47" y="20" rx="3" ry="3"></rect>
</svg>

因为个人时间，今天的分享和学习只到这里。如果大家想了解更多的内容的话，我会陆续更新该文章，后续也会分享自己做出的SVG动画，项目中的SVG。该文章是未完成版哦！