SVG 矢量图形格式

时间：2022-10-26 13:06:33

SVG（Scalable Vector Graphics）是基于 XML 的一种矢量图形格式，它即可以作为单独的图形文件使用也可以嵌入到网页中并由 JavaScript 来操作，非常方便和灵活。SVG 在较新的浏览器中都支持，包括 Firefox 1.5，Opera 8.0，Safari 3.0.4，Chrome 1.0 和 IE 9 等。

在 SVG 中可以直接画出直线，矩形，圆形，多边形等。或者可以用更加一般的路径（path）元素，画出用椭圆弧或者贝塞尔曲线连接的复杂形状。例如：

<?xml version="1.0"?>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="480" height="96" viewBox="0 0 480 96">

  <g id="line" stroke="rgb(0,127,127)" stroke-width="12">

    <line x1="10" y1="10" x2="86" y2="86"/>

    <line x1="10" y1="86" x2="86" y2="10"/>

  </g>

  <g id="rect" transform="translate(96,0)" fill="rgb(255,0,0)">

    <rect x="0" y="0" width="96" height="96" rx="20"/>

  </g>

  <g id="polygon" transform="translate(192,0)" stroke="rgb(51,51,51)" fill="gray" stroke-width="5">

    <polygon points="24,64 48,32 72,64"/>

  </g>

  <g id="circle" transform="translate(288,0)" fill="rgb(0,255,0)">

    <circle id="circle" cx="48" cy="48" r="48"/>

  </g>

  <g id="path" transform="translate(384,0)" stroke="black" stroke-width="3" fill="none">

    <path d="M 6 6 C 3 60, 90 20, 90 90 z"/>

  </g>

</svg>

参考资料：
[1] * - 可缩放矢量图形
[2] MDN - SVG 教程
[3] W3School - SVG 教程
[4] MSDN - SVG
[5] Resolution Independence With SVG | Smashing Coding
[6] SVG-edit - A complete vector graphics editor in the browser
[7] Method Draw, the SVG Editor for Method of Action
[8] ScriptDraw 2.0
[9] Raphael Icons
[A] 30 Awesome And Free Flat Icon Sets
[B] svgweb - SVG for Web Browsers using Flash
[C] CSS-Tricks - Using SVG

相关文章