SVG简介

来源：互联网发布：快普软件编辑：程序博客网时间：2024/05/21 14:56

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)。用于定义用于网络的基于矢量的图形，它使用 XML 格式定义图形，是万维网联盟的标准。

与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：

SVG 可被非常多的工具读取和修改（比如记事本）
SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下被放大
SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）
SVG 可以与 Java 技术一起运行
SVG 是开放的标准
SVG 文件是纯粹的 XML

SVG有一些预定义的形状元素：

圆形 circle
矩形 rect
椭圆 ellipse
线 line
折线 polyline
多边形 polygon
路径 path
它的一些简单的用法如下：

SVG 矩形

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">    <rect x="50" y="20" width="150" height="150"    style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;    stroke-opacity:0.9"></rect></svg>

SVG 多边形（至少三边）

 <svg xmlns="http://www.w3.org/2000/svg" version="1.1">      <polygon points="100,25 18,100 120,120 180,100"></polygon> </svg>

SVG 文本

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">     <text x="10" y="25" fill="blue">This is SVG!</text></svg>

SVG 曲线

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">  <polyline points="0,0 30,45 80,10 60,110 100,180 230,280 350,150"style="fill:red;stroke:green;stroke-width:6" ></polyline></svg>

可以直接在HTML嵌入SVG代码

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>    </head>    <body>         <svg xmlns="http://www.w3.org/2000/svg" version="1.1">            <polygon points="100,25 18,100 50,150 120,170 180,100"></polygon>        </svg>    </body></html>

SVG也可以通过以下标签嵌入 HTML 文档： <embed> 、<object>、<iframe>。

0 0