svg

svg: scalable vector graphics，可缩放的矢量图

该图片使用代码书写而成
缩放不会失真
内容轻量

怎么使用

svg 可以嵌入浏览器，也可以单独成为一个文件

xml 语言，svg 使用该语言定义

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      img,
      embed,
      object,
      iframe {
        width: 100px;
        height: 100px;
      }
      p {
        width: 100px;
        height: 100px;
        background: url("imgs/weixin.svg") no-repeat center/cover;
      }
    </style>
  </head>
  <body>
    <img src="imgs/weixin.svg" alt="" />
    <p></p>
    <embed src="imgs/weixin.svg" type="image/svg+xml" />
    <object data="imgs/weixin.svg" type="image/svg+xml"></object>
    <iframe src="imgs/weixin.svg"></iframe>
  </body>
</html>

书写 svg 代码

xml 必须由 svg 标签包裹

矩形:rect

xml

<svg style="background:#ccc;" width="500" height="1000" xmlns="http://www.w3.org/2000/svg">
    <rect width="100" height="100" x="100" y="100" fill="red" stroke="#000" stroke-width="5" />
</svg>

圆形：circle

xml

 <circle cx="200" cy="400" r="50" fill="transparent" stroke="#000" stroke-width="5"/>

椭圆：ellipse

xml

    <ellipse rx="80" ry="30" cx="200" cy="500" fill="red" stroke="#000" stroke-width="5" />

线条：line

xml

    <line x1="10" y1="10" x2="300" y2="30" stroke="#000" stroke-width="3" />

折线：polyline

xml

<polyline points="300,100,350,100,350,150,400,150,400,200" fill="red" stroke="#000" stroke-width="3">

多边形：polygon

xml

 <polygon points="300,300, 400, 400, 300, 500" fill="none" stroke="#000" stroke-width="3" />

路径：path

xml

  <path d="M150 600 L300 600 L300 800 L150 800 Z" fill="red" style="stroke:#000; stroke-width:5" />
    <path d="M300 300 A150 150 0 0 0 450 150" fill="none" style="stroke:#000; stroke-width:3" />

M = moveto L = lineto H = horizontal lineto V = vertical lineto C = curveto S = smooth curveto Q = quadratic Belzier curve T = smooth quadratic Belzier curveto A = elliptical Arc

A 半径 1
半径 2
顺时针旋转角度
小弧（0）或大弧（1）
顺时针（1）逆时针（0）

Z = closepath

例子

画太极图

xml

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" style="background:#ccc">
    <path fill="#000" d="M250 50 A100 100 0 0 1 250 250 A100 100 0 0 0 250 450 A200 200 0 0 1 250 50"/>
    <path fill="#fff" d="M250 50 A100 100 0 0 1 250 250 A100 100 0 0 0 250 450 A200 200 0 0 0 250 50"/>
    <circle cx="250" cy="150" r="30" fill="#fff"/>
    <circle cx="250" cy="350" r="30" fill="#000"/>
</svg>

svg ​

怎么使用 ​

书写 svg 代码 ​

矩形:rect ​

圆形：circle ​

椭圆：ellipse ​

线条：line ​

折线：polyline ​

多边形：polygon ​

路径：path ​

例子 ​

svg