美文网首页
HTML5 内联 SVG

HTML5 内联 SVG

作者: 龍飝 | 来源:发表于2018-03-20 10:09 被阅读6次

什么是SVG?
1.SVG 指可伸缩矢量图形
2.SVG 用于定义用于网络的基于矢量的图形
3.SVG 使用XML格式定义图形
4.SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
5.SVG 是万维网联盟的标准

SVG 优势
与其他图形格式相比(比如 JPEG GIF),使用SVG 的优势在于:
1.SVG 图像可通过文本编辑器来创建和修改
2.SVG 图像可悲搜索、索引、脚本化或压缩
3.SVG 是可伸缩的
4.SVG 图像可在任何的分辨率下被高质量的打印
5.SVG 可在图像质量不下降的情况下被放大

实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<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和Canvas两者间的区别
1.SVG是一种使用XML描述2D图形的语言
2.Canvas通过JavaScript来绘制2D图形
3.SVG基于XML,这意味着SVG DOM中的每个元素都是可用的,你可以为某个元素添加JavaScript事件处理器
4.在SVG中,每个背绘制的图形均被视为对象,如果SVG对象的属性发生变化,那么浏览器能够自动重现图形
5.Canvas是逐像素进行渲染的,在Cnvas中,一旦图形背绘制完成,他就不会继续得到浏览器的关注,如果其位置发生变化,那么整个场景也需要重新绘制,包括任何或者已被图形覆盖的对象

相关文章

  • HTML5 内联 SVG

    HTML5 支持内联 SVG。 什么是SVG? SVG 指可伸缩矢量图形 (Scalable Vector Gra...

  • HTML5 内联 SVG

    HTML5 支持内联 SVG。 什么是SVG? SVG 指可伸缩矢量图形 (Scalable Vector Gra...

  • HTML5 内联 SVG

    HTML5支持内联SVG。 什么是SVG? SVG指可伸缩矢量图像(Scalable Vector Graphic...

  • HTML5 内联 SVG

    什么是SVG?1.SVG 指可伸缩矢量图形2.SVG 用于定义用于网络的基于矢量的图形3.SVG 使用XML格式定...

  • HTML5 内联 SVG

    svg核心学习 svg是什么呢?百度是这样说的:svg(可缩放矢量图形)是基于可扩展标记语言(标准通用标记语言的子...

  • HTML5 内联SVG

    简介 上篇文章HTML5 canvas绘图[https://www.jianshu.com/p/53417d048...

  • 扣丁学堂简述什么是HTML5内联SVG及SVG的优势

    HTML5内联SVG不知道有多少对HTML5感兴趣的小伙伴知道,SVG的优势又有多少小伙伴了解呢?本篇文章跟扣丁学...

  • svg/多媒体/地理定位

    内联svg 定义 svg 指可伸缩矢量图 svg 用于定义用于网络的基于矢量的图形 svg 使用XML格式定义图形...

  • HTML5学习--SVG全攻略(进阶篇)

    ****此篇为svg的进阶介绍篇,了解更多关于svg的介绍请看 HTML5学习--SVG全攻略(基础篇)*** *...

  • HTML_内联SVG

    1、什么是SVG? SVG 指可伸缩矢量图形 (Scalable Vector Graphics)SVG 用于定义...

网友评论

      本文标题:HTML5 内联 SVG

      本文链接:https://www.haomeiwen.com/subject/vgbzfftx.html