SVG简介

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/chaoyangsun/article/details/70336507

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>。

展开阅读全文

没有更多推荐了,返回首页