svg怎么使用呢,svg-简介和使用

svg怎么使用，最近不少朋友在找svg-简介和使用的相关介绍，兔宝宝游戏网给大家详细的介绍一下，希望对大家有帮助。

1、svg怎么使用呢：

svg全称是Scalable Vector Graphics (SVG)，是一种基于XML的标记语言，用于描述基于二维的[矢量图形]。因此，这是一个基于文本的开放式Web标准，用于描述可以清晰地呈现任意大小的图像，并且专门设计用于与其他Web标准（包括CSS， DOM，JavaScript和SMIL配合使用。实际上，SVG就是图形。

SVG图像和它的相关行为在XML文本文件中定义，这意味着可以搜索，索引，编写脚本和压缩它们。此外，这意味着可以使用任何文本编辑器或绘图软件来创建和编辑它们。

与经典的位图图像格式JPEG或PNG相比，SVG格式的矢量图像可以以任何大小进行渲染而不会降低质量，并且可以通过更新其中的文本轻松地进行本地化，而无需图形编辑器这样做。使用适当的库，甚至可以即时本地化SVG文件。

一个简单的svg例子。

svg有svg标签和它内部的元素组成，它支持css样式。

2、svg 介绍：

svg 是『矢量图』，相比于『位图』，矢量图的特点是不会随着图片放大而失真，能做到这一点，主要是由于矢量图存储的内容是对『图形的描述』
svg 适合描述一些简单的图形

下面来画第一个图形

svg 可以当做普通的 HTML 标签放在页面中，svg 标签的作用有点像 canvas，充当绘制图形的画布。如果绘制的图形超出了画图，则会被截断。
svg 提供一些标签来表达常用的基本图形，如 ，分别对应圆、矩形、椭圆、线段、多边形、多段线、路径。
表达图形的具体属性不作介绍，请自行查阅资料。
有些属性可以放在CSS中：

有些则只能写在标签里，如下：

path 是一个更强大的 API，可以画出上面几种基本图形，还可以画出表现力更强的曲线。上面的几个标签的优势是使用方便。

有一些东西没有提到，比如 transform 变换：包括旋转、平移、缩放等，你可以自行去了解。
上文中的示例： 链接

SVG教程 | MDN
SVG 教程 | 菜鸟教程

总结：以上内容就是针对svg怎么使用呢,svg-简介和使用的详细介绍，大家可以参考一下。