返回顶部

HTML5 内联 SVG

[复制链接]
挺自己Lv.1 显示全部楼层 发表于 2022-1-6 16:20:25 |阅读模式 打印 上一主题 下一主题
  一、什么是SVG?

  SVG指可伸缩矢量图形(ScalableVectorGraphics)

  SVG用于定义用于网络的基于矢量的图形

  SVG使用XML格式定义图形

  SVG图像在放大或改变尺寸的情况下其图形质量不会有损失

  SVG是万维网联盟的标准

  二、SVG优势

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

  SVG图像可通过文本编辑器来创建和修改

  SVG图像可被搜索、索引、脚本化或压缩

  SVG是可伸缩的

  SVG图像可在任何的分辨率下被高质量地打印

  SVG可在图像质量不下降的情况下被放大

  三、把SVG直接嵌入HTML页面

  在HTML5中,您能够将SVG元素直接嵌入HTML页面中:

  实例
[HTML] 纯文本查看 复制代码
<!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:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>
 
</body>
</html>

  结果:

  抱歉,你的浏览器不支持内联SVG.

  四、SVG与Canvas两者间的区别

  SVG是一种使用XML描述2D图形的语言。

  Canvas通过JavaScript来绘制2D图形。

  SVG基于XML,这意味着SVGDOM中的每个元素都是可用的。您可以为某个元素附加JavaScript事件处理器。

  在SVG中,每个被绘制的图形均被视为对象。如果SVG对象的属性发生变化,那么浏览器能够自动重现图形。

  Canvas是逐像素进行渲染的。在canvas中,一旦图形被绘制完成,它就不会继续得到浏览器的关注。如果其位置发生变化,那么整个场景也需要重新绘制,包括任何或许已被图形覆盖的对象。

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

达内教育:成立于2002年。致力于面向IT互联网行业,培养软件开发工程师、测试工程师、系统管理员、智能硬件工程师、UI设计师、网络营销、会计等职场人才 达内使命:缔造年轻人的中国梦、缔造达内员工的中国梦 达内愿景:做管理一流的教育公司
  • 商务合作

  • 微信公众号

  • Powered by Discuz! X3.4 | Copyright © 2002-2021, 达内教育 Tedu.cn
  • 京ICP备08000853号-56 |网站地图 | 京公网安备 11010802029508号