SVG是HTML5中基于XML的矢量图形标准,可无损缩放,适用于图标、图表等场景。1. 三种嵌入方式:直接书写SVG标签、img引入外部文件、CSS背景图;其中直接书写最灵活。2. 基本图形包括rect(矩形)、circle(圆形)、ellipse(椭圆)、line(直线)、polygon(多边形)和path(路径),通过属性定义形状与样式。3. 支持CSS样式控制fill、stroke、opacity等,并可通过JavaScript实现交互效果。4. 实际应用如绘制房子,组合多个图形构建复杂图像。SVG优势在于清晰度不受分辨率影响,适合响应式设计,结合CSS和JS可实现动画与交互,但需注意坐标系原点在左上角,精确计算位置。

SVG(Scalable Vector Graphics)是HTML5中用于绘制矢量图形的一种标准,它基于XML语法,可以直接嵌入HTML页面中。使用SVG可以创建清晰、可缩放的图形,适用于图标、图表、动画等场景。
1. 在HTML中嵌入SVG的方法
有三种常见方式将SVG集成到网页中:
- 直接在HTML中书写SVG标签:将SVG代码写在svg>标签内,浏览器会直接渲染。
-
作为外部文件引入:使用img标签引用.svg文件,如:
。
- 通过CSS背景图引入:将SVG用作元素的background-image,适合图标类应用。
最灵活的方式是直接在HTML中编写SVG代码,便于操作和动态修改。
2. 常用SVG基本图形绘制
SVG提供多种基础图形标签,以下是一些常用示例:
立即学习“前端免费学习笔记(深入)”;
上面代码绘制一个蓝色填充、黑色边框的矩形。
cx和cy定义圆心坐标,r为半径。
points属性定义多个坐标点,自动闭合路径。
d属性包含绘图指令:M(移动)、L(连线)、Z(闭合)。支持贝塞尔曲线,适合复杂图形。
3. 样式与交互设置
SVG元素支持CSS样式,可通过属性或CSS类控制外观。
- fill:填充颜色
- stroke:描边颜色
- stroke-width:描边宽度
- opacity:透明度
也可以添加JavaScript事件,实现交互效果:
点击后圆形变为黄色。
4. 实际应用示例:绘制一个简单房子
组合多个图形,构建更复杂的视觉效果。
基本上就这些。掌握基础标签和属性后,就能灵活绘制各种矢量图形。SVG优势在于无损缩放,适合响应式设计,结合CSS和JavaScript还能实现丰富动画和交互。不复杂但容易忽略细节,比如坐标系原点在左上角,绘图时注意位置计算。











