Vite笔记之15-vite处理svg资源

1. Vite 中处理 SVG 资源

Vite 作为现代前端构建工具，对 SVG 资源的处理提供了开箱即用的支持。SVG（Scalable Vector Graphics）是一种基于 XML 的矢量图形格式，因其可伸缩性、不失真性和文件尺寸相对较小等特点，在前端开发中广泛应用于图标、图表等场景。

SVG 的优势：

• 不失真：无论放大或缩小，图形质量均保持不变。
• 尺寸小：相比位图格式（如 JPG、PNG），SVG 文件通常具有更小的体积。
• 交互性：支持 CSS 和 JavaScript 的应用，可以实现丰富的交互效果。

SVG 的局限性：

• 表现层次丰富的图片信息：对于复杂场景或高保真度的图片，SVG 可能不是最佳选择。

2. 读取 SVG 的方式

在 Vite 项目中，可以通过几种不同的方式来加载和使用 SVG 资源。以下是两种常见的方法：

方法一：使用 ?url加载 SVG

// 引入 SVG 文件的 URL  
import svgIconUrl from './assets/svgs/fullScreen.svg?url';  

// 创建一个 img 元素并设置其 src 属性为 SVG 的 URL  
const img = document.createElement('img');  
img.src = svgIconUrl;  

// 将 img 元素添加到文档的 body 中  
document.body.appendChild(img);

这种方法适用于将 SVG 作为图像资源嵌入到 HTML 文档中，但不支持直接通过 CSS 或 JavaScript 修改 SVG 内部元素的样式或属性。

方法二：使用?raw加载svg

Vite 支持通过查询字符串 ?raw 来导入 SVG 的原始内容，这允许你将其作为字符串或 React 组件（如果你在使用 React 插件）来使用。

// 第二种加载svg的方式
import svgIcon from "./assets/svgs/fullScreen.svg?url";
import svgRaw from "./assets/svgs/fullScreen.svg?raw";

console.log("svgIcon", svgIcon, svgRaw);

document.body.innerHTML = svgRaw;

const svgElement = document.getElementsByTagName("svg")[0];

svgElement.onmouseenter = function() {
    // 不是去改他的background 也不是color
    // 而是fill属性
    this.style.fill = "red";
}

注意：直接使用 innerHTML 可能会导致 XSS 攻击，特别是在处理不可信的 SVG 内容时。在实际应用中，应当谨慎使用，并确保 SVG 内容是安全的。

此外，如果你在使用 React 或 Vue 等现代前端框架，通常会有更优雅的方式来引入和使用 SVG，例如通过组件化的方式。这些框架的插件或构建工具通常会提供额外的支持来简化 SVG 的处理。