**SVG**（Scalable Vector Graphics，可缩放矢量图形）是一种用来描述**二维矢量图形**的**XML标记语言**。 --- ## 🌱 SVG 的核心特点 1. **矢量图形**： - 与JPEG、PNG等位图格式不同，SVG使用点、线、多边形、路径等几何图形来描述图像，不会随缩放而失真。 2. **可缩放性**： - 无论放大或缩小多少倍，图像的质量都不会降低，适合响应式设计。 3. **XML格式**： - SVG是纯文本的XML文件，易于编写和修改，也便于搜索引擎优化（SEO）。 4. **可交互性**： - 支持JavaScript与CSS，可实现动画和交互效果。 --- ## 📌 简单示例 以下是一个基本的SVG图形示例： ```xml <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <circle cx="100" cy="100" r="80" fill="skyblue" stroke="blue" stroke-width="5"/> <text x="100" y="115" font-size="25" text-anchor="middle" fill="navy">SVG</text> </svg> ``` 效果： - 一个圆圈，蓝色边框，浅蓝色填充，中间标记文字 "SVG"。 --- ## 🚩 SVG 常用场景 - 网站LOGO、图标、矢量插图； - 动态图表、数据可视化； - 动画与交互图形； - 响应式界面设计（可适应不同屏幕大小）。 --- ## 📖 SVG常用元素说明 |元素|说明| |---|---| |`<svg>`|SVG画布容器| |`<rect>`|矩形| |`<circle>`|圆形| |`<ellipse>`|椭圆| |`<line>`|直线| |`<polyline>`|折线（多段连续线）| |`<polygon>`|多边形（闭合）| |`<path>`|任意复杂路径图形| |`<text>`|文本| |`<g>`|组合元素（分组）| --- ## 🚧 SVG 优缺点总结 |优点 🌟|缺点 ⚠️| |---|---| |缩放不失真|不适合表现复杂的照片、真实图像| |文件尺寸较小|对于极端复杂图形性能会降低| |易于维护、修改和生成|浏览器支持早期略有差异| |支持CSS与JS交互、动画|不适用于3D图形| --- ## 🚀 总结 **SVG** 是一种以XML为基础的图形描述语言，特别适合用来创建高质量、灵活且响应式的图形与界面，是现代前端开发者必备的一项技能。