SVG 嵌入 HTML 页面

我们都知道位图有一个缺点,就是放大缩小会导致图片失真,为了解决这个问题,矢量图就应运而生,其中SVG(可缩放矢量图形)就是一种w3c标准的矢量图。SVG的应用非常广泛,

与其他图像格式相比(比如 JPEG 和 GIF),使用 SVG 的优势在于:

  • SVG 图像可通过文本编辑器来创建和修改
  • SVG 图像可被搜索、索引、脚本化或压缩
  • SVG 是可伸缩的
  • SVG 图像可在任何的分辨率下被高质量地打印
  • SVG 可在图像质量不下降的情况下被放大


那么我们如何使用SVG呢?在 HTML5 中,可以将 SVG 元素直接嵌入 HTML 页面中,使得SVG的使用变得非常简单。下面是我们的一个使用SVG的小例子:

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
   <polygon points="100,10 40,180 190,60 10,60 160,180"
   style="fill:red;stroke:blue;stroke-width:3;fill-rule:evenodd;" />
</svg>
 
</body>
</html>


你可能感兴趣的:(html,html5,svg,svg,嵌入)