矢量图形图标SVG及在网站和APP中的使用 / 网络研习社#95

最近在使用AI做前端页面时发现有图标是这样的：

<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
    <path d="M3 4C3 3.44772 3.44772 3 4 3H7..." fill="currentColor"/>
   ...
</svg>

图标竟然还可以这样表示？这不由引些了我的注意。图标我一般是用coreldraw设计后导出 .svg 格式，然后在网页中直接引用。只是没想到，还可以直接使用html语法的。赶紧查下资料。

SVG，可缩放矢量图形（Scalable Vector Graphics），是一种用于描述二维图形的 XML 标记语言。与位图图像不同，SVG 图像以文本形式存储，并且可以缩放到任意大小而不会失真，因为它们基于数学描述而不是像素。

SVG的优势

• 可缩放性：SVG 图像可以无损地缩放到任意大小而不失真。这是因为 SVG 是基于矢量描述的，而不是像素图像，因此在不同分辨率和尺寸的屏幕上都能保持清晰。
• 文本性质：SVG 文件是基于XML的文本文件，易于编辑和维护。你可以直接编辑 SVG 文件来调整图形，也可以使用文本编辑器或代码编辑器来创建和修改 SVG 图像。
• 交互性：SVG 允许添加交互式元素，如链接、动画和事件处理器。这使得 SVG 图像可以与用户进行交互，从而创建更丰富的用户体验。
• 动画支持：SVG 支持使用 CSS 和 JavaScript 创建动画，使图形更生动。你可以通过 CSS 动画或 JavaScript 脚本来实现 SVG 图形的动态效果，如过渡、旋转、缩放等。
• 可嵌入性：SVG 图像可以直接嵌入到 HTML 文档中，也可以作为外部文件链接到 HTML 文档中。这使得 SVG 图像可以与其他Web技术无缝集成，如 CSS、JavaScript 等。

基本语法

一个或多个 SVG 元素组成，它们定义了图形的内容和属性。

<svg
  width="200"     
  height="200"    
</svg>


<svg width="200" height="200">
  <circle cx="100" cy="100" r="80" fill="blue" />
</svg>

 
<rect>：绘制矩形
<circle>：绘制圆形
<ellipse>：绘制椭圆
<line>：绘制直线
<polyline>：绘制折线
<polygon>：绘制多边形
<path>：绘制路径


<rect x="50" y="50" width="100" height="50" rx="10" ry="10" fill="blue" />

到了这步就基本差不多了。了解了基本特点和语法，其它的就交给AI吧。Gemini3和V0都是前端和APP设计的“好手”，就等着你来开发了。