SVG使用

SVG（Scalable Vector Graphics）是一种用于描述二维矢量图形的 XML 标记语言。它在前端开发中被广泛应用，因为它具有很多优点，比如图像质量不受分辨率影响、文件大小较小以及可交互性等。

SVG简介

SVG 是基于 XML 的，这意味着它的语法结构清晰，易于阅读和编写。与位图图像（如 JPEG 和 PNG）不同，SVG 图形是由数学公式定义的，因此无论如何缩放，都不会出现失真的情况。这使得 SVG 在响应式设计和高分辨率屏幕的应用中非常理想。

SVG基本标签

基本形状

• <rect> - 矩形
• <circle> - 圆形
• <ellipse> - 椭圆
• <line> - 直线
• <polyline> - 折线
• <polygon> - 多边形

路径和文本

• <path> - 复杂路径
• <text> - 文本

定义和复用

• <svg>定义矢量图形容器和画布,绘制区域与坐标
• <defs> - 定义可复用元素
• <g> - 分组
• <use> - 复用元素
• <symbol> - 定义可复用的图形模板,本身不会直接显示，需要通过 <use> 来引用。

渐变和图案

• <linearGradient> - 线性渐变
• <radialGradient> - 径向渐变
• <pattern> - 图案

高级功能

• <clipPath> - 剪切路径
• <mask> - 蒙版
• <filter> - 滤镜效果

动画

• <animate> - 基础动画
• <animateTransform> - 变换动画

SVG图片如何使用

我们一般的图片格式为jpg,png,jif, 那么svg格式的图片如何使用呢,

<img> 标签使用 SVG

正常引入就可以,  但是我发现只要在脚手架中配置svg的规则图片就会不显示,  不知道是没有配置好还是其他原因,  

<img src="@/assets/icons/svg/bug.svg" alt="icon" width="24" height="24" />

背景图片

当然背景图片也是可以使用的

  background-image: url("@/assets/icons/svg/bug.svg");

<svg>
  <path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/>
</svg>