本文介绍了SVG（Scalable Vector Graphics）的基本概念，强调其作为矢量图像格式的缩放不失真的特性。内容涵盖了SVG的XML定义、浏览器兼容性、在HTML中的使用方式，以及SVG的viewBox属性、矩形、圆角矩形、圆形、椭圆、线条和虚线箭头的绘制方法。通过学习，读者将能够掌握SVG的基础知识并进行基本的SVG图形绘制。
svg
svg（Scalable Vector Graphics）是一种图像文件格式，是可缩放的矢量图像。
svg是用XML定义的语言，用来描述二维矢量及矢量/栅格图像。
不同于常规的jpg格式图像文件，缩放不会影响图像质量，不会失真模糊。并且可以直接用svg代码来描述图像，可以使用任何文字处理工具打开svg图像文件，随时可以插入到HTML中通过浏览器打开，通过代码编辑使svg图像具有交互功能。
早期浏览器不支持svg，需通脱< object >元素。
除了通过直接嵌入在html中，svg也可以当做.svg后缀文件作为普通图片通过标签引入至网页中，通过< img >、< object >元素展示svg图像的时候，svg就变成了另外一种图片格式，对于JavaScript开发来说不甚友好，更好的方式是直接将svg图片的代码嵌入到html文档中。
svg标签：
| svg元素标签 | 作用 |
|---|---|
| a | 定义超链接 |
| animate | 动画元素放在形状元素的内部，用来定义一个元素的某个属性如何踩着时点改变。在指定持续时间里，属性从开始值变成结束值。 |
| animateMotion | 元素定义了一个元素如何沿着运动路径进行移动 |
| animateTransform | 元素变动了目标元素上的一个变形属性，从而允许动画控制转换、缩放、旋转或斜切。 |
| circle | 是一个SVG的基本形状，用来创建圆,基于一个圆心和一个半径 |
| clipPath | 定义一条剪切路径，可作为其他元素的 clip-path 属性的值。剪切路径限制了图形的可见范围。从概念上来说，如果图形超出了当前剪切路径所包围的区域，那么超出部分将不会绘制 |
| color-profile | 该元素允许描述用于图像的颜色配置文件 |
| defs | 允许我们定义以后需要重复使用的图形元素。 建议把所有需要再次使用的引用元素定义在defs元素里面。这样做可以增加SVG内容的易读性和可访问性。 在defs元素中定义的图形元素不会直接呈现 |
| desc | SVG绘画中的每个容器元素或图形元素都可以提供一个desc描述性字符串，这些描述只是纯文本的。如果当前的SVG文档片段在视媒体中呈现，desc元素不会呈现为图形的一部分。替代性提词既可以看到也可以听到，它显示了desc元素但是不会显示路径元素或者别的图形元素。desc元素提升了SVG文档的可访问性 |
| discard | |
| ellipse | ellipse元素是一个SVG基本形状，用来创建一个椭圆，基于一个中心坐标以及它们的x半径和y半径 |
| feBlend | feBlend滤镜把两个对象组合在一起，使它们受特定的混合模式控制。这类似于图像编辑软件中混合两个图层。该模式由属性mode定义 |
| feColorMatrix | 该滤镜基于转换矩阵对颜色进行变换。每一像素的颜色值(一个表示为[红,绿,蓝,透明度] 的矢量) 都经过矩阵乘法 (matrix multiplated) 计算出的新颜色 |
| feComponentTransfer | 滤镜基元对每个像素执行颜色分量的数据重映射.它允许进行像亮度调整,对比度调整,色彩平衡或阈值的操作 |
| feComposite | 该滤镜执行两个输入图像的智能像素组合，在图像空间中使用以下Porter-Duff合成操作之一：over、in、atop、xor |
| feConvolveMatrix | 元素应用了一个矩阵卷积滤镜效果 |
| feDiffuseLighting | 滤镜光照一个图像，使用alpha通道作为隆起映射 |
| feDisplacementMap | 映射置换滤镜，该滤镜用来自图像中从in2到空间的像素值置换图像从in到空间的像素值 |
| feDistantLight | 该滤镜定义了一个距离光源，可以用在灯光滤镜feDiffuseLighting元素或feSpecularLighting元素的内部 |
| feDropShadow | |
| feFlood | 该滤镜用flood-color元素定义的颜色和flood-opacity元素定义的不透明度填充了滤镜子区域 |
| feFuncA | 滤镜，为它的父元素 feComponentTransfer 的输入图形的透明度（alpha）组件定义了变换函数 |
| feFuncB | 滤镜，为它的父feComponentTransfer元素的输入图形的蓝色成分定义了变换函数 |
| feFuncG | 滤镜，为它的父feComponentTransfer元素的输入图形的绿色成分定义了变换函数 |
| feFuncR | 滤镜，为它的父feComponentTransfer元素的输入图形的红色成分定义了变换函数 |
| feGaussianBlur | 滤镜对输入图像进行高斯模糊，属性stdDeviation中指定的数量定义了钟形 |
| feImage | 滤镜从外部来源取得图像数据，并提供像素数据作为输出（意味着如果外部来源是一个SVG图像，这个图像将被栅格化。） |
| feMerge | 滤镜允许同时应用滤镜效果而不是按顺序应用滤镜效果 |
| feMergeNode | 拿另一个滤镜的结果，让它的父feMerge元素处理 |
| feMorphology | 该滤镜用来侵蚀或扩张输入的图像。它在增肥或瘦身效果方面特别有用 |
| feOffset | 该输入图像作为一个整体，在属性dx和属性dy的值指定了它的偏移量 |
| fePointLight | 光源元素 |
| feSpecularLighting | 该滤镜照亮一个源图形，使用alpha通道作为隆起映射 |
| feSpotLight | 是一种光源元素，用于SVG文件 |
| feTile | 输入图像是平铺的，结果用来填充目标。它的效果近似于一个pattern图案对象 |
| feTurbulence | 该滤镜利用Perlin噪声函数创建了一个图像 |
| filter | 作用是作为原子滤镜操作的容器。它不能直接呈现。可以利用目标SVG元素上的filter属性引用一个滤镜 |
| foreignObject | |
| g | 元素g是用来组合对象的容器。添加到g元素上的变换会应用到其所有的子元素上。添加到g元素的属性会被其所有的子元素继承。此外，g元素也可以用来定义复杂的对象，之后可以通过use元素来引用它们 |
| hatch | |
| hatchpath | |
| image | 表现为图像文件或者其他SVG文件。svg图像格式转换软件支持JPEG、PNG格式，是否支持动图GIF不明确 |
| line | 是一个SVG基本形状，用来创建一条连接两个点的线 |
| linearGradient | 用来定义线性渐变，用于图形元素的填充或描边 |
| marker | 定义了在特定的path元素、line元素、polyline元素或者polygon元素上绘制的箭头或者多边标记图形 |
| mask | 用于定义这样的遮罩元素 |
| mesh | |
| meshgradient | |
| meshpatch | |
| meshrow | |
| metadata | 数据的结构化数据。SVG内容里面包含的元数据必须放在metadata元素里面 |
| mpath | 元素的mpath子元素使animateMotion 元素能够引用一个外部的path元素作为运动路径的定义 |
| path | 是用来定义形状的通用元素。所有的基本形状都可以用path元素来创建 |
| pattern | 使用预定义的图形对一个对象进行填充或描边，就要用到pattern元素 |
| polygon | 定义了一个由一组首尾相连的直线线段构成的闭合多边形形状。最后一点连接到第一点 |
| polyline | 是SVG的一个基本形状，用来创建一系列直线连 |
最低0.47元/天 解锁文章
扫一扫
606
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
