什么是 SVG？
SVG（Scalable Vector Graphics）是一种用于描述二维矢量图形的XML标准。它基于文本来描述形状、线条、颜色、和路径，因此它具备非常高的缩放性，不会像传统的位图图像（如 PNG、JPEG）在放大时产生模糊或失真。
SVG 和 PNG 的区别：
图像类型：
- SVG：是一种基于矢量的图像格式，适合表示几何图形（如图标、标志、插图等），无论放大或缩小，图像质量都不会下降。
- PNG：是一种基于位图的图像格式，适合用于呈现照片或复杂图像。放大时会失去细节，出现像素化问题。
文件大小：
- SVG：文本文件，通常文件较小，尤其在绘制简单图形时文件大小很小。
- PNG：保存的是像素的颜色信息，文件较大，特别是当图像分辨率较高时。
编辑性：
- SVG：可以使用文本编辑器修改图形元素，比如颜色、形状等属性，非常灵活。
- PNG：只能使用图像编辑软件处理，无法直接通过文本编辑器修改。
交互性：
- SVG：支持动画、交互（如点击事件），且可嵌入HTML中，与JavaScript结合实现动态效果。
- PNG：是静态图像，不支持交互和动态功能。
适用场景：
- SVG：适合用于图标、简单插图、图表、标志等可缩放场景。
- PNG：适合用于展示复杂图片、照片、背景等高保真场景。
SVG 的语法定义
SVG 使用 XML 语法定义图形，包含形状元素如 <circle>, <rect>, <line> 以及路径元素 <path> 来表示复杂的形状。你可以通过定义它们的属性（如 width, height, fill, stroke 等）来控制图形的外观。
简单的 SVG 示例
下面是一个简单的 SVG 示例，它绘制了一个蓝色的圆形和一个红色的矩形：
xml<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
<!-- 绘制一个蓝色的圆 -->
<circle cx="100" cy="100" r="50" fill="blue" />
<!-- 绘制一个红色的矩形 -->
<rect x="50" y="50" width="100" height="100" fill="red" />
</svg>
在这个例子中：
<circle>元素创建了一个中心在 (100, 100)，半径为 50 像素的蓝色圆形。<rect>元素创建了一个起始位置在 (50, 50)，宽度和高度为 100 像素的红色矩形。
SVG的优势
- 可缩放性：在各种分辨率设备下图像清晰。
- 易编辑性：直接修改 XML 文件的内容来改变图形。
- 可交互性：可以通过 CSS 和 JavaScript 添加交互效果和动画。
SVG 因为其轻量、高扩展性和可交互性，非常适合用于图标、图表、插画和Web设计中。
--------------------------------
基本图形有 6 种，包括：矩形、圆形、椭圆形、线条、多边形和多线段路径。
1. 矩形（<rect>）
矩形用于绘制四边形，可以通过指定宽度、高度和位置来定义。
主要属性：
x和y：矩形左上角的坐标。width：矩形的宽度。height：矩形的高度。rx和ry：圆角半径，用于定义矩形的圆角效果。fill：填充颜色。stroke：边框颜色。stroke-width：边框宽度。
示例：
xml<rect x="50" y="50" width="100" height="100" fill="red" stroke="black" stroke-width="3" />
2. 圆形（<circle>）
圆形通过指定中心点和半径来绘制。
主要属性：
cx和cy：圆心的坐标。r：圆的半径。fill：填充颜色。stroke：边框颜色。stroke-width：边框宽度。
示例：
xml<circle cx="100" cy="100" r="50" fill="blue" />
3. 椭圆形（<ellipse>）
椭圆形与圆形类似，但可以通过不同的水平和垂直半径定义。
主要属性：
cx和cy：椭圆中心的坐标。rx：水平半径。ry：垂直半径。fill：填充颜色。stroke：边框颜色。stroke-width：边框宽度。
示例：
xml<ellipse cx="100" cy="100" rx="75" ry="50" fill="green" />
4. 线条（<line>）
线条用于绘制两点之间的直线。
主要属性：
x1和y1：起始点的坐标。x2和y2：终点的坐标。stroke：线条颜色。stroke-width：线条宽度。
示例：
xml<line x1="0" y1="0" x2="200" y2="200" stroke="black" stroke-width="2" />
5. 多边形（<polygon>）
多边形通过指定多个点来绘制封闭的多边形。
主要属性：
points：顶点坐标的列表，格式为x1,y1 x2,y2 x3,y3...。fill：填充颜色。stroke：边框颜色。stroke-width：边框宽度。
示例：
xml<polygon points="50,50 150,50 100,150" fill="purple" />
6. 折线（<polyline>）
折线是由多个点组成的线段，不必封闭。
主要属性：
points：顶点坐标的列表，格式为x1,y1 x2,y2 x3,y3...。fill：通常设置为"none"，因为折线没有内部区域。stroke：线条颜色。stroke-width：线条宽度。
示例：
xml<polyline points="0,100 50,25 100,100 150,50" fill="none" stroke="blue" stroke-width="2" />
其他常用属性：
fill-opacity：控制填充颜色的透明度。stroke-opacity：控制边框的透明度。transform：应用缩放、旋转、平移等几何变换。
何时使用这些基本图形？
- 当你需要绘制简单的几何图形时，比如标志、图标、按钮等，使用这些基本图形能帮助你创建轻量且可缩放的设计。
SVG 还支持一些更复杂和高级的图形元素，用于绘制复杂的路径、文本、以及基于滤镜和渐变的效果。以下是一些 SVG 中的复杂图形和高级功能：
1. 路径（<path>）
<path>是 SVG 中最强大的图形元素之一，能够通过一系列的命令（例如M移动到，L画直线，C贝塞尔曲线等）创建复杂的形状。- 属性：
d：定义路径数据。这个属性包含一系列路径指令，例如M(move to),L(line to),C(cubic Bézier curve), 等。
<path d="M 10 10 H 90 V 90 H 10 Z" fill="none" stroke="black" />
2. 文本（<text>）
- 可以在 SVG 中绘制和控制文本显示。通过调整坐标、颜色、大小、字体等属性，可以进行灵活的文本排版。
- 属性：
x和y：文本的起始坐标。fill：文本颜色。font-family：字体。font-size：字体大小。
xml<text x="50" y="50" fill="black" font-size="24">Hello, SVG!</text>
3. 渐变和模式（<linearGradient> 和 <radialGradient>）
- 渐变可以让图形具有更复杂的填充效果，支持线性渐变和径向渐变。
- 属性：
x1,y1,x2,y2：定义渐变的起始和结束点（线性渐变）。cx,cy,r：定义渐变的中心点和半径（径向渐变）。
xml<defs> <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" /> <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" /> </linearGradient> </defs> <rect width="300" height="100" fill="url(#grad1)" />
4. 图形剪裁（<clipPath>）
- 允许使用一个图形元素来剪裁另一个元素，使其只在特定区域内显示。
- 属性：
id：定义剪裁路径的唯一标识符。
xml<defs> <clipPath id="circleClip"> <circle cx="50" cy="50" r="40" /> </clipPath> </defs> <rect x="0" y="0" width="100" height="100" clip-path="url(#circleClip)" fill="blue" />
5. 蒙版（<mask>）
类似于剪裁路径，但更灵活，可以使用灰度或颜色的透明度来决定哪些部分可见、哪些不可见。
示例：
xml<defs> <mask id="mask1"> <rect x="0" y="0" width="100" height="100" fill="white" /> <circle cx="50" cy="50" r="30" fill="black" /> </mask> </defs> <rect x="0" y="0" width="100" height="100" fill="blue" mask="url(#mask1)" />
6. 滤镜（<filter>）
- 允许应用图像处理效果，如模糊、阴影、颜色变化等。
- 属性：
id：滤镜的唯一标识符。
xml<defs> <filter id="blurFilter"> <feGaussianBlur in="SourceGraphic" stdDeviation="5" /> </filter> </defs> <circle cx="50" cy="50" r="40" fill="red" filter="url(#blurFilter)" />
7. 符号和使用（<symbol> 和 <use>）
symbol定义可重复使用的图形，可以通过use标签在不同地方引用同一个符号，减少重复代码和内存占用。示例：
xml<symbol id="icon" viewBox="0 0 100 100"> <circle cx="50" cy="50" r="40" fill="green" /> </symbol> <use href="#icon" x="0" y="0" /> <use href="#icon" x="100" y="0" />
总结：
SVG 提供了很多灵活的复杂图形元素和高级功能，可以让开发者创建非常精细的、互动的、动态的图形。它特别适合用于需要可缩放、动态可交互的图形场景，如图标、图表、插画和数据可视化。
<defs> 元素
在 SVG 中，<defs> 元素是用来定义图形资源的容器。这个标签本身不会直接显示在图像中，而是将资源（如渐变、剪裁路径、滤镜等）定义为可重用的元素，供其他 SVG 元素通过引用来使用。
主要用途：
- 资源定义：通过
defs定义的元素不会在屏幕上直接渲染，必须通过其他元素如<use>,<clipPath>,<mask>等引用，才能显示出来或应用效果。 - 可重用元素：
<symbol>、<pattern>等可以定义在defs中，允许在多个地方通过<use>标签复用图形，减少重复代码。
常见用途：
- 渐变（
<linearGradient>,<radialGradient>） - 剪裁路径（
<clipPath>） - 图形滤镜（
<filter>） - 蒙版（
<mask>） - 符号（
<symbol>）
示例：
xml
<svg width="200" height="200">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<!-- 使用定义的渐变 -->
<rect width="200" height="200" fill="url(#grad1)" />
</svg>
在这个例子中，<defs> 中定义了一个渐变，随后矩形通过 fill="url(#grad1)" 使用了这个渐变。
总结：
<defs> 是 SVG 中的重要标签，主要用于定义可重用的图形元素和效果，帮助组织和优化图形代码。
没有评论:
发表评论