HTML SVG

什么是SVG

<svg>是HTML5添加的新元素
SVG代表可缩放矢量图形
SVG用于定义Web的图形
SVG是W3C的推荐

HTML <svg>元素是SVG图形的容器。SVG有几种绘制路径，框，圆，文本和图形图像的方法。 <svg>浏览器支持：

Internet Explorer	Chrome	FireFox	Safari	Opera

9.0（包含）以上支持	4.0（包含）以上支持	3.0（包含）以上支持	3.2（包含）以上支持	10.1（包含）以上支持

SVG示例

SVG圆:

<!DOCTYPE html>
       <html>
       <body>
       <!-- cx  cy  是圆心的平面坐标，r是半径，stroke是边框色，stroke-width是边框宽，fill是填充色 -->
       <svg width="100" height="100">
         <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="#1E9FFF" />
       对不起你的浏览器不支持内联SVG。浏览器不支持将显示这里。
       </svg>
        
       </body>
       </html>

尝试一下

SVG矩形:

<!DOCTYPE html>
         <html>
         <body>

         <svg width="400" height="100">
           <rect width="400" height="100"  style="fill:rgb(0,255,0);stroke-width:10;stroke:rgb(255,0,0)" />
         对不起你的浏览器不支持内联SVG。浏览器不支持将显示这里。
         </svg>
          
         </body>
         </html>

尝试一下

SVG圆角矩形:

<!DOCTYPE html>
       <html>
       <body>

       <svg width="400" height="180">
         <rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:#009688;stroke:#FFB800;stroke-width:5;opacity:0.5" />
       对不起你的浏览器不支持内联SVG。浏览器不支持将显示这里。
       </svg>

       </body>
       </html>

尝试一下

SVG星形:

<!DOCTYPE html>
       <html>
       <body>

       <svg width="300" height="200">
         <polygon points="100,10 40,198 190,78 10,78 160,198"
         style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
       对不起你的浏览器不支持内联SVG。浏览器不支持将显示这里。
       </svg>
        
       </body>
       </html>

尝试一下

SVG标志:

<!DOCTYPE html>
       <html>
       <body>

       <svg height="130" width="500">
         <defs>
           <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
             <stop offset="0%"
             style="stop-color:rgb(0,255,0);stop-opacity:1" />
             <stop offset="100%"
             style="stop-color:rgb(255,0,0);stop-opacity:1" />
           </linearGradient>
         </defs>
         <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
         <text fill="#2F4056" font-size="45" font-family="Verdana"
         x="50" y="86">SVG</text>
       对不起你的浏览器不支持内联SVG。浏览器不支持将显示这里。
       </svg>

       </body>
       </html>

尝试一下

SVG和Canvas之间的差异

SVG是一种用于描述XML中的2D图形的语言。 Canvas即时绘制2D图形（使用JavaScript）。 SVG是基于XML的，这意味着SVG DOM中的每个元素都可用。您可以为元素附加JavaScript事件处理程序。在SVG中，每个绘制的形状都被记住为对象。如果更改了SVG对象的属性，则浏览器可以自动重新渲染形状。 Canvas逐像素渲染。在Canvas中，一旦绘制了图形，浏览器就会忘记它。如果想更改其位置，则需要重绘整个场景，包括可能已被图形覆盖的任何对象。下表显示了Canvas和SVG之间的一些重要差异：

Canvas	SVG
分辨率相关	分辨率独立
不支持事件处理程序	支持事件处理程序
文本渲染能力差	最适合大型渲染区域的应用程序（例如谷歌地图）
可以将生成的图像保存为.png或.jpg。	如果渲染复杂（任何使用DOM的东西都会很慢）
非常适合图形密集型游戏	不适合游戏应用

要了解有关SVG的更多信息，请阅读我们的SVG教程。