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 >
    <line x1="10" y1="10" x2="86" y2="86"/>
    <line x1="10" y1="86" x2="86" y2="10"/>
  </g>
  <g >
    <rect x="0" y="0" width="96" height="96" rx="20"/>
  </g>
  <g >
    <polygon points="24,64 48,32 72,64"/>
  </g>
  <g >
    <circle />
  </g>
  <g >
    <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

相关文章:

  • 2021-11-15
  • 2021-12-22
  • 2021-12-23
  • 2021-12-19
  • 2021-12-22
  • 2021-12-27
  • 2021-10-18
猜你喜欢
  • 2021-12-19
  • 2021-08-21
  • 2021-09-21
  • 2021-11-30
  • 2021-08-15
  • 2021-12-31
  • 2021-09-26
  • 2021-12-10
相关资源
相似解决方案